HTML Child / A Document, Not a Picture

The page you are reading is a document before it is a design

Every web page carries two lives at once: the one you see and the one you describe. This magazine is about the second one, because it is the one that decides whether the first one works.

Most people meet the web through its surface. You open a page, you see a column of words, a picture, a coloured rectangle that says the word Continue, and you form an impression of the whole thing in about a second. That impression is real, but it is not the page. Underneath it sits something quieter and far more consequential: a description. Someone, at some point, wrote down what each part of that page actually is. This is a heading. This is a list of three items. This is a link that goes elsewhere. This is a control that submits what you typed. The visual surface is assembled from that description, and never the other way around.

That distinction sounds academic until you notice how many different things read the same page. A browser on a laptop reads it. A browser on a phone with a cracked screen reads it. A screen reader, speaking aloud to somebody who is not looking at the screen at all, reads it. A search engine reads it and decides what the page is about. A reading mode strips away everything decorative and keeps what it believes is the article. A device that has not been invented yet will read it too, and it will not have your stylesheet, your fonts or your assumptions. Each of those readers is working from the description, not from your impression of the design.

So the description has to be honest. If you label something a heading because you wanted larger text, you have told every one of those readers that a new section begins here, when in fact nothing begins here. If you make a paragraph out of a line that is really an item in a list, you have hidden the fact that there are five things and that they belong together. If you draw a button out of a piece of plain text and attach some behaviour to it, you have made something that looks like a control and behaves like a control and yet announces itself as nothing at all. Every one of those choices is a small lie told to a reader you cannot see.

The craft of markup, then, is a kind of careful naming. You look at a piece of content and you ask what it genuinely is, not what you want it to look like. Is this a quotation, or a paragraph you would like indented? Is this a table of figures, or a grid you wanted because the columns lined up neatly? Is this a link, which takes me somewhere, or a control, which does something to the page I am already on? Answering those questions correctly costs almost nothing at the moment of writing. Answering them incorrectly costs somebody else a great deal later, quietly, in a way you will probably never hear about.

There is a strong temptation to treat all of this as a compliance exercise, a checklist bolted on at the end by somebody more virtuous than yourself. It is not. Almost everything people file under accessibility is simply the result of ordinary correct description. A heading that is a heading gives a blind reader a table of contents. A label attached to its field means a person can tap the word next to the box and land inside the box. A link that says where it goes is useful to somebody hearing a list of links read aloud in isolation, and it is also useful to you, in six months, reading your own page. The good outcomes arrive together because they come from the same source.

This magazine exists to make that source visible. We will not show you syntax, and that is deliberate. Syntax is the easy part and it is everywhere already. What is harder to find, and what most beginners are never given, is the habit of thinking about a page as a structured document with meaning in it: an outline that holds together, elements chosen for what they are, and a set of promises about behaviour that hold up when the network drops, the images fail and the decoration never arrives. Learn that first and the syntax becomes a small matter of spelling. Skip it and no amount of polish will rescue the result.