html 첨자 태그? sup·sub 제대로 안 쓰면 검색에도 안 뜹니다!

콘텐츠 목차

HTML sub과 sup 태그, 아래·위 첨자 제대로 쓰기

웹 페이지를 만들다 보면 단순한 글씨 표현을 넘어서, 위 첨자와 아래 첨자를 써야 할 때가 있습니다.
예를 들어, 수학 공식의 제곱 표현이나 화학식의 분자 수, 단위 표기에서 이런 경우가 자주 나오죠.
많은 사람들이 CSS로 글자 크기를 줄이고 위치를 조절해서 해결하려고 하지만, 시맨틱 웹의 관점에서 보면 이건 좋은 방법이 아닙니다.

HTML에서는 이런 상황을 위해 sup 태그와 sub 태그를 제공합니다. 이 두 태그를 사용하면 단순히 글자의 모양뿐 아니라 문서의 의미까지 명확하게 전달할 수 있습니다.
이번 글에서는 sup과 sub 태그의 정확한 사용법과 예제를 함께 살펴보겠습니다.

Step 1. sup 태그란?

sup은 super script의 줄임말입니다. 말 그대로 글자를 위로 올려주는 첨자를 표현합니다.
주로 수학 공식에서 제곱을 표현하거나, 서수(1st, 2nd)를 표현할 때 사용하죠.

코드

E = mc<sup>2</sup>

렌더링 결과

E = mc²

이렇게 쓰면 단순히 숫자가 올라가 보이는 것뿐만 아니라, 문서 구조상 ‘윗첨자’라는 의미까지 전달할 수 있습니다.
이는 검색 엔진이나 스크린 리더 등에서도 정확하게 인식되기 때문에 접근성 측면에서도 훨씬 좋습니다.

Step 2. sub 태그란?

sub은 sub script의 줄임말입니다. 이번에는 글자를 아래로 내려주는 첨자를 표현합니다.
주로 화학식에서 분자 수를 표현하거나, 수식의 인덱스, 단위 표기에서 사용됩니다.

코드

H<sub>2</sub>O

렌더링 결과

H₂O

화학식에서 2가 아래로 내려가서 물의 화학식을 올바르게 표현할 수 있죠.
이 역시 단순한 디자인 효과가 아니라, 시맨틱하게 ‘아랫첨자’라는 정보를 정확하게 전달합니다.

Step 3. 왜 시맨틱하게 써야 할까?

sup과 sub 태그는 단순히 글자를 올리고 내리는 것이 아닙니다.
HTML5의 시맨틱 웹 기준에 따라, 정보의 의미까지 전달해야 합니다.
CSS로 vertical-align 속성을 이용해 비슷하게 만들 수 있지만, 이 경우 검색 엔진이나 스크린 리더가 첨자로 인식하지 못합니다.

구분	sup/sub 태그	CSS 처리
의미 전달	O (윗첨자/아랫첨자 인식)	X (단순 위치 변경)
접근성	O (스크린 리더 인식)	X
유지보수	O (표준 구조)	X (디자인 코드 복잡)

Step 4. 자주 쓰는 예제 모음

sup과 sub 태그는 다양한 분야에서 자주 사용됩니다.
모바일에서도 보기 쉽도록 리스트 형식으로 구체적인 해설과 함께 정리해보겠습니다.

✔️ 주로 사용되는 6가지 경우

1. 수학 공식
제곱, 세제곱, 지수 함수 표현에 사용합니다. 수식의 정확한 구조 전달을 위해 sup 태그를 사용합니다.
코드
```
a2 + b2 = c2
```
렌더링 결과

a² + b² = c²
2. 화학식
분자의 개수를 표기할 때 사용합니다. sub 태그를 사용하면 화학식을 구조적으로 정확히 표현할 수 있습니다.
코드
```
H2O, CO2
```
렌더링 결과

H₂O, CO₂
3. 단위 표기
면적, 부피, 가속도 등 물리적 단위를 나타낼 때 윗첨자 표기가 필요합니다.
코드
```
m2, m3, m/s2
```
렌더링 결과

m², m³, m/s²
4. 통계와 데이터
변수의 첨자나 인덱스를 표현할 때 사용합니다. 예를 들어 X_i는 i번째 X값을 의미합니다.
코드
```
Xi, Yn
```
렌더링 결과

X_i, Y_n
5. 주석/각주
문서에서 각주를 표기할 때 사용합니다. 화면 상단에 숫자를 올려서 참고 내용을 연결할 수 있습니다.
코드
```
단어1
```
렌더링 결과

단어¹
6. 학술 수식
총합 기호(Σ) 등에서 상한과 하한을 표현할 때 사용합니다. 이때 sub과 sup을 함께 사용합니다.
코드
```
Σi=1n Xi
```
렌더링 결과

Σ_i=1ⁿ X_i

정리하며

sup과 sub 태그는 단순히 글자를 위아래로 움직이는 태그가 아닙니다.
윗첨자와 아랫첨자를 정확하게 표현하고, 문서의 의미를 시맨틱하게 전달하는 중요한 태그입니다.

수학, 화학, 단위 표기, 주석 등에서 자주 사용되며, CSS로 비슷하게 흉내낼 수 있지만 의미까지 전달되지는 않습니다.
앞으로는 위아래 첨자가 필요할 때 꼭 sup과 sub을 사용하세요!

시맨틱 태그를 이해하고 제대로 활용하는 것이 진짜 웹 개발자의 첫걸음입니다.