The Anchor Tag
Every link on the web — every single one — is built with the <a> tag, short for "anchor." It turns text (or an image) into something clickable that takes the visitor somewhere else.
<a href="https://code.anantacreative.com">Visit the course site</a>
The href attribute ("hypertext reference") is required — it's where the link points to. Without it, an <a> tag looks like a link but does nothing when clicked.
- ✓The text between <a> and </a> is what the visitor sees and clicks.
- ✓<a> is an inline element — it flows naturally within a sentence, just like <span>.
- ✓Links can wrap more than text — images and other elements can be clickable too.
Absolute, Relative & Special Links
Not every link points to another website. HTML links can point to other pages on your own site, specific sections of the current page, an email address, or even a phone number.
An absolute link — the full web address of an external site.
A relative link — points to another file in the same folder as this one.
A relative link that goes up one folder first, using ../, before finding the file.
An anchor link — jumps to an element on the same page with a matching id attribute.
Opens the visitor's email app with a new message addressed to the given address.
On mobile devices, opens the phone app ready to dial the given number.
Controlling Where a Link Opens
By default, a clicked link replaces the current page. Add a target attribute to change that behavior — most commonly, opening the link in a new tab.
<a href="https://anantacreative.com" target="_blank" rel="noopener"> Visit Ananta Creative </a>
Whenever you use target="_blank", add rel="noopener" alongside it. Without it, the new tab can access and manipulate the original page in the background — a small but real security risk.
Breaking Down What You Just Learned
A quick reference for the attributes that power every link.
hrefThe required attribute that tells the browser where the link goes — a URL, a file path, an id, or a mailto/tel scheme.
Relative vs absoluteRelative paths ("day5.html") stay within your own site; absolute paths ("https://...") point anywhere on the web.
../Moves up one folder level before looking for the file — used often in multi-folder sites like this course.
#idJumps to whichever element on the page has a matching id attribute — no separate page load needed.
target="_blank"Opens the link in a new browser tab instead of replacing the current page.
Try It Yourself
In your day3.html file, add a link at the very bottom pointing back to day2.html, and a second link with target="_blank" pointing to any external site of your choice — don't forget rel="noopener".
Build a Mini Navigation Page
Every link type, in one page
Create a new file called day4.html inside your course folder and build a page that uses every link type you learned today.
- Start with the full DOCTYPE, html, head, and body structure.
- Add an <h1> titled "My Links Page," followed by three sections, each with an <h2> and an id attribute (e.g. id="about").
- At the top of the page, add three anchor links that jump down to each section using #id.
- In one section, add a relative link back to day1.html.
- In another section, add an absolute link to a website you like, opening in a new tab with rel="noopener".
- In the last section, add a mailto: link and a tel: link with any values you choose.
Recap
<a href="..."> is the only tag needed to create a clickable link anywhere on the web.
Relative paths stay inside your own site; absolute paths point to an external URL.
href="#id" jumps to a matching id on the same page without a full reload.
mailto: and tel: open the visitor's email app or phone dialer directly.
Key Takeaways
- Every link on the web is built with the <a> tag and its href attribute.
- Relative paths (day5.html, ../index.html) point within your own site; absolute paths point anywhere on the web.
- href="#id" creates same-page anchor links that jump to a matching element.
- mailto: and tel: turn links into email or phone actions.
- Always pair target="_blank" with rel="noopener" for security.