a
The anchor element that creates a link when it has href.
Platform under construction
HTML Links
Learn HTML Links with practical HTML examples for navigation, images, alt text, media behavior, metadata, accessibility, SEO and live practice.
HTML links and media
Links connect pages, sections, files, actions and trust.
The a element is one of the most important elements on the web. A link can move a visitor to another page, jump to a section, open an email client, start a phone call or point to a downloadable file.
Good links are not only technical. They shape navigation, SEO, accessibility and conversion. A clear link tells the user what will happen before they click.
The most important rule is simple: if it navigates somewhere, use a link. If it performs an action on the current page, use a button.
href
The destination: page, section, email, phone, file or protocol URL.
Link text
The visible text should describe the destination clearly.
Internal links
Links between pages and sections help users and search engines understand structure.
Link anatomy
A link is not just clickable text. It is a navigation promise.
A good link tells the browser where to go and tells the user what will happen. The visible text, destination and optional safety attributes should all agree with each other.
<a href="/html/forms.php">Learn accessible forms</a>
a
The anchor element creates navigation to another URL or page fragment.
href
The href value is the place the browser will open when the link is activated.
Learn accessible forms
The text should describe the destination without needing extra context.
rel
External new-tab links should use noopener noreferrer to protect the current page.
Use a link
When the user moves to another page, file, email address, phone number or section.
Use a button
When the user opens a menu, submits a form, toggles a panel or triggers JavaScript behavior.
Check before publishing
Does the text describe the destination, does the URL work and does a new tab need safe rel values?
Syntax and structure
A useful link needs a clear destination and clear text.
The href value controls where the link goes. The text between the tags explains why someone should click.
Clear link markup
<nav aria-label="Course navigation"> <a href="/html/basic.php">Start HTML Basic</a> <a href="/html/images.php">Learn HTML images</a> <a href="#practice">Jump to practice</a> </nav> <p> Questions? <a href="mailto:hello@example.com">Email the course team</a>. </p>
Unclear or fake links
<a>Click here</a> <a href="#">Read more</a> <div onclick="location.href = '/pricing'">Pricing</div> <a href="/html/images.php">here</a>
Rules that matter
Links and media should be useful, stable and understandable.
Clickable and visual HTML affects how people move, scan, trust and share a page. The details are small, but the user experience impact is large.
Use href
An a element without href is not a real navigation link.
Write descriptive text
Avoid vague text such as click here, more or read this when the context is not clear.
Use buttons for actions
Opening a modal, submitting a form or toggling UI should normally use button.
Keep internal links useful
Internal links help visitors move through related content and help search engines discover pages.
Use mailto and tel deliberately
They can be useful, but they trigger apps outside the browser.
Avoid empty anchors
A href="#" link often signals unfinished behavior or a fake button.
Production thinking
Navigation, images and metadata are part of product quality.
Why does this matter?
Links matter because the web is not a stack of isolated pages. A good link structure turns content into a path that people and search engines can follow.
Accessibility
Screen reader users can navigate from link to link. Descriptive link text is much more useful than a page full of identical read more links.
Production note
Run link checks on real sites. Broken links damage trust, conversion and crawl quality.
SEO note
Internal links help search engines understand which pages belong together and which pages are important. Natural anchor text is stronger than repeated keyword stuffing.
Live code lab
Change the code and run the example.
Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.
Mini assignment
Try this now.
- Change one vague link into a descriptive link.
- Add a link that jumps to the practice paragraph.
- Run the preview and check whether every link explains its destination.
Practice assignment
Do this before moving to the next lesson.
- Create one internal page link, one section link and one email link.
- Make every link text understandable without reading the full paragraph.
- Explain which links help navigation and which links are contact actions.
Try it yourself
Build a small lesson navigation block
Self-check
Before you continue, prove that you own this lesson.
Do not only read this page. Answer these questions out loud or write the answers in your own notes. If one answer feels vague, revisit the examples before moving on.
- Can you explain the difference between a link and a button?
- Can you write link text that still makes sense outside the surrounding paragraph?
- Can you decide when target="_blank" needs rel="noopener noreferrer"?
- Can you identify a broken or misleading href before publishing?
- Can you make an internal anchor link that lands on the right section?