Link
Used for navigating
Demo
API
Tag
Name | Type | Content | |||||||
---|---|---|---|---|---|---|---|---|---|
a |
Native element | Any |
Attributes
Name | Value | Description | |||||||
---|---|---|---|---|---|---|---|---|---|
href required |
|
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 |
|||||||
disabled |
Boolean attribute | Disables the link. |
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.