Link Examples

The examples below demonstrate three variations of the 설계 패턴 for link. 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

Number Description Link
1
 span element with text content. W3C website
2
 img element with alt attribute. W3C Website
3
 CSS :before content property on a span element.

키보드 지원

키 기능
enter Activates the link.

Role, Property, State, Tabindex 어트리뷰트

역할(role) 어트리뷰트 엘리먼트 사용법
link span
img
  • Examples 1 and 3: Identifies the span element as a link.
  • Example 2: Identifies the img element as a link.
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.

Javascript와 CSS 소스 코드

HTML 소스 코드

Link 1

Link 2

Link 3