HTML abbr 태그, 생략 속에서도 의미를 정확히 전하는 기술

HTML abbr & dfn 태그 – 용어 설명을 우아하게!

HTML 문서에서 특정 용어나 약어를 사용자에게 더 친절하게 전달하고 싶을 때, 그냥 텍스트로만 보여주기엔 아쉽습니다.
그럴 땐 abbr와 dfn 태그를 활용하면 툴팁도 보여주고 의미도 정확히 전달할 수 있어요.
이번 글에서는 이 두 태그를 개별로 설명하고, 함께 사용할 수 있는 예시도 다양하게 소개해 볼게요.

Step 1. abbr 태그 – 약어에 툴팁 달기

abbr는 abbreviation의 줄임말로, 사용자에게 “이건 약어야!”라고 알려주는 태그입니다.
그리고 title 속성을 이용해 마우스를 올렸을 때 전체 단어를 보여줄 수 있어 접근성과 UX가 모두 향상돼요.

<p>우리 회사는 <abbr title="Artificial Intelligence">AI</abbr> 기술을 개발 중입니다.</p>

툴팁은 마우스를 올리면 자동으로 나타나죠!

Step 2. dfn 태그 – 용어의 정의를 강조할 때

dfn은 definition의 줄임말이에요. 문서에서 어떤 단어를 처음 정의할 때 사용합니다.
브라우저는 이 태그 안의 단어가 “이 문서에서의 정의 대상”이라는 걸 이해합니다.

<p><dfn>프론트엔드</dfn>는 사용자와 직접 상호작용하는 웹 개발 영역입니다.</p>

특별한 스타일이 적용되진 않지만, 문서 구조상 중요한 시맨틱 의미를 부여할 수 있어요.

Step 3. abbr과 dfn을 함께 쓰는 경우

어떤 단어가 “약어이면서 동시에 정의”의 대상일 수도 있죠.
이럴 때 abbr과 dfn을 중첩해서 사용할 수 있습니다.

<p><dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn>은 웹 문서를 구성하는 마크업 언어입니다.</p>

이렇게 하면 “약어”임을 알려주면서, 동시에 “이 문서에서 정의된 용어”라는 의미도 담을 수 있어요.

Step 4. 다양한 실전 활용 예시

아래는 분야별로 abbr과 dfn을 사용하는 예시입니다.

• 과학 기사: abbr로 전문 용어에 툴팁 제공
• 개발 문서: dfn으로 기술 개념 정의
• 입문 가이드: 둘 다 사용하여 친절한 설명 제공

정리하며

다음 포스팅에서는 cite 태그를 함께 다뤄볼 예정입니다.