The Anchor Element & href
The `<a>` element becomes a hyperlink the moment you add `href`. What you write for the link text matters as much as where the link goes.
What it is
<a> is the anchor element. By itself it does nothing: <a>Some text</a> renders as plain text with no link behavior. Adding href activates it as a hyperlink. The attribute value is the destination, and it can take many forms: an absolute URL, a relative path, a fragment identifier that jumps within the same page, a mailto: address, or a tel: number.
In HTML5 an <a> can wrap block-level content, so linking an entire card or section is valid markup. This was not allowed in HTML 4, where <a> could only appear inside inline content.
Why it matters
The link text is the first thing a screen reader user hears when navigating a page's links list. Many assistive tools let users pull up every link on a page as a standalone list. A page full of "click here" and "read more" links becomes completely useless in that view: each item is identical and tells the user nothing. Descriptive link text is not a nicety; it is what makes navigation possible.
The href value type also has consequences beyond just where the browser goes. Relative URLs keep the site portable when the domain changes. Fragment links let users skip to specific sections. Correct scheme usage (mailto:, tel:) lets browsers hand off to the right app rather than trying to navigate to a URL.
How it works
Add href with the destination and write the link text between the tags: <a href="https://developer.mozilla.org">MDN Web Docs</a>. The browser applies its default link styles: blue and underlined for unvisited, purple for visited. You override these with CSS.
For an absolute URL, include the full scheme and domain. For a relative URL, the path is resolved from the current page's location. A fragment identifier starts with # and jumps to the element whose id matches. The download attribute hints that the browser should save the file rather than navigate to it, and you can give the saved file a name: <a href="/report.pdf" download="annual-report.pdf">.
Write link text that makes sense read alone, out of context. "Read the MDN anchor docs" beats "click here". Avoid wrapping a bare URL as the link text when a real description fits, because URLs read poorly with screen readers and give no meaningful destination cue.
Try it
See the underline appear as a link enters view, and compare descriptive link text against the uninformative alternatives.
href activates the anchor; link text should name the destination.
Check yourself
Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.
Remember this
<a>withouthrefis inert plain text;hrefis what makes it a hyperlink.- href accepts absolute URLs, relative paths,
#fragmentidentifiers,mailto:addresses, andtel:numbers. - Write link text that describes the destination and makes sense read out of context.
- HTML5 allows
<a>to wrap block-level content; avoid nesting interactive elements inside a linked block.
Done with this concept?
Mark it complete to track your progress. No login needed.