Northeast Mississippi Community CollegeCourse Notes

Web Development · Lesson 4

Hyperlinks

Build clear, accessible links with reliable paths, fragments, schemes, meaningful wording, and an ongoing maintenance plan.

  • html-links
  • urls
  • accessibility
  • maintenance

Lesson purpose

Hyperlinks turn individual HTML documents into a usable Web. This lesson teaches students to construct anchors, choose the correct destination reference, link text and images, create in-page navigation, and maintain the link graph after publication. A link is successful only when its syntax, destination, wording, accessibility, and continuing relevance all work.

Learning objectives

  • Create hyperlinks for text, images, local files, remote sites, and locations within a document.
  • Distinguish URI, URL, and URN terminology and select relative, absolute, protocol-specific, and fragment references.
  • Write descriptive link text and functional alternative text.
  • Build and test glossary-style internal navigation.
  • Find, repair, and retire broken or obsolete links and explain why indexing and cataloging matter.

1. The anchor element

<a href="schedule.html">View the class schedule</a>
  • a element: a container that turns text, an image, or both into a hyperlink.
  • href: the hypertext reference containing the destination.
  • Link content: visible words or an image that users activate.
  • Link wording: communicates where the user will go or what action will occur; avoid vague “click here” labels.
  • Closing </a>: ends the linked content. A missing boundary can absorb following content.

Browsers often display text links blue and underlined by default, but CSS controls the final appearance. Never remove the visual distinction without supplying another clear focus and link-state treatment.

2. URI, URL, and URN

  • URI (Uniform Resource Identifier): the broad category of resource identifiers.
  • URL (Uniform Resource Locator): a URI that identifies a resource by location and access scheme; this is the Web-address term used throughout this course.
  • URN (Uniform Resource Name): a URI that names a resource within a namespace without specifying how to retrieve it, such as an ISBN.

In everyday HTML work, href most often contains a URL or fragment reference. The terms are related, but choosing a precise term helps students explain what a reference actually provides.

3. Schemes and destination context

<a href="https://www.nemcc.edu/">NEMCC home page</a>
<a href="mailto:advising@example.edu">Email advising</a>
<a href="tel:+16625551212">Call advising</a>
  • https: navigates to a Web resource over a secure HTTP connection.
  • mailto: asks a capable device to open an email composition action.
  • tel: asks a capable device to start a telephone action.
  • Context: scheme choice depends on audience, device, privacy expectations, and task. Explain that these links may open another application and should be tested on supported devices.

4. Relative paths for project files

Relative references are resolved from the current document and preserve a project’s directory structure:

<a href="about/team.html">Meet the team</a>
<a href="../index.html">Return home</a>
  • about/team.html enters a child folder named about.
  • ../ moves up one parent folder.
  • A simple filename such as contactus.html points to a file in the same folder.
  • Preserve filename spelling, capitalization, and folder structure after upload; a path that works on a case-insensitive local computer may fail on a case-sensitive server.
  • Avoid drive letters and machine-specific absolute filesystem paths in a deployed site.

The link’s base location matters. Always calculate the path from the file containing the link, not from the site root in your head.

<a href="https://www.w3.org/">World Wide Web Consortium</a>

An absolute URL includes the scheme and host and identifies an external resource. The destination owner can change it outside your control, so use trustworthy current HTTPS addresses and descriptive wording. External links can also raise copyright, licensing, privacy, and trust questions. Link to publicly available resources and obtain permission or legal guidance when a deep link or relationship could imply endorsement.

6. Syntax and debugging

<!-- Correct -->
<a href="catalog.html">Catalog</a>

<!-- Missing quote, closing bracket, and closing anchor -->
<a href="catalog.html>Catalog</a>
<a href="catalog.html">Catalog

When a link fails, check three boundaries in order:

  1. Is the href value quoted?
  2. Does the opening tag end with >?
  3. Does the linked content end with </a>?

