HTML의 <area> 요소에서 hreflang 속성은 이미지 맵의 특정 영역에 연결된 URL이 어떤 언어로 작성되어 있는지 지정하는 역할을 합니다. 이 속성을 활용하면 브라우저나 검색 엔진이 링크된 대상 페이지의 언어를 사전에 인식할 수 있어, 다국어 웹사이트를 운영할 때 특히 유용합니다.
기본 문법
<area hreflang="language_code">
여기서 language_code 자리에는 해당 언어를 나타내는 ISO 639 언어 코드가 들어갑니다. 예를 들어 영어는 en, 프랑스어는 fr, 일본어는 ja, 한국어는 ko처럼 두 글자 소문자로 표기합니다.
그럼 <area> 요소에 hreflang 속성을 실제로 적용한 예제를 살펴보겠습니다.
예제
<!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" download="perl" hreflang="en"/>
<area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial"
href = "/html/index.htm" target = "_blank" download="html" hreflang="en"/>
<area shape = "circle" coords = "73,168,32" alt = "PHP Tutorial"
href = "/php/index.htm" target = "_blank" download="php" hreflang="en"/>
</map>
</body>
</html>
실행 결과
코드 상세 설명
위 예제에서는 먼저 다음 이미지에 이미지 맵(map)을 연결했습니다.
<img src = /images/usemap.gif alt = "usemap" border = "0" usemap = "#tutorials"/>
이어서 <map> 태그 안에서 다각형(poly), 사각형(rect), 원(circle) 등 각기 다른 모양(shape)의 클릭 영역을 정의했습니다.
<map name = "tutorials">
<area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27"
href = "/perl/index.htm" alt = "Perl Tutorial" download="perl" hreflang="en"/>
<area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial"
href = "/html/index.htm" target = "_blank" download="html" hreflang="en"/>
<area shape = "circle" coords = "73,168,32" alt = "PHP Tutorial"
href = "/php/index.htm" target = "_blank" download="php" hreflang="en"/>
</map>
각 영역에 연결된 URL의 언어는 hreflang 속성을 통해 지정했습니다.
hreflang="en"
즉, 위 코드에서는 세 개의 링크가 모두 영어(en)로 작성된 문서를 가리킨다고 명시한 것입니다. 만약 링크 대상이 일본어 페이지라면 ja, 한국어 페이지라면 ko로 값을 변경하면 됩니다.