링크

HTML의 H는 하이퍼텍스트, 다른 글로 이어지는 글이라는 뜻입니다. 웹의 모든 링크는 a 요소 하나로 만듭니다.

앵커 요소

링크는 앵커(anchor)의 줄임말인 <a> 요소로 만듭니다. href 속성에는 갈 주소를, 내용에는 사람들이 누를 글자를 씁니다. <a href="https://developer.mozilla.org/">MDN Web Docs</a>에서는 MDN Web Docs라는 글자에 밑줄이 그어지고, 누르면 그 주소가 열립니다. 링크는 마우스, 손가락, 키보드 모두로 쓸 수 있습니다. Tab 키로 링크에서 링크로 옮겨 가고 Enter 키로 따라갑니다. href가 없는 <a>는 자리만 차지할 뿐이고 Tab으로 갈 수도 없습니다.

절대 주소와 상대 주소

절대 URL에는 모든 정보가 들어 있습니다. https: 같은 스킴, 도메인, 경로입니다. https://example.com/menu/bread.html가 그 예로, 다른 사이트로 가는 링크에 씁니다. 상대 URL은 지금 페이지와 같은 부분을 생략합니다. https://example.com/menu/index.html 페이지에서 bread.html은 같은 폴더의 파일, ../about.html은 한 단계 위 폴더의 파일, /contact.html은 사이트 맨 위에서 시작하는 주소입니다. 상대 링크는 사이트 전체가 새 도메인으로 옮겨 가도 그대로 작동합니다.

<a href="https://www.w3.org/">W3C</a>          <!-- another site -->
<a href="bread.html">Bread</a>                <!-- same folder -->
<a href="../about.html">About us</a>          <!-- one folder up -->
<a href="#hours">Opening hours</a>           <!-- same page -->
<a href="mailto:hello@example.com">Email us</a>

<h2 id="hours">Opening hours</h2>

같은 페이지 안의 링크

어떤 요소든 id를 붙이면, href에 샵(#)과 그 id를 쓴 링크가 그 요소로 바로 이동합니다. <a href="#hours">는 <h2 id="hours">로 화면을 옮깁니다. id는 한 페이지 안에서 겹치면 안 되고, 빈칸을 넣을 수 없습니다. 긴 글은 이 방법으로 목차를 만들고, 많은 사이트가 맨 위에 「본문 바로가기」 링크를 두어 키보드 사용자가 페이지마다 메뉴 전체를 Tab으로 지나지 않아도 되게 합니다.

메일, 전화, 내려받기

다른 스킴은 다른 프로그램을 엽니다. mailto:hello@example.com은 방문자의 메일 프로그램에서 새 메일 창을 열고, tel:+82212345678은 휴대전화에서 그 번호로 전화를 걸지 묻습니다. 링크에 download 속성을 더하면 브라우저가 파일을 열지 않고 저장하도록 요청합니다. 편리한 링크지만, 갑자기 메일 프로그램이 뜨면 당황스러우므로 링크 글자에 무슨 일이 일어나는지 적어 둡니다.

새 탭과 좋은 링크 글자

target="_blank"는 링크를 새 탭에서 엽니다. 꼭 필요할 때만 쓰세요. 방문자가 스스로 고를 기회를 빼앗고, 뒤로 가기 버튼으로 돌아올 수도 없게 됩니다. 쓸 때는 「(새 탭에서 열림)」처럼 링크 글자에 밝혀 둡니다. 무엇보다 중요한 것은 링크 글자 자체입니다. 화면 낭독기 사용자는 페이지의 링크만 모아 듣는 일이 많은데, 열 개가 모두 「여기를 누르세요」나 「더 보기」라면 아무것도 알 수 없습니다. 앞뒤 맥락 없이도 뜻이 통하는 글자를 쓰세요. 「여기를 누르세요」가 아니라 「2026년 시간표 내려받기」처럼 씁니다.

브라우저는 기본으로 링크에 밑줄을 긋고 파란색으로 보여 주며, 이미 다녀온 링크는 보라색으로 보여 줍니다. CSS로 링크 모양을 바꿀 수 있지만, 색을 구분하기 어려운 사람도 어느 낱말이 링크인지 알 수 있도록 밑줄처럼 색 말고 다른 표시를 하나 남겨 두세요. 링크에 키보드 초점이 오면 브라우저가 둘레에 초점 테두리를 그립니다. 분명한 대신할 표시를 만들지 않았다면 이 테두리를 없애지 마세요.