HTML & CSS / Foundations / Lesson 2
Semantic text, links, and navigation
Build a document outline and navigation that remain understandable through headings, link names, and native interaction.
On this page
Lesson goals
- Choose elements by purpose
- Use real links for destinations
- Review names and reading order
Choose elements by purpose
A heading introduces a section, a paragraph expresses a unit of prose, and a list groups related items. Choose elements for those purposes rather than the default font size. strong identifies importance and em identifies stress emphasis; neither is simply a shortcut for a chosen visual style. Use CSS when the only requirement is presentation. Generic div and span elements remain useful containers when no more specific meaning applies. Excessive semantic labeling can also confuse: a short visual box does not automatically deserve an article or a separate named region. Explain the content’s role first, then choose the element.
Make heading relationships visible
Use a clear heading hierarchy that reflects nesting, commonly a page h1 followed by h2 sections and h3 subsections. Do not choose an h4 merely because its default appearance fits a card. A sectioning element does not provide a reliable automatically repaired heading outline for assistive technology; explicitly choose appropriate ranks. Screen-reader users may navigate by headings, so a coherent sequence offers a useful map. Empty or decorative headings pollute that map. The visual design can make two headings similar in size while their semantic ranks still express different roles in the document.
Use real links for destinations
An anchor with href represents navigation. Its text should identify the destination or purpose in context; repeated “click here” labels make a list of links difficult to scan. Fragment links reference an element’s unique id in the same document. Native links provide keyboard activation, context menus, and familiar browser behavior without custom click handlers. A button instead performs an action such as opening a dialog or submitting a form. Styling a link as a button does not change its underlying navigation purpose. The first example connects a navigation list to two real sections in one local document.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Local navigation</title>
</head>
<body>
<nav aria-label="On this page"><ul><li><a href="#schedule">Schedule</a></li><li><a href="#access">Access</a></li></ul></nav>
<main><h1>Workshop</h1><section id="schedule"><h2>Schedule</h2><p>Two morning sessions.</p></section><section id="access"><h2>Access</h2><p>A step-free entrance is available.</p></section></main>
</body>
</html>
Two named links navigate to matching document sections.Each destination exists and each section has an explicit heading. The navigation label distinguishes this list’s purpose.
Provide a path around repetition
A skip link lets keyboard users move past repeated navigation to the main content. Place it early in source order and keep a visible focus presentation. The second example leaves the link visible continuously, a simple reliable choice that avoids hiding its focus state incorrectly. A named nav is useful when several navigation regions need distinction; an ordinary page with one nav may not need extra naming. main identifies the principal content, while header and footer semantics depend on their context. Landmarks and headings complement one another; neither eliminates the need for sensible source order and meaningful link text.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Skip navigation</title>
<style>
a:focus-visible { outline: 3px solid #164e9a; outline-offset: 3px; }
</style>
</head>
<body>
<a href="#content">Skip to main content</a>
<nav aria-label="Site"><a href="#about">About</a></nav>
<main id="content"><h1>Course information</h1><section id="about"><h2>About this course</h2><p>Use a keyboard to follow the skip link.</p></section></main>
</body>
</html>
The skip link precedes navigation and has a visible focus indicator.The first focusable item offers a direct route to main. The outline adds visible focus without replacing native link semantics.
Review names and reading order
Read the page without its styling and list its headings and links. Can a new reader locate the topic, understand the sequence, and predict each destination? Then use Tab and Shift+Tab to verify that focus follows a useful path and remains visible. Avoid positive tabindex values as a way to repair visual rearrangement; they create a separate maintenance problem and often diverge from reading order. Links need distinguishable states beyond a color difference where surrounding text otherwise makes them hard to identify. Preserve underlines or another sufficiently clear treatment, and test focus separately from pointer hover.
Common errors and fixes
A large text line is absent from heading navigation
- Why it happens
- A styled div was used for a genuine heading.
- How to fix it
- Use a correctly ranked heading and style it separately.
- Prevent it next time
- Review semantics before polishing typography.
Several links have indistinguishable names
- Why it happens
- Their visible text says only “more”.
- How to fix it
- Describe each destination in its link context.
- Prevent it next time
- Review a list of link names independently.
Keyboard order contradicts the content
- Why it happens
- Positive tabindex or visual reordering created competing sequences.
- How to fix it
- Restore logical source order and ordinary focus navigation.
- Prevent it next time
- Test reading and keyboard order together.
Check your understanding
1. Choose between a link and button for “View receipt” and “Expand receipt details”.
Show worked solution
Use a link when viewing the receipt navigates to a destination. Use a button or a suitable native disclosure control when expanding content in place. The wording alone is not decisive; identify the interaction’s result, then preserve the browser behavior appropriate to that result.
2. Repair a page that uses h1 for every card because all card titles are large.
Show worked solution
Identify the page heading and the actual nesting of card groups. Use h2 or h3 where those relationships require them, then apply one shared CSS class to produce the desired visual size. This keeps the navigation map meaningful without sacrificing the design.
Key takeaways
- Native elements carry useful interaction and meaning.
- Heading rank describes structure rather than size.
- Source order should support reading and keyboard navigation.