Hyperlinks & Links
Today we look at hyperlinks, the a tag and href that turn a few words into a doorway to another page on the web.
- 1
What a link is
Last lesson we used plain boxes with
divandspan. Today we add the piece that makes the web a web: a hyperlink. A link is a few words people can click to open another address.In HTML that piece is the
<a>element. The destination lives in thehrefattribute on the opening tag. You already sawhrefonce in Attributes. Today we make the link itself the lesson. - 2
The Isolated Document Problem: Transforming Dead Ends into a Web
A page that cannot point to another page is a dead end. People needed a doorway in the text: click here, go there. Without a clear destination, the doorway is useless.
So HTML uses
<a>for the doorway andhreffor the address written on it. In the example below, the address is a full URL that starts withhttps://. That kind of address is called an absolute URL. - 3
How Browsers Resolve Absolute, Relative, and Anchor URLs
The browser reads the opening
<a>tag, stores thehref, and treats the words until</a>as the clickable label. Those words are inline, so the link sits inside the paragraph instead of starting a new line.Write a label people understand, such as “CodeX Cider”, not “click here”. The label is what visitors read. The
hrefis where they go. - 4
Hands-On: Navigating with Descriptive Anchor Tags
Read the short paragraph below, then look at the browser pane. Click the blue link if you want to see the destination open.
- 5
The Golden Rule of Hyperlinks: No href, No Doorway
An
<a>withouthrefmay look like a link, but it does not go anywhere. Put the address in the opening tag, then the label, then the closing tag.
Contains protocol and domain. Links to external sites or exact full paths regardless of where the current page lives.
Points to pages or on-page fragment anchors within the same website. Easier to maintain across environments (localhost vs production).
What you'll learn
- 1A hyperlink is a doorway in the text
- 2The a tag builds that doorway
- 3href holds the destination URL
- 4Absolute URLs start with https://
- 5Write clear link text, not click here
Line by line
<p> ... </p>The paragraph holds the sentence. The link sits inside it as an inline element.
<a href="https://codexcider.com">The opening tag of the link.
hrefis the absolute URL — a full address includinghttps://.CodeX CiderThe link text people see and click. Keep it short and clear.
</a>The closing tag. Everything between the opening tag and this tag is part of the clickable label.
Try it yourself
Write one paragraph that includes a link to https://www.google.com with the label Google. Put href in the opening <a> tag.
Hint: Opening tag with href, then the label, then </a>.
Common mistakes
- 1.Writing
<a>withouthref. It may look like a link, but it goes nowhere. - 2.Using vague labels such as “click here”. Prefer words that name the destination.
Interview prep (Click to reveal)
Q: What is the purpose of the target="_blank" attribute on links?↓
It opens the hyperlinked page in a fresh new tab or browser window. Whenever using target="_blank", you should always include rel="noopener noreferrer" for tab-nabbing security and performance isolation.
Q: Why are generic link labels like "click here" considered bad practice?↓
Screen reader users often navigate pages by generating a standalone list of all links out of context. If every link says "click here", they cannot know the destination. Descriptive anchor text (e.g. "View Full Curriculum") improves accessibility and SEO ranking.
Q: How do you create an internal anchor link that scrolls to a specific section on the same page?↓
Give the target section an id (e.g. <section id="faq">) and link to it with a hash symbol prefix in the href: <a href="#faq">Jump to FAQ</a>.