[html] abbr 태그

 

 

[html] abbr 태그

 

abbr 태그는 두문자어(acronym)와, 약어(abbreviation )에 사용하는 요소로, 브라우저나 검색엔진에

 

유용한 정보를 줍니다.

넷스케이프가 abbr 요소를 만들고, 마이크로소프트가 acronym을 만들어

 

두 요소 다 html4까지 사용하고 있었지만, 두 정의가 혼동스럽고 브라우저 지원도

 

저마다 달라, html5부터 acronym은 퇴화 요소로 규정합니다.

 

html5부터는 두문자어와, 약어에 모두 abbr 태그를 사용합니다.

 

참고

 

acronym: 단어의 머리글자를 딴 말. NATO는 North Atlantic Treaty Organization의 두문자어임

              '나토'라고 읽음.

 

abbreviation: 쉽게 알아들을 수 있도록 줄인 말. BBC는 British Broadcasting Corporation의 축약어.

                  '비비씨'로 읽음(각 철자를 분리해서 발음함.)

 

*abbr 요소는 인라인 요소

 

 

 

▶사용 예:

 

<abbr title="HyperText Markup Language">HTML</abbr>

 

<abbr title="Incorporated">Inc.</abbr>

 

▶실행 화면

 

HTML
Inc.

 

 

주로 title 속성과 함께 사용하는데, title은 abbr에 대한 설명 문구입니다.

 

abbr 태그를 사용하면 firefox, opera에선 기본값으로 점선 밑줄로 표시되며,

 

ie8, safari, chrome은 스타일에 변화가 없습니다..

 

모든 브라우저에서 일관적으로 표시하도록 아래처럼 스타일링을 해주는 것이 좋습니다.

 

abbr {border-bottom: 1px dotted black;}

 

▶실행 화면

 

HTML
Inc.

 

 

 

 

▶브라우저 지원:

 

ie7+, chrome 2.0+, firefox 1.0(1.7)+, opera 1.3+, safari

 

참조 사이트:

 

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr 

 

http://html5doctor.com/the-abbr-element/

 

  

HTML5 퇴화 요소(deprecated, obsolete 차이)

 

html5shiv 삽입하기 (ie6-8에서 html5 적용하기)

 

HTML5 기본 레이아웃