• in
InterCourses
CoursesBlogs
0
← Introduction to HTML
○What Is HTML? See Tags in Action○Exercise: Build the Meridian Signal○Complete HTML5 Page Structure: See It in Action○Exercise: Build a Complete HTML5 Page✦Module Quiz
○Heading Hierarchy Demo: H1 and H2○Exercise: Extend the Signal Brief○Paragraphs and Inline Tags Demo○Exercise: Write Meridian's Survey Notes○List Types Demo: Steps, Items, and Terms○Exercise: Build a Crew member Loadout○Challenge: Transmit a Rescue Signal✦Module Quiz
●Hyperlinks○Images○Applying Styles to HTML✦Module Quiz
○Div and Span○HTML Tables○Classes and IDs○Review: Structured Profile✦Module Quiz
○Project 1 - Visiting Card Structure○Project 1 - Visiting Card Actions✦Module Quiz
○The Head Element and Page Title○Meta Tags○HTML Entities✦Module Quiz
○Form Basics Demo: Join the Meridian Relay○Exercise: Build a Night-Shift Check-In○Input Types Demo: Build a Mission Profile○Exercise: Record Beacon Maintenance○Choice Controls Demo: Select Training Modes○Exercise: Plan a Supply Pickup○Response Controls Demo: Send a Mission Reply○Exercise: Build a Rescue Dispatch Report○Challenge: Send an Emergency Beacon✦Module Quiz
○Project 2 - Contact Us Form Structure○Project 2 - Contact Us Form Actions✦Module Quiz
○Embedding Video○Embedding Audio○Iframes✦Module Quiz
○Semantic HTML Tags○Details, Figure, and Figcaption✦Module Quiz
○Project 3 - Resume Semantic Structure○Project 3 - Resume Links and Actions✦Module Quiz

Hyperlinks

Mission

Build the navigation strip for a neighborhood repair café page. Visitors should be able to open a useful outside resource, then jump straight to the café's about section.

What you'll build

A repair-café navigation strip with an external link opening in a new tab and an in-page anchor link to the about section.

The <a> (anchor) tag connects pages and makes the web navigable.

Basic link syntax

html
<a href="https://www.example.com">Visit Example</a>
  • href (HyperText REFerence) is the destination URL. Without it, <a> is not a hyperlink.
  • The text between the tags is what the user clicks.

Link types

External links (absolute URL)

Use an external link for a page on another website:

html
<a href="https://www.google.com">Google</a>

Use the full URL, including https://, for external sites.

Internal links (relative path)

Use an internal link for a page on the same website:

html
<!-- Link to about.html in the same folder -->
<a href="about.html">About</a>

<!-- Link to a file in the parent folder -->
<a href="../index.html">Home</a>

A relative path depends on where the current file sits in the folder structure.

Opening links in a new tab

Add target="_blank" to open a link in a new tab. Pair it with rel="noopener noreferrer" for security:

html
<a href="https://www.google.com" target="_blank" rel="noopener noreferrer">Google (new tab)</a>

Anchor links (jump to a section)

Use an element's id as an href target to move to that part of the page:

html
<a href="#contact">Jump to Contact</a>
...
<h2 id="contact">Contact Us</h2>

An id gives an element a unique identifier on the page, so no two elements should use the same one. The # in href tells the browser to move to that element instead of loading a new page.

This is how "Back to top" links and table-of-contents navigation work.

Checkpoint

Preview the page and use both links. The external resource should open in a new tab; the #about link should move to the section with that exact id. If the jump does nothing, compare the href after # with the section's id.

Your Task

The starter has a heading and comments marking where the navigation and about section belong.

  1. Add an external link (<a href="https://www.wikipedia.org">) in a <nav>.
  2. Make that same external link open in a new tab with target="_blank" and rel="noopener noreferrer".
  3. Add an anchor link <a href="#about"> in the nav.
  4. Add a <section id="about"> below the nav.
  5. Inside that section, add an <h2> naming it.
  6. Add a <p> describing the repair café inside the section.

Payoff

Your repair-café page now gives visitors a safe route outward and a quick route to the information they need on the page.

Hint 1
1 / 4
HINT 1

The anchor tag syntax is: <a href="URL">link text</a>

HINT 2

Use target="_blank" to open a link in a new tab — add rel="noopener noreferrer" for security.

HINT 3

Relative links point to files on the same site: href="about.html" or href="../index.html"

HINT 4

An anchor with href="#section-id" jumps to the element with that id on the same page.

Loading editor…
READY
intercourses
html