HTML small 태그, 작게 쓰는 게 전부일까?
웹 페이지를 만들다 보면 ‘덜 중요한 정보’를 표현해야 할 때가 있습니다.
예를 들어 저작권 안내나 부가 설명 같은 부분이죠. 이런 경우 단순히 글자를 작게 만드는 게 아니라, 의미까지 담아야 합니다.
대부분의 초보자는 글자를 작게 만들기 위해 CSS의 font-size를 사용하지만, 시맨틱 웹을 고려하면 더 좋은 방법이 있습니다.
바로 그 역할을 담당하는 것이 small 태그입니다.
온라인 쇼핑몰에서는 가격 옆에 원가를 작게 표시하거나, 뉴스 기사에서는 출처를 조그맣게 표시할 때도 이 태그를 사용합니다.
이처럼 작은 글씨도 단순한 디자인이 아니라, 문서의 정보 구조를 전달하는 방법이 될 수 있습니다.
Step 1. small 태그의 정확한 역할
small 태그는 단순한 글씨 크기 축소 태그가 아닙니다.
부가 설명, 법적 고지, 저작권 표기 등 덜 중요한 정보를 표현하는 시맨틱 태그입니다.
이 태그를 사용하면 스크린 리더나 접근성 도구에서도 해당 정보가 보조적인 내용임을 인식할 수 있습니다.
<p>© 2025 All Rights Reserved. <small>무단복제 금지</small></p>© 2025 All Rights Reserved. 무단복제 금지
💡 Tip: 기본적으로 글자 크기가 약 80%로 줄어듭니다.
Step 2. small 태그를 언제 쓰면 좋을까?
- 저작권 안내 – 웹사이트 하단의 © 표기와 법적 고지
- 출처 표기 – 블로그나 기사에서 참고한 자료의 출처
- 법적 고지사항 – 구매 약관이나 책임 제한 문구
- 가격 정보의 할인율 표기 – 29,900원 20% 할인
- 부가 설명이나 각주 – 본문 내용의 보충 설명
단순히 글자를 작게 보이게 하는 게 아니라, 문서 구조를 명확하게 표현하는 태그입니다.
Step 3. small 태그 vs CSS font-size 차이점
| 구분 | small 태그 | CSS font-size |
|---|---|---|
| 의미 | 덜 중요한 정보 | 단순 글자 크기 조절 |
| 접근성 | 스크린리더가 보조정보로 인식 | 의미 없음 |
| 사용처 | 저작권, 법적 안내, 출처 | 디자인 목적 |
Step 4. 잘못된 사용법 주의
본문 전체를 small로 쓰면 가독성이 떨어집니다.
모바일 환경에서는 글씨가 너무 작아져서 읽기 어려워질 수도 있고, 접근성에도 문제가 생깁니다.
또한 검색엔진 최적화(SEO) 측면에서도 본문 중요도가 낮게 인식될 수 있습니다.
부가 정보에만 사용하고, 디자인 목적으로는 CSS를 사용하세요.
<p><small>이렇게 본문 전체를 small로 감싸면 ❌</small></p>Step 5. small 태그에 CSS 적용하기
small 태그에도 CSS를 적용해서 더 예쁘게 꾸밀 수 있어요.
<small style="color: #888; font-style: italic;">부가 설명입니다.</small>부가 설명입니다.
정리하며
small 태그는 그냥 글자를 작게 만드는 태그가 아닙니다.
부가적인 정보나 덜 중요한 내용을 표현할 때 의미까지 담아서 사용하는 시맨틱 태그입니다.
접근성과 가독성을 고려해, 필요한 부분에만 적절히 사용하는 것이 좋습니다.
의미를 알고 사용하면 더 깔끔하고 구조적인 웹 페이지를 만들 수 있습니다.
앞으로도 이런 시맨틱 태그를 하나씩 익혀가면서, 진짜 프로 개발자의 HTML 문서를 만들어보세요!