<sub> 태그의 정의 및 사용법
<sub> 태그는
아래 첨자(subscript)를 나타내는 태그입니다.
사용법 참고 사항
- 대부분의 브라우저에서는 기본으로 작은 텍스트로 표시되며 기준선을 낮춰 렌더링됩니다.
<sub>태그는 단순히 표시나 모양 목적 등의 시각적 표현을 위한 것이 아니라,- 타이포그래피적 규칙이나 관례(Typographical conventions)상 아래 첨자로 나타내는 각주 번호, 변수 첨자, 화학식 등의 의미를 맞추기 위해 사용해야 합니다.
- 이 태그를 사용함으로써 콘텐츠가 이러한 의미로 분명해질 경우에만 사용해야 합니다.
사용 예제
<sub> 태그는 타이포그래피적 규칙이나 관례인 각주 번호나 변수 첨자, 화학식을 위한 아래 첨자와 같은 의미를 부여하기 위해 사용해야 합니다.
각주 번호(footnote numbers)로 사용
전통적으로 각주는 아래 첨자로 표시되는 숫자를 사용하여 표시됩니다. 이는 <sub>의 일반적인 사용 사례입니다.
각주(脚註, footnote)는 서책이나 논문 등의 문서에서 어떤 한 쪽에 포함된 하나 또는 그 이상의 주문(註文)들을 같은 쪽의 하단에 달아 놓은 것, 또는 그런 식으로 주를 처리하는 방법을 말한다.
출처 - 위키백과: 각주
변수 첨자로 사용
수학에서 변수 첨자(variable subscript)는 동일한 기본 변수에 서로 다른 색인이나 번호를 부여하여 여러 변수를 나타내는 방법입니다.
화학식에 사용
잠깐만!
<sub> 태그는 여기에서 사용 예제로 활용한 각주 번호나 변수 첨자, 화학식의 사용만으로 국한되지 않습니다. 타이포그래피적 규칙이나 관례로 사용되는 모든 아래 첨자에 사용될 수 있습니다.
주의할 점
<sub> 태그의 용도는 타이포그래피적 규칙이나 관례인 각주 번호나 변수 첨자, 화학식을 위한 아래 첨자와 같은 의미나 규칙을 부여하기 위해 사용해야 합니다. 단순히 표시나 모양 목적 등의 시각적 표현을 위한 것이 아니라, 이 태그를 사용함으로써 콘텐츠가 이러한 의미로 분명해질 경우에만 사용해야 한다는 것입니다.
'변수 첨자로 사용 예제'를 다시 살펴보겠습니다. 만약에 <sub> 태그가 없다면 그 의미가 변경될 것입니다.
이 코드를 <sub>를 제거하고 사용해 보겠습니다.
이럴 경우 의미가 변경됩니다. X축을 따라 수평 좌표의 위치는 x1, ..., xn으로 표현됩니다."는 단순히 x1, ..., xn이라는 문자의 나열을 나타냅니다.
만약 특별한 아래 첨자의 의미를 갖지 않고 그냥 문자열로 해석된다면, 이는 수학적인 표기법이 아닌 단순한 텍스트로 인식될 것입니다. 아래 첨자의 사용은 특별한 의미를 부여하고 있어서 중요한 것입니다.
물론, 이건 '스타일 문제이지'라고 말할 수도 있지만, 웹 접근성을 위한 스크린 리더 등을 고려한다면 단순 스타일의 문제가 아닙니다. 그냥 의미가 변경된 것입니다.
다음의 예제는 <sub> 태그를 사용하지 않고 <span> 태그를 사용해서 단순히 시각적 표현을 위해 CSS로 스타일한 것입니다.
이처럼 단순히 시각적 표현을 위해 CSS로 스타일로 <sub> 태그를 대체해서 사용하지 마세요. 단순히 표시나 모양 목적 등의 시각적 표현을 하더라도 의미가 변경됩니다.
스타일만을 놓고 보자면 이는 수학적인 표기법처럼 보이지만, 이는 권장하는 마크업이 아닙니다. HTML은 시각적 스타일과 더불어 웹 접근성을 위한 스크린 리더나 보조 기구 등을 고려해야 할 뿐만 아니라, HTML에서는 HTML에 명시되어 있는 다양한 의미의 태그들이 있는데, 콘텐츠에 가장 적절한 태그를 사용하는 것을 권장합니다.
브라우저 호환성
| 속성 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
|---|---|---|---|---|
<sub>
|
1 | 12 | 1 | 4 |
명세서
| 명세서 사양 | |
|---|---|
<sub>
|
HTML Standard #the-sub-and-sup-elements |