HTML의 <abbr> 태그는 약어(축약어)를 나타낼 때 사용됩니다. 이 태그에 title 속성을 함께 지정하면, 사용자가 해당 약어 위에 마우스 커서를 올릴 때 전체 의미가 툴팁 형태로 표시되어 문서의 가독성과 접근성을 크게 높일 수 있습니다.
abbr 태그의 주요 특징
- 약어나 두문자어(WHO, HTML 등)를 의미론적으로(markup) 표현할 수 있습니다.
title속성에 전체 명칭을 넣으면 브라우저가 자동으로 툴팁을 제공합니다.- 검색 엔진과 스크린 리더가 약어의 의미를 정확히 인식하도록 도와 웹 접근성이 향상됩니다.
예제 코드
아래 코드를 실행하면 HTML에서 약어를 포함하는 방법을 직접 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML abbr Tag</title> </head> <body> <p> <abbr title = "Private">pvt.</abbr> <br /> <abbr title = "World Health Organization">WHO</abbr> promotes the global game. <br /> </p> </body> </html>
실행 결과 설명
위 예제에서 pvt.는 'Private(사유)', WHO는 'World Health Organization(세계보건기구)'의 약어입니다. 브라우저에서 해당 단어에 마우스를 올리면 title 속성에 지정한 전체 명칭이 작은 툴팁으로 나타나는 것을 볼 수 있습니다.
참고 사항
대부분의 브라우저에서 <abbr> 태그로 감싼 텍스트는 기본적으로 점선 밑줄이 표시됩니다. 필요하다면 CSS의 text-decoration 속성을 사용해 이 스타일을 자유롭게 변경할 수 있습니다.