HTML abbr 태그: 약어 뜻 표시와 title 속성 사용법

HTML의 <abbr>는 약어나 머리글자어를 표시합니다. title 속성에 전체 이름을 넣을 수 있지만, 중요한 뜻풀이는 본문에도 적어 마우스를 사용하지 않는 독자도 이해할 수 있게 합니다.

약어를 표시하고 전체 이름 설명하기

전문 용어가 처음 등장하면 전체 이름과 약어를 함께 제시하는 것이 이해에 도움이 됩니다. abbr은 약어라는 의미를 부여하며, 전체 이름을 자동으로 찾아주거나 번역하는 기능은 없습니다. 이미 독자에게 익숙한 모든 약어를 반드시 이 요소로 감쌀 필요도 없습니다.

아래 문서를 abbreviation.html로 저장하고 브라우저에서 엽니다. 첫 문장은 뜻풀이를 항상 보이게 하고, 둘째는 title 속성 사용을 비교하는 예제입니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>약어와 전체 이름 표시</title>
</head>
<body>
  <p>웹 문서는 하이퍼텍스트 마크업 언어
    (HyperText Markup Language, <abbr>HTML</abbr>)로 구조를 만듭니다.</p>
  <p>참고 약어: <abbr title="World Wide Web">WWW</abbr></p>
</body>
</html>

첫 문장의 HTML 옆에는 전체 이름이 표시됩니다. 둘째 문장의 WWW에는 브라우저에 따라 점선 밑줄이 보이고, 마우스를 올리면 World Wide Web이 툴팁으로 나타날 수 있습니다. 기본 밑줄이나 툴팁의 모양은 브라우저가 정하므로 일정한 표시를 보장하는 디자인 기능으로 사용하지 않습니다.

title에는 무엇을 넣어야 하나요?

abbr의 title은 선택 사항입니다. 지정한다면 그 약어의 전체 이름을 담고, 광고 문구나 관련 없는 설명을 섞지 않습니다. 한 abbr에 지정한 title이 같은 글의 다른 abbr에 자동으로 적용되지는 않습니다. 예제에서 title을 지워도 WWW라는 약어 텍스트는 그대로 남습니다.

제목을 나타내는 전역 속성이라는 이유로 페이지의 title 요소와 혼동하지 마세요. abbr의 title 속성은 해당 약어에 대한 보충 정보이고, 문서 head의 title 요소는 페이지 제목입니다.

툴팁만으로 뜻을 전달하지 않기

터치 화면에는 마우스 올리기가 없고, 키보드나 보조 기술에서 title이 제공되는 방식도 다릅니다. 약어를 이해하는 데 꼭 필요한 정보라면 예제의 첫 문장처럼 본문에 보이게 적습니다. 툴팁을 확인하려고 abbr을 불필요하게 탭 이동 대상이나 버튼으로 바꾸기보다 내용 자체를 읽을 수 있게 구성하세요.

설명이 길면 첫 등장 가까이에 문장으로 풀어 쓰거나 용어 설명으로 연결합니다. 같은 문단에서 이미 설명한 전체 이름을 title에 반복해 넣을지는 읽기 흐름을 고려합니다. 사용 조건과 접근성 설명은 MDN의 abbr 문서를 참고할 수 있습니다.