HTML의 기타 태그들

목차

자주 쓰이는 주요한 태그들은 여기로

1. 인라인 텍스트 시맨틱 태그

1.1. abbr

abbr 태그는 abbreviation의 약자로 약어를 나타낸다. title 특성을 통해 약어의 전체 내용을 제공할 수 있다. title 속성은 다른 내용을 포함하면 안된다.

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

acronym 태그도 abbr 태그와 같은 기능을 한다. 하지만 acronym은 더 이상 사용되지 않는다. 따라서 abbr을 사용하도록 하자.

1.2. b

굵은 글씨를 나타낼 수 있다. <strong>과 달리 <b>콘텐츠에는 특별한 중요도가 부여되지는 않는다. CSS를 쓸 수 없는 브라우저에서 굵은 글씨를 나타낼 때 사용하였으나 이제는 거의 쓰이지 않는다.

1.3. bdi

이 태그에 포함된 텍스트를 주변 텍스트와 분리해서 처리하도록 브라우저에 지시한다.

대부분의 언어는 왼쪽에서 오른쪽으로 써지지만, 아랍어와 같은 일부 언어는 오른쪽에서 왼쪽으로 쓴다. 브라우저는 이를 특정 알고리즘으로 처리하는데, 이 태그를 사용하면 브라우저가 해당 텍스트 방향성을 주변 텍스트와 별개로 처리하게 된다.

텍스트 방향성을 미리 알 수 없는 콘텐츠 등을 문서에 포함시킬 때 사용된다.

1.4. bdo

현재 텍스트 쓰기 방향을 덮어쓰고 다른 방향으로 렌더링한다. dir 속성으로 방향을 지정할 수 있는데 ltr(왼쪽에서 오른쪽), rtl(오른쪽에서 왼쪽)을 지정할 수 있다.

<bdo dir="rtl">This text will be written from right to left</bdo>
<bdo dir="rtl">This text will be written from right to left</bdo>
<bdo dir="rtl">This text will be written from right to left</bdo>
<bdo dir="rtl">This text will be written from right to left</bdo>

1.5. data

HTML data 태그는 콘텐츠를 기계가 읽을 수 있는 해석본과 연결한다. 상품 가격이나 상품 번호 등을 기계가 읽을 수 있도록 표시할 수 있다.

시간 혹은 날짜 정보라면 <time> 태그를 사용하는 것이 더 좋다.

1.6. dfn

현재 맥락이나 문장에서 정의하고 있는 용어를 나타낸다. 가장 가까운 <p>, <dt>, <dd>, <section> 조상 요소를 찾아서 그 안에서 정의하고 있는 용어를 나타낸다.

<p>
  <dfn id="def-me">마녀</dfn>는 이 블로그 주인의 닉네임이다.
</p>
<p>
  <dfn id="def-me">마녀</dfn>는 이 블로그 주인의 닉네임이다.
</p>
<p>
  <dfn id="def-me">마녀</dfn>는 이 블로그 주인의 닉네임이다.
</p>
<p>
  <dfn id="def-me">마녀</dfn>는 이 블로그 주인의 닉네임이다.
</p>

내부에 <abbr>태그를 넣으면 그 준말에 해당하는 정의를 하고 있음을 나타낸다.

1.7. kbd

키보드 입력 등 사용자의 입력을 나타낸다. 보통 키보드 입력을 나타내기 위해 사용한다.

<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy the text.</p>
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy the text.</p>
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy the text.</p>
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy the text.</p>

<kbd>요소를 중첩해 사용하여 하나의 입력 안에 작은 부분 입력을 나타낼 수 있다.

1.8. rp, rt, ruby

동아시아 문자 발음을 표기하는 루비 주석을 나타내는 데 쓰인다.

1.9. s

글자에 취소선을 그린다. 단 편집 기록을 나타내야 한다면 del, ins를 대신 사용하는 게 맞다.

1.10. samp

컴퓨터 프로그램 출력의 예시(혹은 인용문)를 나타낸다.

kbd 요소를 samp 요소 안에 배치하면 시스템이 재출력한 입력을 나타낼 수 있다.

1.11. small

덧붙이는 글이나 저작권 표시 등 작은 텍스트 표현. 푸터 등에 많이 쓴다.

1.12. sub, sup

<sub>는 아래 첨자로 나타낼 인라인 텍스트를 지정한다. 기존의 관례상 아래 첨자로 나타나는 각주, 수학 변수의 숫자표기, 화학식 원소를 나타낼 때 등에 쓴다.

<sup>는 위 첨자로 나타낼 인라인 텍스트를 지정한다. 지수 표기, 4th와 같은 서수 표기 등에 사용한다.

1.13. u

글자로 표현하지 않는 주석을 가진 것으로 나타낼 텍스트를 나타낸다.

브라우저에서는 단순한 밑줄로 나타나는데, 이를 밑줄 추가를 위해 사용해서는 안된다. 단순 밑줄을 위해서는 text-decoration CSS를 써야 한다.

철자 오류가 있는 부분을 나타내는 등의 용도로 사용할 수 있다.

<p>이런 방법을 시도해 봤는데 <u>안됬어요</u>.</p>
<p>이런 방법을 시도해 봤는데 <u>안됬어요</u>.</p>
<p>이런 방법을 시도해 봤는데 <u>안됬어요</u>.</p>
<p>이런 방법을 시도해 봤는데 <u>안됬어요</u>.</p>

하지만 대부분의 경우 em, mark, strong, cite, i 등 다른 태그를 사용하는 게 더 좋다.

1.14. var

수학 표현 등에서 변수명을 나타낸다.

1.15. wbr

현재 요소의 줄 바꿈 규칙을 무시하고 브라우저가 줄을 바꿀 수 있는 위치를 나타낸다. 쓸 일은 별로 없지 않을까...