a tag ( anchor )

설명
새 창을 열고, 페이지 내 위치로 이동시키고, 다운로드 등 Next.js에선 Link 컴포넌트를 쓰는 것 추천
Primary
Primary
content category
phrasing
interactive
flow
a(anchor) element 링크명은 명확하게가능하면 상대주소로 명시하자속성href (Hyperlink Reference)targetreldownloadtypehreflangping4. <a> 태그의 다른 활용정리
 

a(anchor) element

클릭하면 설정해둔 링크로 이동하는 하이퍼링크
href : hypertext reference(하이퍼 텍스트 참조)
  • href 속성에 원하는 URL 주소 혹은 파일의 상대주소를 적으면 된다.
<a href="https://www.naver.com">네이버</a>
<p>Visit my <a href="projects/index.html">project homepage</a>.</p>
notion image
notion image

링크명은 명확하게

검색 엔진이나 시각장애인을 위한 스크린리더를 위해서 링크명은 명확하게 하는 것이 좋다. 예를 들어 파이어폭스 설치파일을 다운받는 링크를 사용해 보자.
<!-- good case -->
<p><a href="https://firefox.com/">
  Download Firefox <!-- 링크명만 보고 행위 추측이 가능하다. -->
</a></p>

<!-- bad case -->
<p><a href="https://firefox.com/">
  Click here <!-- 명확하지 않은 링크명은 좋지 않다. -->
</a>
to download Firefox</p>

가능하면 상대주소로 명시하자

  • 코드를 읽기가 더 쉽다
  • 절대주소를 사용하면 브라우저가 DNS로 도메인을 쿼리하는 것부터 시작하지만, 상대주소를 사용하면 해당 파일을 같은 서버에서 찾을 뿐이므로 더 빠르게 동작한다.

속성

href (Hyperlink Reference)

링크의 목적지 URL을 지정합니다.
  • 절대경로: https://example.com
  • 상대경로: /about, ./page.html
  • 특수 값:
    • #: 현재 페이지의 맨 위로 이동.
    • #id: 특정 ID로 이동 (페이지 내 링크).
    • mailto:email@example.com: 이메일 클라이언트를 열어줌.
    • tel:+123456789: 전화를 걸 수 있도록 설정.

target

링크를 클릭했을 때 열리는 방식을 지정합니다.
  • _self (기본값): 현재 창/탭에서 열림.
  • _blank: 새 창/탭에서 열림.
  • _parent: 부모 프레임에서 열림.
    • 사용 상황: iframe 안에 있는 <a> 태그를 클릭했을 때, iframe을 감싸고 있는 부모 창에서 새 페이지를 열도록 설정
  • _top: 최상위 브라우저 창에서 열림.
    • 사용 상황: iframe이 중첩되어 있거나 여러 프레임이 있을 때, 최상위 창에서 새 페이지를 열도록 설정
팁:
보안상의 이유로, 외부 링크를 새 탭에서 열려면 rel="noopener noreferrer"를 함께 사용하는 것이 권장됩니다.

rel

링크와 목적지 간의 관계를 나타냅니다.
  • noopener noreferrer: 보안을 위해 새 탭에서 열릴 때 추천.
  • nofollow: 검색 엔진이 이 링크를 따라가지 않도록 설정.
  • author: 작성자 페이지 링크일 때.
  • license: 라이선스 정보 링크일 때.

download

파일을 다운로드하도록 지정. 파일 이름도 설정 가능.
<a href="example.pdf" download="MyFile">Download PDF</a>

type

링크의 MIME 타입을 지정. 주로 <a>로 리소스 제공 시 사용.
<a href="example.json" type="application/json">Download JSON</a>

hreflang

링크된 문서의 언어를 나타냄.
<a href="example-fr.html" hreflang="fr">Version Française</a>

ping

클릭 시 추가로 전송할 URL을 지정. (주로 추적용)
<a href="example.html" ping="https://tracker.com">Go</a>

4. <a> 태그의 다른 활용

  • ID와 함께 내부 링크:
      • 페이지 내 특정 요소로 이동.
      <a href="#section1">Go to Section 1</a>
<div id="section1">...</div>
  • 스크립트 트리거:
      • JavaScript와 함께 작업 시 빈 링크를 사용할 때.
      <a href="#" onclick="myFunction()">Click me</a>

정리

  • href: 어디로 이동할지 정의.
  • target: 열리는 방식 지정.
  • rel: 관계와 보안을 정의.
  • download: 다운로드 기능 제공.
  • hreflang: 언어 정보를 제공.