A browser may recover from malformed markup, but recovery can vary and may hide the actual source error. Validate the file and inspect the first meaningful error.

<a href="index.html">
  <img src="images/logo.png" alt="Course home">
</a>
  • The nested img becomes the anchor’s link content.
  • The image’s alt describes the destination or action (Course home), not merely its appearance (blue logo).
  • The link needs a visible focus indicator and a target large enough to operate.
  • If an image is decorative and not a control, keep it outside the anchor or use an empty alternative where appropriate.
  • A stylesheet can remove a distracting legacy image border, but do not remove focus visibility.

Fragments move the user to an element with a matching unique id:

<nav aria-label="Glossary index">
  <a href="#html">HTML</a>
  <a href="#url">URL</a>
</nav>

<h2 id="html">HTML</h2>
<p>Hypertext Markup Language structures a document.</p>
<h2 id="url">URL</h2>
<p>A Uniform Resource Locator identifies a location and access scheme.</p>

Four-step method

  1. Name the target: give the destination a unique, meaningful id.
  2. Build the href: use #id for the current document, or combine a path and fragment such as syllabus.html#grading.
  3. Write clear text: name the section or task users will reach.
  4. Verify: test target existence, keyboard focus, location, and browser history.

The fragment must match the id exactly. A glossary or table of contents is an indexing and cataloging feature: it lets users scan available terms and jump directly to the explanation. Keep the navigation region labeled so assistive technology understands its purpose.

Link rot occurs when a referenced page moves, is deleted, changes its anchors, or becomes irrelevant. Automated link checkers can report response failures, but a 200 response proves only that a server answered; it does not prove that the content is current, appropriate, secure, or useful.

Maintenance loop

  1. Inventory: record important links, purpose, owner, and review priority.
  2. Check: automate status checks and manually inspect relevance, wording, and keyboard operation.
  3. Repair: update paths, redirects, fragments, link text, or navigation.
  4. Retire: remove obsolete links while preserving needed user paths and records.

Review local, external, image, and fragment links after uploads, content changes, redesigns, and browser updates. Common tools include the W3C Link Checker and LinkChecker, but tools support judgment rather than replace it.

10. Classroom application

Build a three-item glossary

  1. Create a short contents list with three fragment links.
  2. Add unique id values to the destination headings.
  3. Test each link by mouse, keyboard, and browser history.
  4. Inspect the source and correct mismatches, duplicates, or unclear wording.

Audit the semester resume site

  • Link the resume sections from a clear navigation list.
  • Use relative paths for local pages and a complete HTTPS URL for an external portfolio or professional profile.
  • Make a linked logo’s alternative text describe its destination.
  • Record the owner and review date for every important external link.
  • Test the site after moving folders or publishing it to a server.

11. Knowledge check

  • A same-project link breaks only after upload: inspect folder structure, filename case, and the path relative to the current document.
  • A table-of-contents link does nothing: the fragment must exactly match a unique target id.
  • A linked logo is announced only as “blue logo”: use functional alternative text that communicates the destination.
  • An external link returns 200 but contains obsolete instructions: perform a human relevance review and repair or retire the link.

Common misconceptions

  • A URL is not always relative; a complete scheme-and-host reference is absolute.
  • #section does not search for visible text; it targets an exact id.
  • A link that returns 200 is not automatically current or trustworthy.
  • Link text should identify the destination, not describe its color or location on the page.
  • A linked image needs functional alternative text, not a duplicate visual caption.
  • Relative paths are calculated from the current file, not from the project folder name.
  • Automatic checkers cannot judge relevance, wording, copyright context, or user experience.

Lesson summary

Reliable hyperlinks combine correct anchor syntax, a destination reference appropriate to the project, descriptive content, accessible operation, and ongoing maintenance. Relative paths preserve local structure; absolute URLs reach external resources; schemes communicate different actions; fragments support indexed in-page navigation. Inventory, test, repair, and retire links so the Web site remains a trustworthy set of maintained relationships.