HTML abbr 태그란?
HTML의 <abbr> 요소는 문서 내에서 약어(abbreviation)와 두문자어(acronym)를 의미 있게 마크업하는 데 사용됩니다. HTML5에서는 기존의 <acronym> 태그가 공식적으로 폐기(deprecated)되었기 때문에, 이제는 반드시 <abbr> 태그를 사용해야 합니다.
<abbr> 태그에 title 속성을 함께 지정하면, 사용자가 해당 약어에 마우스 커서를 올렸을 때 전체 의미가 툴팁 형태로 표시되어 접근성과 가독성을 높일 수 있습니다.
두문자어(Acronym) 예시
- B2B: 기업 간 거래(Business to Business)
- B2C: 기업과 소비자 간 거래(Business to Consumer)
- CMS: 콘텐츠 관리 시스템(Content Management System)
- PPC: 클릭당 과금(Pay Per Click)
- ROI: 투자 수익률(Return On Investment)
- CTA: 행동 유도 문구(Call To Action)
약어(Abbreviation) 예시
- Mr: 미스터(Mister)
- Dr.: 박사·의사(Doctor)
- St: 거리(Street)
- Km: 킬로미터(Kilometer)
abbr 태그 사용 예제
다음은 <abbr> 태그를 실제로 구현한 예제입니다.
<!DOCTYPE html> <html> <body> <h2>Coding Ground</h2> <h3>Compilers for Programming Languages and Web Technologies</h3> <nav> <a href="/compile_java_online.php">Java</a> | <a href="/php_terminal_online.php">PHP</a> | <a href="/online_jquery_editor.php">jQuery</a> | <a href="/compile_c_online.php">C</a> | <a href="/compile_cpp_online.php">C++</a> | <a href="/online_angularjs_editor.php">AngularJS</a> </nav> <p>We also have a compiler for <abbr title="JavaScript">JS</abbr> libraries.</p> </body> </html>
실행 결과
위 예제에서 JS라는 텍스트에 마우스 커서를 올리면, title 속성에 지정된 "JavaScript"라는 전체 의미가 툴팁으로 나타납니다.
참고 사항
대부분의 브라우저는 <abbr> 요소를 점선 밑줄 스타일로 기본 표시합니다. 필요하다면 CSS의 text-decoration, cursor 등의 속성을 활용해 원하는 스타일로 자유롭게 꾸밀 수 있습니다. 또한 스크린 리더 사용자에게 약어의 의미를 전달할 수 있어 웹 접근성 측면에서도 유용합니다.