Links, images, lists and tables
Links
Links with the a tag: absolute and relative addresses, opening a new tab, jumping to part of a page, email and phone — and link text both people and Google understand.
- Link to another page, to part of the same page, to email and to a phone
- Tell an absolute address from a relative one
- Write meaningful link text
The web is links. The <a> element (for anchor) makes text clickable, and its href attribute says where it goes.
<a href="https://mashaalstudio.com">Mashaal Studio</a>
<a href="/articles">The journal</a>
<a href="#faq">Common questions</a>
<a href="mailto:hello@example.com">Email us</a>
<a href="tel:+442000000000">Call us</a>- An absolute address starts with https:// and can go to any site.
- A relative address such as /articles stays on the same site; if the domain changes, the links do not break.
- #faq jumps to the element with id="faq" on the same page.
- mailto: opens the email app and tel: the phone’s dialler.
A new tab
<a href="https://developer.mozilla.org" target="_blank" rel="noopener">MDN</a>target="_blank" opens the link in a new tab; rel="noopener" stops the new page reaching back into yours. Use it for outside sites and only when it truly helps; most people prefer to decide for themselves.
Build a small menu: a link to https://mashaalstudio.com, a link to the #contact section of this page and a phone link. Add a section with id="contact" below the menu.
- A link with a full https address
- A link to #contact
- A phone link
- An element with id="contact"
Lesson quiz
3 questions — marked by Mashaal’s server, every answer explained.
1Which attribute holds a link’s destination?
2Which link text is better?
3A link to the element with id="faq" on the same page: