Responsive Web Foundations / M1

Connect headings, text and links

What you will learn

• Create a useful heading hierarchy.
• Link to a page section and to an external resource.

Headings form an outline. Use h1 for this page's main topic, h2 for its sections and h3 for a subsection within one of those sections. Choose levels by the relationship between topics, not by the size you want. CSS can change their appearance later. For our pilot pages, start with one h1 and avoid skipping levels when opening a deeper topic.

A link is an anchor element with an href. Its text should explain the destination: “Read the learning notes” is more useful than “Click here”. Links navigate somewhere. A button performs an action. You only need links for this lesson.

Use href="#notes" to navigate to an element in the same document with id="notes". The hash identifies a fragment, not a filename. Each id must be unique. The spelling and letter case must agree. You may put the id on the heading or the section that contains it.

A relative address such as about.html refers to a file in the same folder. images/portrait.svg refers to a file in a subfolder. An address starting with https:// specifies a website. Use real destinations rather than an empty href or a lone hash. A link can look correct while leading nowhere useful.

Try your page with the keyboard. Press Tab until a link receives focus, then press Enter. The browser's visible focus indicator helps you see where you are. Keep that indicator. A mouse click alone does not tell you whether someone can navigate the page with a keyboard.

Working example

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

<nav aria-label="Page"><a href="#about">About</a> · <a href="#notes">Notes</a></nav>
<main>
<h1>Learning journal</h1>
<section id="about"><h2>About</h2><p>I build small web pages.</p></section>
<section id="notes"><h2>Notes</h2><p><a href="https://developer.mozilla.org/">Explore MDN documentation</a></p></section>
</main>

Open in browser editor

Download working example

Try a change

Add a third section called Next steps with id="next-steps". Add a link to it in nav. Use Tab and Enter to follow the new link in your downloaded page.

What you should observe

The link targets the new section and the URL gains #next-steps. The three sections are siblings with h2 headings, not progressively deeper heading levels.

Check your understanding

Why does href="#next" not find id="next-steps"?