HTML의 유용한 태그 <abbr>

이 포스트는 HTML의 <abbr> … </abbr> 태그에 관한 내용입니다.

이 태그 이름인 abbr은 abbreviation의 약자로 ‘축약어’를 의미합니다. 즉, 이 태그는 축약어를 쓸 때 사용하는 태그입니다. HTML5 표준이 제정되기 전에는 축약어는 <abbr> 태그로, 두문자어는 <acronym> 태그로 구분하여 사용하였으나, 두 태그를 굳이 구분하여 사용할 필요성이 부족하다는 지적에 따라 HTML5에서는 <abbr> 태그로 통합되었습니다.

우선, 이 태그에 필요한 CSS를 다음과 같이 정의하였다고 가정합니다.

abbr[title] {
	border-bottom: 1px dotted;
	cursor: help;
}

이 CSS는 필수적인 것은 아니지만 <abbr> 태그를 사용하여 축약어를 표현한 것임을 알리기 위해 사용하는 것입니다. 위의 CSS와 같은 경우 <abbr> 태그에 title 속성값으로 그 의미가 표현된 축약어에는 점선으로 된 밑줄이 그려지며 마우스를 대면 마우스 커서가 물음표로 변합니다.

<p>
	<b>브렉시트</b>(<abbr title="Britain + Exit">Brexit</abbr>)는
	영국의 유럽 연합(<abbr title="European Union">EU</abbr>) 탈퇴를 뜻하는 말이다.
</p>

이 예제는 다음과 같이 표시될 것입니다.

위에서 <abbr> 태그로 둘러싼 ‘Brexit’와 ‘EU’에 점선으로 된 밑줄이 그려져 있고 마우스를 대면 커서가 물음표로 변하면서 각각 ‘Britain + Exit’와 ‘European Union’이라는 말이 뜨는 것을 알 수 있습니다. 모바일에서는 점선으로 된 밑줄 외에는 확인할 수 없지만 의미적으로는 축약어임이 명시됩니다.

참고로 HTML 4.01 이전까지는 태그의 사용법에 의하면 ‘NATO’처럼 한 단어로 읽히는 두문자어의 경우 <acronym> 태그로 구분해서 썼지만 HTML5에서는 이 경우에도 <abbr> 태그로 씁니다.

HTML에서는 이렇게 <abbr> 태그를 이용하여 축약어 기능을 구현할 수 있습니다.