<abbr> 태그의 정의 및 사용법

<abbr> 태그는
"abbreviation(약어)"의 약어로, 약어나 줄임말을 나타내는 태그입니다.

<abbr> 태그는 다음과 같은 용도로 사용될 수 있습니다.

  • 약어의 의미를 명확하게 표시하기 위해
  • 검색 엔진에 약어를 인식시키기 위해
  • 약어를 강조하기 위해
HTML <abbr> 태그는 "abbreviation(약어)"의 약어로, 약어나 줄임말을 나타내는 태그입니다. 
<p>쉽고 재미있는 <abbr title="Hypertext Markup Language">HTML</abbr>을 배웁시다!</p>
브라우저에서 실제 표시된 모습

구문

이 태그를 사용하면 웹 페이지의 접근성과 이해성을 높일 수 있을 뿐만 아니라, HTML 문서를 더 읽기 쉽게 만들고 검색 엔진에 문서를 더 잘 인식시키는데 도움이 됩니다.

HTML 
<abbr title="전체 단어 또는 구문">약어</abbr>

title 속성 사용하기

<abbr> 태그는 모든 글로벌 속성을 사용할 수 있습니다.
하지만 다른 태그와는 달리 <abbr> 태그에서 사용되는 title 속성은 특정한 의미를 지니며 title은 약어나 줄임말에 대한 설명 혹은 확장 형태를 사람이 읽을 수 있는 형태를 값으로 가져야 합니다. 브라우저는 title의 값을 보통 마우스 커서를 올렸을 때 나타나는 툴팁으로 보여줍니다.

HTML title 속성
HTML 
<p>
    <abbr title="월요일">월</abbr>,
    <abbr title="화요일">화</abbr>,
    <abbr title="수요일">수</abbr>,
    <abbr title="목요일">목</abbr>,
    <abbr title="금요일">금</abbr>은 주중입니다
</p>
브라우저에서 실제 표시된 모습 브라우저는 title의 값을 보통 마우스 커서를 올렸을 때 나타나는 툴팁으로 보여줍니다.

title 속성 사용하지 않기

<abbr> 태그가 약어나 줄임말에 대한 설명없이 단순히 특정 단어가 약어나 줄임말임을 나타낼 경우에는 title 속성 없이 사용하세요.

HTML 
<p>쉽고 재미있는 <abbr>HTML</abbr>을 배웁시다!</p>

<dfn> 태그를 함께 사용하여 약어를 정의하기

HTML 
<p>
    <dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn>은
    웹 페이지를 생성하는 데 사용되는 표준 마크업 언어입니다.
</p>
HTML <dfn> 태그

<abbr>과 <dfn> 태그을 사용하면 약어나 줄임말을 정식으로 정의할 수 있습니다.

<abbr> 태그의 유용한 사례

  • 약어의 확장 설명 제공: 작성자가 약어의 확장을 제공하려는 경우, title 속성을 포함한 <abbr> 태그를 사용하여 확장 설명을 제공할 수 있습니다. 이는 확장 내용을 괄호 안에 인라인으로 포함시키는 것 대신 대안으로 사용될 수 있습니다.
  • 독자가 익숙하지 않은 약어: 문서의 독자들이 익숙하지 않을 수 있는 약어의 경우, 작성자는 해당 약어를 처음 사용될 때 title 속성을 포함한 <abbr> 태그를 사용하거나 인라인 텍스트 내에서 확장을 포함시킬 것을 권장합니다.
  • 의미론적으로 주석이 필요한 약어: 스타일 시트에서 특정 스타일을 지정하기 위해 스타일 시트에서 식별하고 특정 스타일을 부여해야 하는 경우, title 속성 없이 <abbr> 태그를 사용할 수 있습니다.

브라우저 호환성

abbr 태그의 브라우저 호환성
태그
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<abbr> 2 12 1 4

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

abbr 태그의 명세서 사양
명세서 사양
<abbr> HTML Standard
#the-abbr-element

참고문헌

같이 보기