HTML의 기타 태그들

2023. 06. 28

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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