Responsive Web Foundations / M2

Read the page without its appearance

What you will learn

• Organise content into meaningful regions.
• Check whether source order tells a coherent story.

A document should make sense before it is styled. Imagine reading its text from top to bottom, with no columns, colours or decorative spacing. You should encounter the page identity, useful navigation, the main topic and its sections in a sensible order. That order also helps people who use a screen reader or a keyboard.

Use main for the primary content. A site introduction can sit in header; closing notes can sit in footer. A section groups a topic within the page. An article is appropriate for a self-contained piece such as a journal entry that could make sense independently. These elements can be nested when their meanings fit. You do not need every element on every page.

A div is a generic container. It is useful when grouping is needed but no more meaningful element fits. It does not tell someone that its text is a heading, a list or navigation. Replacing every div with section is not an improvement either: first decide what the content is.

Read only the headings. They should describe an understandable outline. Then read the paragraphs and list items in their actual source order. A sentence should not depend on visual placement such as “use the green box on the right”. Describe the action or subject instead.

A skip link lets keyboard users move past repeated navigation to main. It is an ordinary link to main's id. The example keeps it visible and adds tabindex="-1" to main so it can receive focus without becoming an extra normal Tab stop. We will examine focus styling more deeply in module 6.

Working example

The HTML shown here is the body fragment. The download includes the complete document.

<a href="#main">Skip to content</a>
<header><p>Kitchen notes</p><nav aria-label="Page"><a href="#method">Method</a></nav></header>
<main id="main" tabindex="-1"><h1>Tomato toast</h1><p>A quick lunch for one.</p><section id="method"><h2>Method</h2><ol><li>Toast two slices.</li><li>Add tomato.</li></ol></section></main>
<footer><p>Recipe by Mina</p></footer>

Open in browser editor

Download working example

Try a change

Add an Ingredients section before Method. Give it an id and add a navigation link. Read the complete page aloud in source order and test the skip link in the downloaded file.

What you should observe

The introduction comes before ingredients, which come before instructions. Each navigation link reaches a real target. The skip link reaches main.

Check your understanding

Does text that looks large and bold automatically count as a heading?