Link Examples
- -About This Example
-
- The examples below demonstrate three variations of the Link Pattern.
- The link pattern is used when it is necessary for elements other than the HTML a element to have link behaviors.
-
- Note: Use the HTML a element to create links whenever possible.
- Browsers provide valuable functionality for native HTML links, e.g., open the target in a new window and copy the target URL to the system clipboard.
-
Examples
-Keyboard Support
-| Key | -Function | -
|---|---|
| enter | -Activates the link. | -
Role, Property, State, and Tabindex Attributes
-| Role | -Attribute | -Element | -Usage | -
|---|---|---|---|
link |
- - | spanimg |
-
-
|
-
| - | tabindex="0" |
- span, img |
- Includes the link element in the page tab sequence. | -
| - | alt |
- img |
- Example 2: Defines the accessible name of the link. | -
| - | aria-label |
- span |
- Example 3: Defines the accessible name of the link. | -
Assistive Technology Support
-Learn how to interpret and use assistive technology support data
-Example 1: Link on a span Element with Text Content
-
- Example 2: Link on an img Element with alt Attribute
-
- Example 3: Link on a span Element with CSS :before Content Property
-
- JavaScript and CSS Source Code
- -HTML Source Code
-Link 1
-To copy the following HTML code, please open it in CodePen.
- -
-
- Link 2
-To copy the following HTML code, please open it in CodePen.
- -
-
- Link 3
-To copy the following HTML code, please open it in CodePen.
- -
-
-
-