abbr, address, bdo

출처 : 위키백과

1. abbr

<p>2022년 신조어 중 <abbr title="무엇이든 물어보세요">무물보</abbr>라는 말이 있다.</p>

 : 약어(abbreviation)를 뜻하는 태그로 줄임말, 또는 머리글자를 나타냅니다. 선택 속성인 title을 사용하면 줄임말의 전체 뜻이나 설명을 확인할 수 있습니다. 용어나 개념에 익숙하지 않은 사람, 언어를 새로 접한 사람, 인지력 문제를 겪고 있는 사용자에게 큰 도움이 됩니다.

title 속성이 적용된 텍스트 위에 마우스를 올릴 때

1.1 dfn

<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>

 : <dfn>는 정의(definition)를 뜻하는 태그로 정의할 줄임말을 dfn으로 감싸고

, <abbr>로 해당 줄임말의 정식 정의를 나타낼 수 있습니다. 아래 결과물을 보면 정의할 단어 HTML을 <dfn>으로 감싸주고, <abbr>에 title 속성으로 "HyperText Markup Language"로 정식 정의를 나타냈습니다.  

출처 : mdn abbr

1.2 title

<p title="조용필과 박진영">JYP는 2명의 유명 아티스트를 뜻한다.</p>

 : 위의 예시처럼 사실 <title>은 전역속성 태그라 어떤 태그에서나 사용하고 마우스를 갖다대면 뜻을 출력합니다. 하지만 시멘틱태그의 관점에서 <abbr>의 title 속성은 더욱 깊은 의미를 가집니다.

<p> 속성에 title을 부여했을 때

2. address

<address>
  You can contact author at <a href="http://www.somedomain.com/contact">
  www.somedomain.com</a>.<br>
  If you see any bugs, please <a href="mailto:webmaster@somedomain.com">
  contact webmaster</a>.<br>
  You may also want to visit us:<br>
  Mozilla Foundation<br>
  331 E Evelyn Ave<br>
  Mountain View, CA 94041<br>
  USA
</address>

 : 위의 예시처럼  <address>는 주소 정보를 입력할 때 사용합니다. 이때 물리적 주소, URL, 이메일, 전화번호, SNS, 좌표 등 어떤 정보라도 포함할 수 있습니다. 고 마우스를 갖다대면 뜻을 출력합니다. 

<p> 속성에 title을 부여했을 때

3. bdo

<p>이 글은 왼쪽에서 오른쪽으로 렌더링됩니다.</P>
<p><bdo dir="rtl">이 글은 오른쪽에서 왼쪽으로 렌더링됩니다.</bdo></p>

 : 양방향 재정의(bidirectional override)의 약자로 현재 텍스트의 방향을 다른 방향으로 렌더링 할 때 사용합니다.

bdo 예시

3.1 dir

 : 방향(direction)의 약자로 텍스트 쓰기 방향을 설정합니다.

• ltr: 텍스트를 왼쪽에서 오른쪽으로 써야 함을 나타냅니다. (기본값)
• rtl: 텍스트를 오른쪽에서 왼쪽으로 써야 함을 나타냅니다.

---

정리

 : 자주 사용하지는 않지만 독특한 기능을 하는 태그들입니다.

참고자료

https://developer.mozilla.org/ko/docs/Web/HTML/Element/abbr

<abbr> - HTML: Hypertext Markup Language | MDN

https://developer.mozilla.org/ko/docs/Web/HTML/Element/address

<address> - HTML: Hypertext Markup Language | MDN

https://developer.mozilla.org/ko/docs/Web/HTML/Element/bdo

<bdo>: 양방향 텍스트 재정의 요소 - HTML: Hypertext Markup Language | MDN