• in
InterCourses
CoursesBlogs
0
← Introduction to HTML
○What is HTML?○Elements, Tags, and Attributes○Your First Complete Page
○Headings and Comments○Paragraphs, Emphasis, and Line Breaks○HTML Lists
●Hyperlinks○Images○Applying Styles to HTML
○Div and Span○HTML Tables○Classes and IDs
○Project 1 - Visiting Card Structure○Project 1 - Visiting Card Actions
○The Head Element and Page Title○Meta Tags○HTML Entities
○HTML Forms○Input Types○Checkboxes and Radio Buttons○Textarea and Select
○Embedding Video○Embedding Audio○Iframes
○Semantic HTML Tags○Details, Figure, and Figcaption
○Project 3 - Resume Semantic Structure○Project 3 - Resume Links and Actions

Hyperlinks

The <a> (anchor) tag is what makes the web a web — it connects pages together. Without links, every page would be an island.

Basic link syntax

html
<a href="https://www.example.com">Visit Example</a>
  • href (HyperText REFerence) — 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)

Point to a page on a different website:

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

Always use full URLs (including https://) for external sites.

Internal links (relative path)

Point to a page within 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>

Relative paths change depending on where the current file sits in the folder structure.

Opening links in a new tab

Add target="_blank". Always 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 the href target to scroll to that part of the page:

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

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

Your Task

In the starter index.html you have two empty sections. Your tasks:

  1. Add an external link (<a href="https://www.wikipedia.org">) in a <nav>.
  2. Make that external link open in a new tab using target="_blank".
  3. Add an anchor link <a href="#about"> in the nav.
  4. Add a <section id="about"> below the nav with an <h2> and a <p>.
Hint 1
1 / 4
HINT 1

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

Loading editor…
READY
intercourses
html