Editorial Training logo

A Short Guide

XML Basics


Tags and elements

A complete XML document

Naming your XML elements

XML attributes

Document structure


Try your code

HTML Basics


Versions of HTML

Content vs presentation

Simple HTML elements

A basic HTML page

Empty elements


Important attributes for images

Strange looking attributes

HTML comments

Try your code

CSS Basics


CSS syntax

Where does CSS go?


The ID selector

Applying styles to a whole document

Comments in CSS

XML, HTML and CSS – a Short Guide from Editorial Training

By Alex Painter

This short guide is intended as an introduction to the some of the technologies involved in rendering text and images online or in an ebook format.

It's not intended for programmers or for experienced coders, but I hope it will be useful to editorial and production staff who would like a better understanding of the technology they use every day.

In particular, I hope it helps to remove some of the mystery. The principles here are often simple and easy to follow, even if the detail can get complicated at times.

The guide is designed to help you:

The aim is not to get too bogged down in the detail, but what we will do is introduce you to best practice along the way.

In particular, you'll get a good grounding in the syntax of these languages, but we won't be delving too far into the vocabulary. However, once you know the basics of how a language works, it's quite easy to look up the specifics.

When learning HTML and CSS, you may find it helpful to try out short sections of code. Just click on the following button on the left hand menu:

Try your code

This will open up a window in which you'll be able to test what you've written.

We'll be adding more sections later, but for now, choose from XML, HTML and CSS: