HEAD(문서 머리) 영역 #3 - LINK 요소

head 요소에 포함되는 link 요소에 대하여 설명합니다. link 요소의 rel 속성은 a 요소에도 존재하며, head 영역에 속하진 않지만 같이 다루겠습니다.

LINK 요소

<link> 요소는 다른 문서 또는 외부 소스와의 링크를 표시한다. 이때의 링크는 다른 문서 참조의 하이퍼링크가 아닌 외부 소스를 연결하여 좀 더 효과적으로 처리하는 것을 말한다. 대표적으로 스타일시트 문서를 별도로 관리하는 용도로 자주 쓰인다.

<link rel="stylesheet" href="css/normalize.css">

LINK 요소의 rel 속성

rel 속성은 현재 문서와 링크된 문서와의 관계(relationship)를 지정한다. 속성값은 alternate, author, help, icon, license, next, pingback, prefetch, search, stylesheet를 가질 수 있다. rel은 href 속성을 위한 추가 정보이므로 href 속성이 있을 때에만 정의되어야 한다.

rel 속성은 A, AREA, LINK 요소에 사용되며 일부 속성은 요소에 따라 용도가 달라진다.

rel="icon"

현재 문서를 표현할 수 있는 아이콘 파일 주소를 참조하기 위한 속성값이며, link 요소에서만 사용할 수 있다. 이 아이콘을 파비콘이라고 부르며 사용자가 특정 사이트나 문서를 신속하게 식별할 수 있도록 도움을 준다.

<link rel="icon" href="favicon.png">

rel="pingback"

핑백서버의 주소를 참조하기 위한 속성값이며, link 요소에서만 사용할 수 있다. 어떤 사람이 A 문서를 B 문서에 링크했을 때 이 사실을 A 문서의 저작자에게 자동으로 알려주는 것을 핑백이라고 한다. 즉 A 문서의 저작자는 자신의 문서를 어느 문서에서 링크하는지를 알기 위해 핑백 서버를 만들고 link 요소의 pingback 속성값을 이용하여 링크 여부에 대한 알림 정보를 자동으로 받을 수 있도록 요청할 수 있다.

<link rel="pingback" href="pingback server">

핑백 스펙 보기

rel="prefetch"

특정 문서, 이미지 등을 먼저 인출하고(prefetch), 이 정보를 브라우저가 기억하도록 지정하는 속성값이며, link, a, area 요소에서 사용할 수 있다. 사용자가 현재 문서를 가까운 미래에 다시 방문할 가능성이 크다면 저작자는 브라우저가 현재 문서를 기억하도록 힌트를 줄 필요가 있다. 이 힌트는 prefetch 속성값에 의해 표현되며, 이 속성값은 지정된 문서 URL을 브라우저 캐시에 저장하도록 만든다. 이렇게 저장된 문서는 그렇지 않은 문서보다 더 빠르게 로딩될 수 있다.

<link rel="prefetch" href="http://www.example.com/search_results.html/">

프리패치 FAQ 보기

rel="search"

현재 문서에 대한 검색 인터페이스를 지정하는 속성값이며, link, a, area 요소에서 사용할 수 있다. 현재의 검색엔진은 플래시나 동영상 형식으로 만들어진 콘텐츠는 검색엔진이 찾지 못하거나 찾기 어려운 콘텐츠다. 현재 수준에서 검색엔진과 콘텐츠가 서로 의사소통하기 위해 표준 형식의 검색 인터페이스를 XML 문서 형식으로 정의하려는 움직임이 있다.

<link rel="search" type="application/opensearchdescription+xml" href="http://example.com/search.xml/" title="content search results">

link 요소의 rel 속성을 search로 지정하고 검색 인터페이스로 작성된 XML 문서를 href 속성으로 지정하면 검색엔진이 현재 문서를 색인할 수 있게 된다.

rel="stylesheet"

