<a>
The <a> or anchor element is the most powerful and flexible element in HTML. This tutorial will show you how to use it for all sorts of things.
The <a> element is primarily used for hyperlinking so we’ll start with an example of that:
View the <a href="#footer">Footer<a>.
This may draw something like:
View the Footer.
Try clicking the link!
What happened? The href attribute of the <a> element is a URL, in this case a document relative URL to another place in this document, with the id of footer.
You may put any valid URL in the href attribute.
You can also use an <a> with an id attribute as the destination of a hyperlink!
You have reached the <a id="destination">destination</a>
This may draw something like:
You have reached the destination.
You can combine these two techniques and make a hyperlink that is also a destination!
<a href="#away" id="back">jump away</a>
This may draw something like:
Try clicking the link above!
If you did, you should have seen the page scroll down, and another link to click to jump back.
Continue to the next tutorial: A Block.
Now click this link to jump back
Thanks to the power of CSS, you can style an <a> element to contain a whole block of text, with some spacing like a paragraph:
… the end of some text.
<a style="display:block; margin:1em 0">Here is a block</a>
Some more text.
This may draw something like:
… the end of some text. Here is a block Some more text.
While the <a> element can be used this way,
please use a semantic <p> element instead in practice.
Using the
ARIA role attribute
you can redefine an <a> element to perform many more roles as it were.
Using CSS attribute selectors which detect such <a> elements with specific role attributes, you can style them to also appear consistent with their roles.
See the
MDN Documentation on WAI-ARIA Roles for the list of role attribute values you can use to turn <a> elements into so many more things which are left as an exercise for the hacker.
I hope you enjoyed this tutorial!