Link syntax
Links take the person to another page, it goes somewhere. A link that goes to an external site should be identified as external link. Other websites have different code structures that cause keyboard and screen reader navigators effort to learn. If the href
attribute is empty, consider making the anchor a <button>
. A button performs an action as part of a web form.
All links require an href
. If the link does not make sense with an href
, use the <button>
element instead.
a
elements may not be empty, they must contain content.
Keep the default underline to clearly indicate the interactive area and avoid using color only to indicate interactiveness. Ensure it’s visibly distinguishable from the surrounding content.
target
attribute
The default behavior for a link is to replace the current page that is open in a browser tab. Using the target
attribute on a link can change the default behavior.
The default target
value is target="_self"
. The other common value is target="_blank"
, which opens the link in a new tab or window. By changing the default behavior, it removes a person's ability to select the way they wish to engage with that link's destination. For instance, a link with normal behavior allows a person to right-click and open in a new tab or window. target="_blank"
prevents a person from choosing how they prefer to open the link and forces a new tab.
In the case of web applications, such as an email client, a link opening to a new tab is expected. However, for websites, people expect default behavior and the ability to choose. Changing the expected behavior prevents interaction options.
Unexpected behavior may cause confusion and frustration. For instance, _blank
on a mobile device may make content hard to return to because browsers on small screens hide tabs. This increases cognitive load for people to re-find content and removes them from their primary task.
Because of these reasons, using the _blank
value is not recommended.
Downloading files
If a link is to a file that the browser will need to download, include the download
attribute. The value of this attribute is the name the file will be called on that person’s local device, regardless of the file name on the server.
Identify the file format in parentheses after primary link text.
Download example
<a href="/docs/marketing-flyer-v131.pdf" download="university-libraries-welcome">Welcome brochure (PDF)</a>