외부 스타일시트를 지정하는 속성값이며, link 요소에서만 사용할 수 있다. 스타일 시트를 HTML 문서에 직접 작성하지 않고 외부에 두는 경우 link 요소를 통해 외부 스타일시트를 불러올 수 있다. 외부 스타일시트를 사용할 경우 브라우저 캐시 기능에 의해 한 번 요청한 스타일 시트는 추가적인 HTTP 요청없이 재활용할 수 있으므로 스타일 시트가 외부에 있는 것이 오히려 문서 로딩 속도가 향상될 수 있다.

<link rel="stylesheet" href="css/normalize.css">

A 요소의 rel 속성

아래에서 설명하는 것들은 link 요소에서도 사용가능 한 것들이 있음에 유념하세요.

rel="alternate"

현재 문서를 대체(alternate)하기 위한 문서 링크를 지정하기 위한 속성이다. link, a, area 요소에서 사용할 수 있다. 인쇄용 문서, 번역 문서처럼 현재 문서와 내용은 같지만 형식이 다른 문서라는 사실을 알 수 있게 해준다.

<a rel="alternate" href="http://www.example.com/web_standards_print.html/">인쇄</a>

rel="author"

현재 문서의 저작자에 관한 문서 링크를 지정하기 위한 속성이다. link, a, area 요소에서 사용할 수 있다. 작성자, 연락처 등 문서의 운영과 관리에 대한 구체적인 정보를 별도의 문서에서 제공할 때 author 속성값을 사용한다.

<a rel="author" href="http://www.example.com/profile.html/">저자 소개</a>

rel="bookmark"

고유주소(permalink)를 가진 문서 링크를 지정하기 위한 속성이다. a, area 요소에서 사용할 수 있다. 중요한 문서는 그 주소가 바뀌지 말아야만 즐겨찾기(bookmark)로 등록한 사용자가 나중에 다시 찾아올 수 있다. 현재 문서 주소가 변경될 가능성이 있다면 사용자를 고유주소로 이동시킨 다음 그곳에서 즐겨찾기 등록이 이루어지도록 해야 하는데, 이럴 때 bookmark 속성값을 사용한다.

<a rel="bookmark" href="http://www.example.com/web_standards.html/">이 문서의 원본으로 가기</a>

rel="external"

외부(external)에 있는 문서 링크를 지정하기 위한 속성이다. a, area 요소에서 사용할 수 있다. 이 속성값은 링크된 문서가 다른 웹 사이트 일부라는 사실을 알려준다.

<a rel="external" href="http://www.w3c.org/html5.html/">HTML5</a>

rel="help"

도움말(help)이 있는 문서 링크를 지정하기 위한 속성이다. link, a, area 요소에서 사용할 수 있다. 간혹 전문 용어나 사용 방법을 안내하기 위해 도움말을 링크시키는 때가 있다. 예를 들어 어떤 사용자가 공인인증서라는 링크를 맞닥뜨렸을 때 맥락적으로 이 링크가 도움말과 연결되어 있다는 사실을 알 수 있더라도 스크린리더 사용자들은 이것을 알아채기 힘들다. 이 링크가 도움말과 연결되어 있는지 공인인증서 내려받기 문서와 연결되어 있는지 알수 없기 때문이다. 이럴때 rel 속성을 사용하여 도움말 여부에 대한 힌트를 제공해 주는 것이 바람직하다.

<a rel="help" href="http://www.example.com/public_certi.html/">공인인증서</a>

rel="license"

현재 문서의 저작권정보(license, copyright)가 있는 문서 링크를 지정하기 위한 속성이다. link, a, area 요소에서 사용할 수 있다. 문서 전체에 대한 권리를 표시하기 위해 푸터 영역에서 저작권 정보를 제공하는데 문서 내에 있는 외부 콘텐츠의 출처를 표시할 때에는 저작권 정보를 별도로 제공할 필요가 있다.

<a rel="license" href="http://creativecommons.org/licenses.html/">CCL</a>

rel="nofollow"

