[HTML] 하이퍼링크

👀 하이퍼링크

웹이 제공하는 가장 흥미로운 혁신 중 하나인 하이퍼링크에 대해 알아본다. 기본적인 내용 말고 모질라 문서를 보면서 추가로 알게 된 내용 위주로 정리한다.

✔ 문서 조각 Document Fragments

문서 내부의 특정 부분으로 링크할때 사용가능!
문서의 주소 + #id값의 형태를 띈다.

<h2 id="Mailing_address">Contact</h2>
...
//문서 내부의 Mailing_address로 이동
<p>Want to write us a letter? Use our <a href="#Mailing_address">mailing address</a>.</p>
//다른 문서 속의 Mailing_address로 이동
<p>Want to write us a letter? Use our <a href="contact.html#Mailing_address">mailing address</a>.</p>

✔ 링크 마크업시 주의사항

1. 링크 명을 명확하게 할 것
   링크 텍스트에 키워드를 포함시켜 링크되는 내용을 효과적으로 설명

//Good
<p><a href="https://리그오브레전드.com/">
  Download 리그오브레전드
</a></p>
//Good
<p><a href="https://리그오브레전드.com/downloads.exe">
  Click here
</a>
to download 리그오브레전드</p>

//Bad
<p><a href="https://리그오브레전드.com/">
  Click here
</a>
to download 리그오브레전드</p>

1. 링크 텍스트의 일부로 URL을 작성하지 않을 것
   URL은 보기 흉하며 화면 판독기가 읽을 때 이상하게 들림
2. 링크 텍스트에 "link" 또는 "links to" 같은 불필요한 텍스트를 사용하지 않을 것
   링크는 일반적으로 다르게 스타일링되므로 굳이 설명해주지 않아도 사용자들은 링크임을 인지할 수 있음
3. 링크 라벨은 가능한 짦게 유지 할 것
4. 동일한 텍스트가 서로 다른 위치에 연결되는 링크들을 최소화 할 것
   Click here, Click here, Click here이 여러군데에 표시된다면 혼란스러울 수 있다.
5. 가능하면 상대 링크를 사용할 것
   다른 웹사이트에 연결할때가 아니라면 상대 링크를 사용하자.
   1. 상대링크가 일반적으로 짧기 때문에 코드 작성자에게 가독성이 좋다.
   2. 상대링크가 훨씬 효율적이다.
      절대 URL을 사용하면, 브라우저는 DNS로 도메인 이름을 쿼리하고 서버의 위치를 찾고 요청되는 파일을 찾는 과정을 거치는데 반면 상대 URL을 사용하면 같은 서버에서 요청되는 파일을 찾기만 하면 되므로 성능의 향상을 불러온다.

✔ 비 HTML

1. 비 HTML 리소스 연결시 명확한 표식을 남길 것
   다운로드 또는 스트리밍되는 링크들을 연결할때에는 표시를 남겨놓을 것.

<p><a href="http://www.example.com/money-report.pdf">
  Download the money report (PDF, 5MB)
</a></p>

<p><a href="http://www.example.com/리그오브레전드_시네마틱영상/">
  Watch the video (stream opens in separate tab, HD quality)
</a></p>

1. 다운로드 연결 시 download attribute를 사용할 것
   다운로드 속성을 사용하여 기본 저장 파일 이름을 제공한다.

<a href="https://lol.secure.dyn.riotcdn.net/channels/public/x/installer/current/live.kr.exe"
   download="lol.exe">
  Download League of Legends
</a>

1. 이메일 연결 시 mailto를 사용할 것

<a href="mailto:a-eve@naver.com">Send email to a-eve</a>

👍 참고 사이트

1. [MDN] 하이퍼링크 만들기