Text, links and images
The three things almost every page is made of: headings and paragraphs that carry meaning, links that go somewhere, and images that everyone can understand.
Headings carry the outline
There are six heading levels, <h1> to <h6>, and they are an outline, not a font size. A page has one <h1> — what this page is about — and <h2> for its main sections. Skipping from <h1> to <h3> does not look wrong; it reads wrong, because a screen reader announces the level and a crawler builds a table of contents from it.
Paragraphs are <p>. Emphasis is <em> for stress and <strong> for importance — both change meaning, and both are announced. If you only want bold text with no meaning attached, that is a styling job, not a markup one.
Which element, when
<h2>— a section of the page, under the<h1>.<p>— a paragraph of prose.<strong>— this word matters: a warning, a required field, the key noun.<em>— stress on a word, the way you would lean on it while speaking.<br>— a line break inside a paragraph, for an address or a poem. Never to space paragraphs apart; writing the paragraphs as paragraphs is markup’s job, and the space between them is not markup’s at all.
An article with an outline
Add a second `<h2>` section with a paragraph under it, and mark one word as important with `<strong>`.
2 left to do
- There are at least two h2 sections
- One word is marked as important with the
strongelement
The new section goes after the first one, inside <body>.
Links
A link is an <a> with an href. The destination is a URL: absolute (https://example.com/pricing) for another site, relative (./about.html, /pricing) for somewhere on yours, or a fragment (#pricing) for somewhere on this page.
The text of the link is what a person clicks and what a search engine reads, so it should describe the destination. "Read the pricing page" survives being read out of context; "click here" does not, and screen reader users often jump from link to link.
Links that say where they go
Add a second link that points at a page on the same site, and give both links text that describes the destination rather than "click here".
1 left to do
- There are at least two links
A relative link looks like <a href="./about.html">About this site</a>.
Links within the page
An id gives an element a name a fragment link can reach. <h2 id="pricing">Pricing</h2> together with <a href="#pricing">See the pricing</a> moves the reader down the page without a reload, and the browser updates the address so the position can be shared.
The id must be unique on the page. A fragment goes to the first match, so a duplicate sends every link to the same place. An absolute URL points elsewhere; a relative path survives a move to another domain.
How a relative path resolves
A relative path is resolved against the address of the page, not against your folder on disk. From https://example.com/recipes/bread.html, a link to ./about.html means https://example.com/recipes/about.html; /pricing starts again at the domain root; and ../index.html climbs one directory before looking. A trailing slash says the address is a directory, so recipes/ asks the server for that folder’s index file rather than a file called recipes. That is why a link can work on your machine and break after upload: the page moved, and a path written from the old place no longer resolves.
Images
An image is <img src="…" alt="…">. The alt text is not a caption and not a keyword field: it is what replaces the image when it cannot be seen — a broken file, a slow connection, or a screen reader. Describe what the image does in the page. A decorative image gets alt="", which tells assistive technology to skip it.
Giving width and height lets the browser reserve space before the image arrives, so the text does not jump around as it loads. Below, the images are inline data URLs so the example runs without a single network request — a real project would point src at a file.
Images with meaning
Give both images an alt that describes them (or an empty alt if they are decorative), and add a caption to the figure.
2 left to do
- The image has an alt attribute (empty is fine when decorative)
- The figure has a caption
<figcaption> sits inside <figure>, after the <img>.
Whitespace is not markup
In the source, a run of spaces, tabs and newlines collapses to a single space when the page is drawn, so you can indent HTML without changing the words. A line break inside a paragraph is <br>; a space that must not collapse is , a last resort because it stops the line wrapping there.
Characters with a meaning in markup are written as references: < for a literal less-than sign, & for an ampersand, and " inside a quoted attribute. The browser decodes them before the text reaches the reader, so the page says what you meant instead of starting a tag in the middle of a sentence. A reference is also how you write a character that is awkward to type, such as © for the copyright sign.
Never write the words "image of" or "picture of" in alt. The reader already knows it is an image — it is announced as one. Describe the content instead.
Three quiet link and image mistakes: an href of # that looks like a link but goes nowhere; an image with no alt at all, so a screen reader reads the file name; and a relative path that only works from one directory. Check where each link really goes, and describe each image by what it adds to the page.
Try these next
- Link to a section of the same page with
#id, then reload with the fragment still attached to the address. - Write a sentence containing
<and&with character references, and check the rendered text. - Add a purely decorative image with
alt=""and compare what a screen reader skips.
Check what you learned
One question at a time. A wrong answer explains itself — take another go.
Part 1 of 5
What is alt text for?