<abbr>

This translation is in progress.

HTML <abbr> 요소는 준말 또는 머리글자를 나타냅니다. 선택 속성인 title을 사용하면 준말의 전체 뜻이나 설명을 제공할 수 있습니다. title 속성은 전체 설명만을 가져야 하며 다른건 포함할 수 없습니다.

콘텐츠 카테고리 플로우 콘텐츠, 구문 콘텐츠, 뚜렷한 콘텐츠.
가능한 콘텐츠 구문 콘텐츠
태그 생략 None, both the starting and ending tag are mandatory.
가능한 부모 요소 구문 콘텐츠를 허용하는 모든 요소.
가능한 ARIA 역할 모두
DOM 인터페이스 HTMLElement

특성

이 요소는 전역 특성만 포함합니다.

title 특성은 <abbr> 요소에서는 다른 용도를 가집니다. 다른 요소에서와 달리, title은 준말에 대한 설명 혹은 확장 형태를 사람이 읽을 수 있는 형태로 나타내야 합니다. 브라우저에서는 대개 마우스 커서를 올렸을 때 나타나는 툴팁으로 표현합니다.

각각의 <abbr> 요소는 서로 독립적입니다. 하나의 요소에 title을 제공한다고 나머지에 지정하지 않아도 되는 것은 아닙니다.

사용 일람

Typical use cases

It's certainly not required that all abbreviations be marked up using <abbr>. There are, though, a few cases where it's helpful to do so:

  • When an abbreviation is used and you want to provide an expansion or definition outside the flow of the document's content, use <abbr> with an appropriate title.
  • To define an abbreviation which may be unfamiliar to the reader, present the term using <abbr> and either a title attribute or inline text providing the definition.
  • When an abbreviation's presence in the text needs to be semantically noted, the <abbr> element is useful. This can be used, in turn, for styling or scripting purposes.
  • You can use <abbr> in concert with <dfn> to establish definitions for terms which are abbreviations or acronyms. See the example Defining an abbreviation below.

Grammar considerations

In languages with grammatical number (that is, languages where the number of items affects the grammar of a sentence), use the same grammatical number in your title attribute as inside your <abbr> element. This is especially important in languages with more than two numbers, such as Arabic, but is also relevant in English.

기본 스타일

The purpose of this element is purely for the convenience of the author and all browsers display it inline (display: inline) by default, though its default styling varies from one browser to another:

  • Some browsers, like Internet Explorer, do not style it differently than a <span> element.
  • Opera, Firefox, and some others add a dotted underline to the content of the element.
  • A few browsers not only add a dotted underline, but also put it in small caps; to avoid this styling, adding something like font-variant: none in the CSS takes care of this case.

예제

Marking up an abbreviation semantically

To mark up an abbreviation without providing an expansion or description, simply use <abbr> without any attributes, as seen in this example.

HTML

<p>Using <abbr>HTML</abbr> is fun and easy!</p>

Result

Styling abbreviations

You can use CSS to set a custom style to be used for abbreviations, as seen in this simple example.

HTML

<p>Using <abbr>CSS</abbr>, you can style your abbreviations!</p>

CSS

abbr {
  font-variant: all-small-caps;
}

Result

Providing an expansion

Adding a title attribute lets you provide an expansion or definition for the abbreviation or acronym.

HTML

<p>Ashok's joke made me <abbr title="Laugh Out Loud">LOL</abbr> big
time.</p>

Result

Defining an abbreviation

You can use <abbr> in tandem with <dfn> to more formally define an abbreviation, as shown here.

HTML

<p><dfn id="html"><abbr title="HyperText Markup Language">HTML</abbr>
</dfn> is a markup language used to create the semantics and structure
of a web page.</p>

<p>A <dfn id="spec">Specification</dfn>
(<abbr title="Specification">spec</abbr>) is a document that outlines
in detail how a technology or API is intended to function and how it is
accessed.</p>

Result

See more in-depth examples in the How to mark abbreviations and make them understandable article.

접근성 고려사항

Spelling out the acronym or abbreviation in full the first time it is used on a page is beneficial for helping people understand it, especially if the content is technical or industry jargon.

Example

<p>JavaScript Object Notation (<abbr>JSON</abbr>) is a lightweight data-interchange format.</p>

This is especially helpful for people who are unfamiliar with the terminology or concepts discussed in the content, people who are new to the language, and people with cognitive concerns.

명세

Specification Status Comment
HTML Living Standard
The definition of '<abbr>' in that specification.
Living Standard
HTML5
The definition of '<abbr>' in that specification.
Recommendation
HTML 4.01 Specification
The definition of '<abbr>' in that specification.
Recommendation

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
abbrChrome Full support 2Edge Full support 12Firefox Full support 1
Notes
Full support 1
Notes
Notes Before Firefox 4, this element implemented the HTMLSpanElement interface instead of the standard HTMLElement interface.
IE Full support 7Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
See implementation notes.
See implementation notes.

같이 보기