Links

Links are created using the a element (not the link element). The a element is inline by default. The only required attribute for the a tag is the href attribute. The value of the href is the destination where the link should direct the user, such as a web address or an email.

Absolute links are links to a full URL, which can be anywhere on the internet. They require the http:// (or https://) at the beginning. Clicking on one of these links queries the DNS system to find the server where the content lives.

Relative links point to local content in your project directory. You only need to specify the file name and, if present, the folder structure.

Anchor links scroll the current page to the location of specific content. The href attribute points to an id present somewhere on the page (indicated with a hashtag). No scrolling will happen if the browser window is too tall to allow it.

Email links, also known as mailto links open a new email draft, addressed to the specified recipient, in the default email app. The user must have a properly configured email app for the link to work. The syntax of the href attribute value is mailto: followed by the recipient email address with no spaces anywhere in the href.

Optional Attributes

The Title Attribute

The title attribute contains alternate text describing the link. This will be read by screen-readers, and as such should be employed when a link lacks descriptive text inside it. It also displays a tooltip popup on mouse hover, so, again, it is useful when the link contains no text, such as a linked image.

The Target Attribute

The target forces a link to open in a new tab. Really the only useful value for target is _blank (including the underscore), which specified that the link should open in a new tab.

Video Lesson

The following video demo is fully interactive. You can pause it at any time to directly edit the code, and resume playback to pickup where you left off.

Practice Exercise

Open exercise in a new tab