4.1 Anchors, Destinations, Fragments, and Meaningful Link Text
Prerequisites
Before starting this lesson, you should be able to create and validate a complete HTML document, organise content with headings and semantic regions, and give an element a unique id. Lesson 1.4 introduced the main parts of a URL. Lesson 3.6 introduced nav and explained that it should contain real navigation links.
You do not need to know CSS. The stylesheet in this lesson is supplied. Email links, telephone links, downloadable files, external-link behaviour, target, and rel are taught in Lesson 4.4.
Starting files
Create this folder and these two files:
community-workshop-site/
├── index.html
└── style.css
Starting index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Community Workshop</title>
<meta name="description" content="Information about a practical community workshop, including its schedule and safety guidance.">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="page" id="main-content">
<article>
<header class="page-header">
<h1>Community Workshop</h1>
<p class="intro">Learn how to inspect an everyday item, make one controlled change, and record the result.</p>
</header>
<section id="schedule">
<h2>Workshop schedule</h2>
<p>The workshop begins at 09:00 with a safety explanation. Supervised practical work begins at 09:30.</p>
</section>
<section id="preparation">
<h2>How to prepare</h2>
<p>Bring one accepted item, a notebook, and any useful information about the problem you observed.</p>
</section>
<section id="safety">
<h2>Safety guidance</h2>
<p>Follow the facilitator’s instructions. Do not open or test equipment that requires specialist knowledge.</p>
</section>
<footer class="page-footer" id="contact">
<h2>Contact the organiser</h2>
<address>
<p>Community Workshop Team</p>
<p>Email: workshop@example.com</p>
</address>
<p><small>The contact details in this lesson are sample data.</small></p>
</footer>
</article>
</main>
</body>
</html>
Starting style.css:
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.6;
color: #1f2933;
background-color: #f3f6f8;
}
.page {
max-width: 760px;
margin: 0 auto;
padding: 24px;
background-color: #ffffff;
}
.intro {
font-size: 20px;
}
.page-header,
section,
.page-footer {
margin-bottom: 40px;
}
.page-footer {
padding-top: 24px;
border-top: 1px solid #9aa8b4;
}
Run the local server introduced in Lesson 1.6 from inside community-workshop-site. Open the page through the local http:// address before making the changes.
1. Understand what a hyperlink does
A hyperlink, usually shortened to link, gives a person a way to navigate to another resource or to a particular part of a resource. The visible or otherwise available content of the link labels that destination.
In HTML, the a element creates an anchor. When an a element has an href attribute, it represents a hyperlink. This is a complete text link:
<a href="#schedule">Workshop schedule</a>
The opening tag is <a href=”#schedule”>. The element name is a. The href attribute contains the destination. The words Workshop schedule are the link’s visible label. The closing tag is </a>.
You do not need to expand or memorise the attribute name. Remember its practical role: the value of href tells the browser where the link should lead.
An a element without href is not a normal working hyperlink. The HTML standard treats it as a placeholder where a link might have been relevant. Do not remove href merely to make a link appear unavailable. Use ordinary text when there is no destination, or provide a real destination when navigation should work.
2. Connect the link to a real destination
The destination is the resource or document location identified by href. A destination can be another page, a file, or a particular section. This lesson begins with sections in the current page. Later lessons add paths to other pages and files.
The value #schedule is a fragment reference. A fragment identifies a part of a resource. In this page, it identifies the element whose id is schedule:
<section id="schedule">
<h2>Workshop schedule</h2>
<p>The workshop begins at 09:00 with a safety explanation.</p>
</section>
The # is part of the link value. It is not part of the id. The browser compares the fragment value after # with a target identifier in the document.
The two values must match. This link targets id=”schedule”:
<a href="#schedule">Workshop schedule</a>
This version does not target it because times and schedule are different values:
<a href="#times">Workshop schedule</a>
Use short, stable identifiers without spaces. Keep their spelling and letter case consistent. Each id must be unique in the document, as explained in Lesson 3.6.
3. Understand what happens when a fragment link is followed
When a person follows #schedule, the browser updates the URL so that it ends with that fragment. It then indicates the part of the document identified by the fragment, normally by bringing that part into view.
For example, the local address may change from:
http://localhost:8000/index.html
to:
http://localhost:8000/index.html#schedule
The browser does not request a different HTML file merely because this fragment changed. As Lesson 1.4 explained, the fragment is handled separately and is not included in the HTTP request sent to the server.
A fragment link is still useful when the page is short, but it becomes especially helpful on a long page with clearly named sections. Do not create links to every paragraph. Choose destinations that help a reader move between meaningful parts of the content.
If the target does not exist, the browser cannot bring the intended element into view. The page may appear not to move even though the fragment is visible in the address bar. This is a path or identifier problem, not a reason to add JavaScript.
4. Write meaningful link text
Link text should explain the destination or action well enough for a person to decide whether to follow it. This helps everyone scan the page. It is especially important for people who move through links with a keyboard or use software that presents a list of links separately from the surrounding paragraphs.
This link text describes its destination:
<a href="#safety">Read the workshop safety guidance</a>
This version is unclear when read by itself:
<a href="#safety">Click here</a>
“Click here” describes one possible input action, not the destination. A person may use a keyboard, voice control, touch input, or another method instead of a mouse click. “Read more” can also become unclear when a page contains several links with the same label leading to different places.
Do not make link text unnecessarily long. “Workshop schedule” is clear inside an “On this page” list. A whole paragraph does not need to become one link when a short, descriptive label is enough.
Do not use the title attribute as the only explanation of an unclear link. Lesson 3.6 explained that advisory information in title is not dependably available to every touch, keyboard, or assistive-technology user. Put the important destination description in visible link text.
5. Add working page navigation
Place this nav element after the closing </header> and before the first section:
<nav class="page-contents">
<h2>On this page</h2>
<ul>
<li><a href="#schedule">Workshop schedule</a></li>
<li><a href="#preparation">How to prepare</a></li>
<li><a href="#safety">Safety guidance</a></li>
<li><a href="#contact">Contact the organiser</a></li>
</ul>
</nav>
The heading identifies the purpose of this navigation area. The unordered list groups destinations whose order does not change their meaning. Each list item contains one native link. This is now a valid use of nav because the content performs real navigation.
The labels closely match the destination headings. This continuity helps a person predict what will appear after following a link. The labels do not include unnecessary phrases such as “link to.” Browsers and assistive technologies already expose native links as links.
6. Add a return link
Add this paragraph at the end of the article footer:
<p><a href="#main-content">Return to the workshop overview</a></p>
The starting file already gives main the identifier main-content. The link therefore has a real target. Its label describes the destination more clearly than “Back to top.” It tells the reader that the link returns to the beginning of the workshop’s main information.
A return link is not required on every short page. It is included here so that you can practise another fragment destination and see the same pattern applied outside the contents list.
7. Keep the native link behaviour
Do not make a span, div, or paragraph act like a link. Native links already have the expected navigation meaning and can normally receive keyboard focus and be activated without custom JavaScript.
Do not place one link inside another link. Do not place a button or another interactive control inside this text link. A person should encounter one clear interactive purpose at a time.
The supplied CSS below adds spacing and a visible keyboard-focus outline. The CSS does not create the link behaviour. The a element with href provides the behaviour, even if the stylesheet fails.
Add these supplied rules to the end of style.css:
.page-contents {
margin: 24px 0 40px;
padding: 16px 20px;
background-color: #edf5f8;
}
a {
color: #005a78;
}
a:focus {
outline: 3px solid #f29f05;
outline-offset: 3px;
}
Formal CSS selectors and pseudo-classes are taught in Module 7. For now, use these rules exactly as supplied and assess the HTML link decisions.
Complete solution
Completed index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Community Workshop</title>
<meta name="description" content="Information about a practical community workshop, including its schedule and safety guidance.">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="page" id="main-content">
<article>
<header class="page-header">
<h1>Community Workshop</h1>
<p class="intro">Learn how to inspect an everyday item, make one controlled change, and record the result.</p>
</header>
<nav class="page-contents">
<h2>On this page</h2>
<ul>
<li><a href="#schedule">Workshop schedule</a></li>
<li><a href="#preparation">How to prepare</a></li>
<li><a href="#safety">Safety guidance</a></li>
<li><a href="#contact">Contact the organiser</a></li>
</ul>
</nav>
<section id="schedule">
<h2>Workshop schedule</h2>
<p>The workshop begins at 09:00 with a safety explanation. Supervised practical work begins at 09:30.</p>
</section>
<section id="preparation">
<h2>How to prepare</h2>
<p>Bring one accepted item, a notebook, and any useful information about the problem you observed.</p>
</section>
<section id="safety">
<h2>Safety guidance</h2>
<p>Follow the facilitator’s instructions. Do not open or test equipment that requires specialist knowledge.</p>
</section>
<footer class="page-footer" id="contact">
<h2>Contact the organiser</h2>
<address>
<p>Community Workshop Team</p>
<p>Email: workshop@example.com</p>
</address>
<p><small>The contact details in this lesson are sample data.</small></p>
<p><a href="#main-content">Return to the workshop overview</a></p>
</footer>
</article>
</main>
</body>
</html>
Completed style.css:
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.6;
color: #1f2933;
background-color: #f3f6f8;
}
.page {
max-width: 760px;
margin: 0 auto;
padding: 24px;
background-color: #ffffff;
}
.intro {
font-size: 20px;
}
.page-header,
section,
.page-footer {
margin-bottom: 40px;
}
.page-contents {
margin: 24px 0 40px;
padding: 16px 20px;
background-color: #edf5f8;
}
.page-footer {
padding-top: 24px;
border-top: 1px solid #9aa8b4;
}
a {
color: #005a78;
}
a:focus {
outline: 3px solid #f29f05;
outline-offset: 3px;
}
Browser support and fallback information
The a element, href, and fragment navigation are established parts of HTML and work in current browser engines. They do not need JavaScript for ordinary navigation.
If CSS fails, the browser still exposes the native links and their destinations. The exact default colour, underline, focus indication, scrolling movement, and target presentation can vary by browser and user settings. Do not depend on one exact animation or visual effect as proof that a link worked. Check the address, target, and resulting content.
If an id target is missing or misspelled, there is no useful fallback that can guess the intended section. Correct the source so that the fragment and identifier match.
Accessibility and responsive requirements
Every link must have an understandable purpose. Read the links without the surrounding paragraphs and ask whether you can still distinguish their likely destinations. The labels in the contents list pass this practical check.
Use the Tab key to move through the links and Enter to follow the focused link. Confirm that focus is visible. Do not remove the browser’s focus indication. Keyboard activation and pointer activation must reach the same destination.
At a narrow window width and at 200% zoom, long link text must wrap instead of being cut off. The layout must not require horizontal scrolling for these ordinary text links. Do not use colour as the only sign that text is a link. The browser’s normal underline remains because the supplied CSS does not remove it.
A real-browser keyboard, accessibility-tree, screen-reader, assistive-technology, zoom, mobile-device, and physical-device test was not performed for this lesson. Follow the manual checks in your own environment.
Common mistakes and debugging process
Common mistakes include omitting href, writing href=”schedule” without # for a same-page fragment, repeating an id, and using link text such as “click here.” Other mistakes include placing the fragment # inside the id, changing the spelling or letter case between the link and target, nesting links, and using ordinary elements with custom clicking behaviour instead of a.
Use this debugging process:
- Select the link and read the complete URL in the address bar.
- Confirm that the fragment appears after #.
- Search index.html for an id with the exact same value, without the #.
- Confirm that the id occurs only once and belongs to the intended section.
- Check that the a element contains an href and a closing </a> tag.
- Read the link text alone and confirm that it describes the destination.
- Save the file, reload the page, and test with both a pointer and the keyboard.
- Validate the complete HTML document and correct the first meaningful error before testing again.
Independent exercise
Create a page titled “Neighbourhood Book Exchange.” Include sections with the unique identifiers hours, joining, and book-rules. Add a nav area headed “On this page” with three links labelled “Opening hours,” “How to join,” and “Books we can accept.” Add a final link labelled “Return to the book exchange overview” that targets main-content.
Use the supplied stylesheet from this lesson. Do not use “click here,” do not add an empty link, and do not add target, rel, email, telephone, or download behaviour.
Tested exercise solution
Exercise index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Neighbourhood Book Exchange</title>
<meta name="description" content="Opening hours, joining information, and book rules for a neighbourhood book exchange.">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="page" id="main-content">
<header class="page-header">
<h1>Neighbourhood Book Exchange</h1>
<p class="intro">Share readable books and choose another book to take home.</p>
</header>
<nav class="page-contents">
<h2>On this page</h2>
<ul>
<li><a href="#hours">Opening hours</a></li>
<li><a href="#joining">How to join</a></li>
<li><a href="#book-rules">Books we can accept</a></li>
</ul>
</nav>
<section id="hours">
<h2>Opening hours</h2>
<p>The exchange is open from 10:00 to 16:00 on Saturday.</p>
</section>
<section id="joining">
<h2>How to join</h2>
<p>Bring one suitable book and speak to the volunteer at the welcome desk.</p>
</section>
<section id="book-rules">
<h2>Books we can accept</h2>
<p>Books must be clean, complete, and safe for another person to handle.</p>
</section>
<footer class="page-footer">
<p><a href="#main-content">Return to the book exchange overview</a></p>
</footer>
</main>
</body>
</html>
Use the complete lesson style.css without changes.
The complete starting document, lesson solution, and exercise solution were checked with the Nu HTML conformance checker on 11 August 2026. Both complete stylesheet uses were checked with CSS syntax validation. Link destinations were also checked against the identifiers in their own documents. Real-browser and assistive-technology checks were not performed.
Completion checklist
- Every working link uses an a element with an href attribute.
- Every same-page fragment begins with # and matches one unique id.
- Link text describes the destination instead of a mouse action.
- The nav element contains real navigation links.
- No link contains another interactive element or another link.
- Native underlines and a visible focus indication remain available.
- You tested each destination with a pointer and a keyboard.
- You checked narrow-width wrapping, 200% zoom, and HTML conformance.
- You completed and checked the independent exercise.