Coding/Learn/html/links
HTML Beginner Course
01.Introduction to HTML
02.Anatomy of an HTML Element
03.The Sacred HTML5 Skeleton
04.Headings (h1 to h6)
05.Paragraphs, Line Breaks & Dividers
06.Text Formatting & Emphasis
07.Hyperlinks & Navigation (<a>)
08.Images & The Sacred Alt Text (<img>)
09.Ordered & Unordered Lists (<ul>, <ol>, <li>)
10.Block vs Inline Elements
11.Generic Containers (<div> & <span>)
12.Semantic HTML (<header>, <nav>, <main>, <footer>)
13.Tables (<table>, <tr>, <th>, <td>)
14.Native Audio & Video Elements
15.The Invisible Brain (<head> & Meta Tags)
16.Interactive Forms (<form>)
17.Input Types (<input>)
18.Accessible Labels & Submit Buttons
19.Textareas & Select Dropdowns (<textarea>, <select>)
20.Capstone: Building Your First Web Profile Page
Course Certificate0%

Complete all lessons to earn

LearnHyperlinks & Navigation (<a>)
7 / 20 0%
Lesson 07 of 20
5 mins read

Hyperlinks & Navigation (<a>)

PreviousNext Lesson
In Plain English

The "HT" in HTML stands for HyperText—text that links to other pages. The anchor tag <a> is the magic portal that turns ordinary words into clickable teleportation devices across the web.

The Mental Model

"Think of <a> as a door. The text between the tags is the label on the door ("Visit ZenCompiler"), and the href attribute is the exact GPS address where the door leads when opened."

Deep Dive: How It Works

The href attribute (Hypertext REFerence): Specifies the destination URL (e.g. href="https://zencompiler.com").

Opening in a new tab: Add target="_blank" and rel="noopener noreferrer" for security.

Internal anchor links: You can link to specific sections on the same page using IDs like href="#pricing".

Email & phone links: Use href="mailto:[email protected]" or href="tel:+123456789".

Syntax Blueprint

<a href="https://example.com" target="_blank">Click Here</a>

Anchor tag with href destination attribute and optional target attribute.

PointCore Rules to Remember

Point star
The href is Mandatory: Without href, an <a> tag is just plain unclickable text.
Point star
Descriptive Link Text: Never write "click here"—write descriptive text like "Read our Python guide".
Point star
Safe External Links: Always pair target="_blank" with rel="noopener noreferrer".

Common Beginner Traps & How to Fix Them

Mistake:Forgetting https:// in web links

Why it happens: Writing href="google.com" makes the browser look for a local file named google.com.

How to fix: Always include the full protocol: href="https://google.com".

Pro Tip: You can wrap an <a> tag around an <img> tag to make an image clickable!

Live Interactive Example

Hit Run Code to see it live
Clickable Links in Action
HTML5
1
2
Live Browser Preview
Click "Preview / Apply" to view the rendered output.
How it works: The first link opens ZenCompiler in a new tab, and the second opens the default email client.

Your Turn: Micro Challenge

No pressure! Edit the starter code below and test your solution with instant feedback.

Micro Exercise

Create a link to ZenCompiler

  • PointWrite an <a> tag linking to "https://zencompiler.com" with text "Online Compiler"
1
2
Browser Preview & Output
Click "Check HTML" to test your solution.

Finished reading and practicing?

Mark this lesson as completed to update your course progress.

PreviousNext Lesson
Overview100 SheetLearnCertificates