<sup> 태그의 정의 및 사용법
<sup> 태그는
위 첨자(superscript)를 나타내는 태그입니다.
사용법 참고 사항
- 대부분의 브라우저에서는 기본으로 작은 텍스트로 표시되며 기준선을 높여 렌더링됩니다.
<sup>태그는 단순히 표시나 모양 목적 등의 시각적 표현을 위한 것이 아니라,- 타이포그래피적 규칙이나 관례(Typographical conventions)상 위 첨자로 나타내는 지수나 서수 등의 의미를 맞추기 위해 사용해야 합니다.
- 이 태그를 사용함으로써 콘텐츠가 이러한 의미로 분명해질 경우에만 사용해야 합니다.
사용 예제
<sup> 태그는 타이포그래피적 규칙이나 관례인 지수나 서수와 같은 의미나 규칙을 부여하기 위해 사용해야 합니다.
지수(exponent)로 사용
코드 부연설명
<var> 태그는 변수를 나타냅니다.
이 태그는 수학적 표현식이나 실제 변수, 물리적 양을 나타내는 기호로 사용됩니다.
서수(ordinal number)로 사용
잠깐만!
<sup> 태그는 여기에서 사용 예제로 활용한 지수나 서수의 사용만으로 국한되지 않습니다. 타이포그래피적 규칙이나 관례로 사용되는 모든 위 첨자에 사용될 수 있습니다.
주의할 점
<sup> 태그의 용도는 타이포그래피적 규칙이나 관례인 지수나 서수와 같은 의미나 규칙을 부여하기 위해 사용해야 합니다. 단순히 표시나 모양 목적 등의 시각적 표현을 위한 것이 아니라, 이 태그를 사용함으로써 콘텐츠가 이러한 의미로 분명해질 경우에만 사용해야 한다는 것입니다.
'아인슈타인의 상대성 이론 예제'를 다시 살펴보겠습니다. 만약에 <sup> 태그가 없다면 그 의미가 변경될 것입니다.
'아인슈타인의 상대성 이론 예제'를 <sup> 태그 없이 마크업해 보겠습니다.
이 경우 제곱근을 의미하는 2가 곱하기 2로 변경됩니다. 물론, 이건 '스타일 문제이지'라고 말할 수도 있지만, 웹 접근성을 위한 스크린 리더 등을 고려한다면 단순 스타일의 문제가 아닙니다. 그냥 의미가 변경된 것입니다.
다음의 예제는 <sup> 태그를 사용하지 않고 <span> 태그를 사용해서 단순히 시각적 표현을 위해 CSS로 스타일한 것입니다.
이처럼 단순히 시각적 표현을 위해 CSS로 스타일로 <sup> 태그를 대체해서 사용하지 마세요. 단순히 표시나 모양 목적 등의 시각적 표현을 하더라도 의미가 변경됩니다.
그럼, 서수 사용에 있어서 '다섯 번째의 영어식 서수 예제'로 다시 살펴보겠습니다.
'다섯 번째의 영어식 서수 예제'를 <sup> 태그 없이 마크업해 보겠습니다.
위 코드를 보면 <sup> 태그가 없어도 전혀 문제가 되지 않습니다. 틀린 문법도 아닙니다.
하지만, HTML에서는 HTML에 명시되어 있는 다양한 의미의 태그들이 있는데, 콘텐츠에 가장 적절한 태그를 사용하는 것을 권장합니다.
타이포그래피적 규칙이나 관례상 서수는 <sup> 태그를 사용하도록 하고 있으므로, 서수에 <sup> 태그를 사용하는 것이 웹 표준에 더 적합합니다. 그래야 th가 서수로써의 의미로 더 분명해지기 때문입니다.
브라우저 호환성
| 태그 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
|---|---|---|---|---|
<sup>
|
1 | 12 | 1 | 4 |
명세서
| 명세서 사양 | |
|---|---|
<sup>
|
HTML Standard #the-sub-and-sup-elements |