Before this lesson
Complete lesson 1 and be able to create and open an HTML file.
What you will be able to do
Choose elements by information structure, distinguish navigation from actions, and write link text that makes sense on its own.
Understand the mechanism
Heading ranks describe section relationships, not font sizes. Use an h1 for the page topic, h2 for major sections and h3 inside those sections. Readers and assistive technology can scan the heading structure. Jumping from h1 to h4 merely to obtain smaller text makes that structure harder to understand; use CSS to control size.
An anchor navigates to a URL or fragment; a button performs an action. Even when both look like rectangles, browser and keyboard behavior differ. Ordered lists communicate meaningful sequence; unordered lists group items whose order is not essential. strong marks importance, so use it for emphasis in meaning rather than every visual bold style.
Runnable example
<h1>My learning plan</h1>
<p>Start with <strong>HTML</strong>, then learn CSS.</p>
<h2>Three steps</h2>
<ol>
<li>Read a lesson</li>
<li>Write the example</li>
<li>Change something</li>
</ol>
<a href="https://developer.mozilla.org/">Read MDN</a>Trace and verify
Place the fragment in the previous document body. Tab to Read MDN and press Enter to navigate. Then add a heading with id="practice" and a link to #practice. Verify that the fragment identifies the correct section. Replacing ol with ul changes the meaning from ordered steps to related items, not merely numbers into bullets.
Common mistakes and boundaries
Avoid using href="#" as a fake action button: it changes the fragment and may scroll to the top. Vague text such as “click here” loses meaning when links are presented separately. Keep IDs unique so fragment navigation is predictable, and never nest one anchor inside another.
Practice challenge
Design a three-level heading structure for a personal-page tutorial, with a table of contents for preparation, implementation and checking.
Reference solution and reasoning
Use h2 for the three main sections and h3 only for their subtasks. Match each table-of-contents href to a heading ID. Descriptive labels make the outline understandable by itself. Native fragment navigation needs no JavaScript.
<nav aria-label="On this page"><a href="#build">Build the page</a></nav>
<h2 id="build">Build the page</h2>
<h3>Add the introduction</h3>