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>

해당 용어에 익숙하지 않거나, 언어에 익숙하지 않거나, 인지력이 저하된 사용자에게 도움이 됩니다.

명세

HTML Living Standard

브라우저 호환성

같이 보기

• 정의할 용어: <dfn>