HTML <area> 태그의 rel 속성 – 링크 관계 설정 방법과 활용 예제

HTML <area> 태그의 rel 속성이란?

HTML의 <area> 요소에서 rel 속성은 현재 문서와 링크된 문서 사이의 관계를 정의하는 데 사용됩니다. 이 속성은 HTML5에서 <area> 요소에 새롭게 도입되었습니다.

rel 속성을 활용하면 브라우저와 검색 엔진에 링크 대상 문서의 성격을 알려줄 수 있어, SEO 최적화나 보안 강화 측면에서도 유용하게 사용됩니다.

기본 문법

<area rel="value">

위 문법에서 value 자리에는 아래에서 소개하는 다양한 값을 지정할 수 있습니다.

rel 속성에 사용할 수 있는 주요 값

alternate : 문서의 대체 버전을 나타냅니다. 예를 들어 인쇄용 페이지 등이 해당됩니다.
author : 문서의 작성자 정보 페이지로 연결합니다.
bookmark : 북마크(즐겨찾기)에 사용할 수 있는 고유 URL을 나타냅니다.
help : 도움말 문서로 연결합니다.
license : 저작권 및 라이선스 정보를 담은 문서로 연결합니다.
next : 시리즈물에서 다음 문서를 가리킵니다.
nofollow : Google 등 검색 엔진이 해당 링크를 따라가 인덱싱하지 않도록 지시합니다.
noreferrer : 사용자가 하이퍼링크를 클릭할 때 브라우저가 HTTP referer 헤더를 전송하지 않도록 합니다.
prefetch : 대상 문서를 미리 캐싱해 두어야 함을 지정합니다.
prev : 시리즈물에서 이전 문서를 가리킵니다.
search : 문서 검색 도구 페이지로 연결합니다.
tag : 현재 문서에 적용된 태그(키워드)를 나타냅니다.

그럼 이제 <area> 요소의 rel 속성을 실제로 구현하는 예제를 살펴보겠습니다.

예제 코드

<!DOCTYPE html>
<html>
<body>
<h2>Learning</h2>
<p>Learn these technologies with ease....</p>
<img src = /images/usemap.gif alt = "usemap" border = "0" usemap = "#tutorials"/>
<map name = "tutorials">
    <area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27"
       href = "/perl/index.htm" alt = "Perl Tutorial" target = "_blank" rel="alternate"/>
    <area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial"
       href = "/html/index.htm" target = "_blank" />
    <area shape = "circle" coords = "73,168,32" alt = "PHP Tutorial"
       href = "/php/index.htm" target = "_blank" />
</map>
</body>
</html>

실행 결과

HTML area 태그의 rel 속성 – 링크 관계 설정 방법과 활용 예제

예제 코드 분석

위 예제에서는 먼저 이미지에 이미지 맵(map)을 적용했습니다.

<img src = /images/usemap.gif alt = "usemap" border = "0" usemap = "#tutorials"/>

이후 <map> 요소 안에 영역별로 <area>를 배치하고, 각 영역의 모양(shape)과 좌표(coords)를 지정했습니다.

<map name = "tutorials">
    <area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27"
       href = "/perl/index.htm" alt = "Perl Tutorial" target = "_blank" rel="alternate"/>
    <area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial"
       href = "/html/index.htm" target = "_blank" />
    <area shape = "circle" coords = "73,168,32" alt = "PHP Tutorial"
       href = "/php/index.htm" target = "_blank" />
</map>

여기서 첫 번째 <area>에만 rel 속성을 추가하여, Perl 튜토리얼 링크가 원본 문서의 대체 버전(alternate)임을 명시했습니다.

rel="alternate"