Link

Used for navigating

Demo

Real link, Fake link

API

Tag

Name Type Content
a Native element Any

Attributes

Name Value Description
href required
  • URL
  • #{target fragment id}
  • mailto:{email address}
  • tel:{phone number}
  • sms:{phone number}
Sets the type of link.

Be sure to use target fragments or the other URL schemes correctly to ensure optimal user experience. Every phone number, for example, should be wrapped in a link with the tel: scheme to make it really convenient for the user to call that number.

disabled Boolean attribute Disables the link.
Note: Not all anchor attributes are listed here. See MDN: Anchor element - Attributes for the full list.

For span elements only:

role required link Styles the element as a link. Use this instead of <a> when your use case is not a real link.

Guidelines

Security

When linking to websites you don't control, you should add the rel="noopener" attribute.

Open link in new tab

Quite often it is more convenient for users to open links in a new browser tab. This is especially true when a link goes to another website or when the link is on a page (or in a place on a page) that the user would have trouble getting back to. Simply add target="_blank".

Accessibility

Links should behave as links, i.e. they activate when clicked. Links that don't behave this way should not use the anchor tag and should instead use a span with role="link" attribute to avoid confusing screen-readers. Also, groups of links like menus, breadcrumbs, or primary navigation should be contained in a nav element.