HTML <abbr>: 준말 요소
HTML <abbr>
요소는 준말이나 머리글자를 나타냅니다. title
특성을 사용해서 준말의 전체 뜻이나 설명을 제공할 수 있습니다.
<abbr title="HyperText Markup Language">HTML</abbr>에
스타일을 적용하려면
<abbr title="Cascading Style Sheet">CSS</abbr>를
사용하세요.
불러오는 중...
특성
전역 특성만 포함합니다. 다만 <abbr>
의 title
특성은 다른 요소에서와는 달리, 반드시 준말의 온전한 뜻을 사람이 읽을 수 있는 형태로 가져야 합니다. 보통, 브라우저는 title
의 값을 마우스 커서를 올렸을 때 나타나는 툴팁으로 보여줍니다.
각각의 <abbr>
요소는 서로 독립적입니다. 어떤 준말에 title
을 제공했을 때, 같은 준말이 또 존재한다고 하면 모두 별도의 title
을 지정해야 합니다.
사용 일람
일반 사용
당연히, 모든 준말을 <abbr>
로 표시해야 하는 것은 아닙니다. 그러나 해석을 추가할 경우 도움이 되는, 다음과 같은 경우가 있습니다.
- 준말을 사용했는데 그 설명을 문서 콘텐츠의 흐름 바깥에서 제공하고 싶으면
<abbr>
에 적절한title
을 지정해서 사용하세요. - 독자에게 익숙하지 않을법한 준말을 사용할 때도
<abbr>
을 사용하고,title
특성이나 인라인 텍스트로 해석을 붙여주세요. - 텍스트 내에서 준말의 존재를 강조해야 할 때도
<abbr>
을 사용하면 좋습니다. 이를 응용하면 준말 스타일링과 스크립팅에도 사용할 수 있습니다. <abbr>
을<dfn>
과 함께 사용해서 준말과 그 정의 사이에 관계를 설정할 수 있습니다. “준말 정의하기” 예제를 참고하세요.
문법 고려사항
영어처럼, 수량이 문장에 영향을 미치는 언어에서는 <abbr>
요소의 콘텐츠와 title
특성의 값에서 사용하는 수량을 동일하게 맞춰주세요.
예제
준말 표시
별도의 설명 없이 준말의 존재만 나타낼 때는 title
특성 없는 <abbr>
을 사용하세요.
<p>웹 페이지를 <abbr>HTML</abbr>로 만들어 보세요.</p>
불러오는 중...
설명 추가
설명은 title
특성으로 제공할 수 있습니다. “HTML”에 마우스를 올려보세요.
<p>웹 페이지를 <abbr title="HyperText Markup Language">HTML</abbr>로 만들어 보세요.</p>
불러오는 중...
준말 정의
<abbr>
을 <dfn>
과 함께 사용해서 형식적으로 준말을 정의할 수 있습니다.
<p>
<dfn id="title"><abbr title="HyperText Markup Language">HTML</abbr></dfn
>은 웹 페이지의 구조와 의미를 부여하는 마크업 언어입니다.
</p>
<p>
<dfn id="spec">명세</dfn>(<abbr title="명세">spec</abbr>)는 기술과 API가 어떻게 동작해야 하는지 자세히 서술하는
문서입니다.
</p>
불러오는 중...
접근성
페이지에서 처음 준말이나 머리글자를 사용했을 때 그 뜻을 설명하면 독자가 이해하기 좋아집니다. 기술적이거나 전문적인 용어라면 특히 설명 추가를 고려해보세요.
예제
<p>JavaScript Object Notation(<abbr>JSON</abbr>)은 경량 데이터 교환 형식입니다.</p>
해당 용어에 익숙하지 않거나, 언어에 익숙하지 않거나, 인지력이 저하된 사용자에게 도움이 됩니다.
명세
브라우저 호환성
데스크톱 | 모바일 | ||||||
---|---|---|---|---|---|---|---|
iOS | Android | ||||||
Safari | Chrome | Firefox | Safari | Chrome | Firefox | Samsung Internet | |
abbr |