HTML Elements
Links
The web is made up of linked documents. We use the HTML <a> (anchor)
tag to create a hyperlink to another address. This address can be
anything that is a valid URL which among other includes other web
pages, files, email addresses as well as links to location on the same
page.
The anchor tag can contain any valid HTML nodes, which means that we can create hyperlinks out of text, images or anything else. Though we probably should keep important links as text for increased accessibility.
Common attributes
We use the href attribute to specify the target address and
sometimes also set the title, target and rel attributes.
| Attribute | Description | Required |
|---|---|---|
| href | URL address of target location | no |
| title | tooltip (shown when hovered) | generally not needed |
| target | how to open the link (new tab, window, etc) | no |
| rel | relationship to the linked URL | no |
Code example
<ahref="https://en.wikipedia.org/wiki/LLVM"target="_blank"rel="noreferrer">Example hyperlink to the wikipedia page about LLVM</a>
produces something like the link below.
Accessibility
We should make sure that the content inside an anchor element says
something about the target URL address. click here does not say
anything about the target, while something descriptive like our about page
makes it easier to quickly find the right links.
Read more on MDN
<a>: The Anchor element
Test yourself
Description
Add a link with the target location
https://www.arts.gov/national-initiatives/nea-big-read/the-grapes-of-wrath
and the content
The Grapes of Wrath By John Steinbeck (1939)
under the <h3> heading element.
Tests
- 1 You should create an anchor element.
- 2 Your anchor element should have a closing tag.
- 3 Your anchor element should have the href specified in the description.
- 4 Your anchor element should have the content specified in the description.