검색엔진이 링크된 문서로 따라가지 않도록 문서 링크를 지정하는 속성이다. a, area 요소에서 사용할 수 있다. 검색엔진이 문서 내에 있는 모든 링크를 따라가지 않도록 하려면 nofollow를 헤더의 meta 요소에서 지정한다.

<meta name="robots" content="nofollow">

특정 링크마다 개별적으로 지정하려면 a나 area 요소에서 지정한다.

<a rel="nofollow" href="login.html/">로그인</a>

구글과 같은 검색엔진은 나름의 규칙에 따라 링크를 따라 다니면서 문서를 인덱싱(색인작업)을 하는데 불필요한 인덱싱을 줄이기 위해 신뢰성이 낮은 콘텐츠, 유려 링크, 우선순위가 낮은 문서(예. 로그인 문서)등은 인덱싱할 필요가 없으므로 이러한 문서나 링크는 nofollow로 지정하길 원하고 있다.

rel="noreferrer"

링크를 선택하더라도 레퍼러가 발생하지 않도록 문서 링크를 지정하는 속성이다. a, area 요소에서 사용할 수 있다. 사용자가 A 문서에 있는 링크를 통해 B 문서를 방문하게 되면 브라우저는 B 문서를 참조한 문서, 즉 A 문서의 URL 정보를 B 문서가 있는 웹 서버로 보낸다. 이때 A 문서의 URL 정보를 바로 레퍼러 또는 HTTP referrer라고 부른다.

<a rel="noreferrer" href="http://www.reference.com/" target="_blank">참고문서</a>

noreferrer 속성값을 지정하면 사용자가 a 또는 area 요소를 선택하더라도 브라우저는 레퍼러를 전송한다.

rel="sidebar"

링크된 문서를 사이드바 용도로 지정하는 속성이다. link, a, area 요소에서 사용할 수 있다. 사이드바는 문서 본문의 측면에 자리 잡고 있는 영역을 의미한다. 단순한 정보로 이루어진 문서는 본문 영역만으로 구성될 수 있지만 정보가 복잡해지면 본문 영역 이외에도 내비게이션 영역, 관련 콘텐츠 영역처럼 사이드바가 필요하다.

<a rel="sidebar" href="toc.html" title="Help">Create panel with table of contents for Opera help</a>

저작자는 rel="sidebar"를 통해 링크된 문서가 사이드바로 이용될 수 있다는 사실을 표시할 수 있다.

rel="tag"

현재 문서에 대한 태그를 지정하는 속성이다. link, a, area 요소에서 사용할 수 있다. 태그는 검색을 위한 키워드 또는 주제어로 볼 수 있다. 검색엔진은 링크된 텍스트를 단순히 링크된 텍스트가 아니라 현재 문서를 핵심적으로 설명하는 키워드로 인식하고, 이러한 텍스트 위주로 인덱싱을 하게 되면 작업 효율성을 크게 높일 수 있다.

<a rel="tag" href="http://www.example.com/allaboutdesign.html/">디자인</a>

링크된 텍스트에 rel="tag"를 지정하면, 이 텍스트는 현재 문서에 대한 태그가 된다.

rel="prev"

이전 문서를 지정한다. link, a, area 요소에서 사용할 수 있으며, 연속적인 정보 구조에서 현재 문서보다 이전에 있는 문서를 가리킨다. 속성값을 지정했을 때 어떤 효과가 있는지 아직 명확하게 밝혀진 바가 없지만 문서마다 이전 또는 다음에 대한 정보가 있다면 브라우저나 검색엔진이 문서의 순서나 구조를 전체적으로 파악하는데 도움을 줄 수 있을 것으로 본다.

<a rel="prev" href="page1.html">첫번째 문서</a>

rel="next"

다음 문서를 지정한다. link, a, area 요소에서 사용할 수 있으며, 연속적인 정보 구조에서 현재 문서보다 다음에 있는 문서를 가리킨다.

<a rel="next" href="page3.html">세번째 문서</a>