이번 문서의 목표: 이 문서를 다 읽으면 텍스트 서식 태그를 의미에 맞게 구분해 쓰고, 시맨틱 태그가 왜 필요한지 설명하며, 헷갈리기 쉬운 태그 쌍의 차이를 시험형으로 구분할 수 있다.
왜 시맨틱을 따로 배우는가
03편에서 문서의 기본 뼈대와 제목·문단·목록·링크를 배웠다. 그런데 실무와 시험 모두에서 자주 헷갈리는 지점은 “겉보기에는 똑같이 생긴 태그인데 의미가 다른 경우”다. 예를 들어 화면에 똑같이 굵은 글씨로 보이는 태그가 두 개 있는데, 하나는 단순히 “굵게 보이라”는 뜻이고 다른 하나는 “이 내용이 중요하다”는 뜻이라면 어떨까? 이 차이를 시맨틱(semantic, 의미론적)이라고 부르며, 독학사 시험은 이 미묘한 의미 차이를 정확히 구분하는 문제를 즐겨 낸다. 이 편에서는 텍스트 서식 태그와 문서 구조를 나타내는 시맨틱 태그를 짝지어 비교하며 정리한다.
텍스트 서식 태그 — 겉모양이 같아도 의미는 다르다
쉽게 말하면: 시맨틱 태그는 “이 글자가 왜 강조됐는지” 이유를 담은 태그이고, 겉모양만 바꾸는 태그는 이유 없이 모양만 바꾸는 태그다.
다음 두 쌍의 태그는 기본적으로 브라우저 화면에서 똑같은 모양으로 보이지만, 담고 있는 의미가 다르다.
| 겉모양 | 의미 없이 모양만 바꾸는 태그 | 의미를 담은(시맨틱) 태그 |
|---|---|---|
| 굵은 글씨 | b(bold, 그냥 굵게) | strong(내용상 중요함을 강조) |
| 기울임 글씨 | i(italic, 그냥 기울임) | em(emphasis, 문맥상 강조해서 읽어야 함) |
<p>이 약은 <strong>반드시</strong> 식후에 복용해야 합니다.</p>
<p>나는 <em>정말로</em> 그 영화를 좋아한다.</p>
<p>이 단어는 <b>디자인상</b> 굵게 표시했을 뿐, 특별히 중요한 내용은 아니다.</p>
<p>학명 표기 등 관례적으로 <i>Homo sapiens</i>처럼 기울여 쓰는 경우도 있다.</p>strong과 em은 스크린 리더(화면 낭독 프로그램, 시각 장애인이 음성으로 웹을 이용할 때 쓰는 보조 기술) 같은 도구가 “이 부분은 중요하니 강조해서 읽어야 한다”는 신호로 해석할 수 있는 반면, b와 i는 순수하게 시각적인 스타일 지정일 뿐 그런 의미를 전달하지 않는다. 즉 b와 i를 쓴다고 문법이 틀린 것은 아니지만, “왜 강조되는지”를 전달하고 싶다면 strong과 em을 쓰는 것이 시맨틱하게 옳은 선택이다.
자주 틀리는 점: “b와 strong은 완전히 똑같은 태그다”라고 서술하면 틀린 진술이다. 렌더링 결과(굵게 보이는 것)는 같아도, 의미 전달 여부가 다르다는 것이 핵심 차이다.
그 밖에 자주 쓰이는 텍스트 서식 태그도 함께 정리한다.
| 태그 | 의미 |
|---|---|
mark | 형광펜으로 칠한 것처럼 하이라이트 표시. 검색 결과에서 일치한 단어를 표시할 때 자주 쓴다 |
small | 저작권 표기, 부가 설명처럼 작은 글씨로 표시할 내용 |
del | 삭제된(더 이상 유효하지 않은) 내용임을 표시. 화면에는 취소선으로 보임 |
ins | 새로 삽입된 내용임을 표시. 화면에는 밑줄로 보임 |
sub | 아래첨자(예: 화학식 H와 2O에서 2) |
sup | 위첨자(예: 제곱 표기에서 지수 부분) |
br | 줄바꿈만 삽입하는 빈 요소(단락을 새로 만드는 것이 아니라 같은 문단 안에서 줄만 바꿀 때 사용) |
자주 틀리는 점: 문단을 새로 만들고 싶을 때
p를 여러 번 쓰지 않고br만 연달아 쓰는 것은 잘못된 사용법으로 자주 출제된다.br은 “같은 의미 단위 안에서 줄만 바꾸는” 용도이고, 의미상 별개의 문단이라면p로 나누는 것이 옳다.
시맨틱 구조 태그 — div와 무엇이 다른가
문서를 영역별로 나눌 때 예전에는 의미 없는 상자 태그인 div(division, 구획)만 써서 class나 id 속성으로 구분했다. HTML5부터는 그 영역이 “어떤 역할을 하는 영역인지” 이름 자체로 알려주는 시맨틱 요소(semantic element)가 추가됐다.
| 시맨틱 태그 | 의미 |
|---|---|
header | 문서 전체 또는 특정 영역의 머리말(로고, 제목, 소개 등) |
nav | 다른 페이지·구역으로 이동하는 내비게이션(주요 링크 모음) 영역 |
main | 문서에서 가장 핵심이 되는 본문 내용. 문서 안에 하나만 있어야 한다 |
section | 주제로 묶이는 하나의 구획(예: “소개”, “특징” 처럼 제목이 붙는 단위) |
article | 독립적으로 배포·재사용될 수 있는 완결된 콘텐츠(블로그 글, 뉴스 기사 등) |
aside | 본문과 직접적인 관련은 적지만 참고할 만한 부가 정보(사이드바, 광고 등) |
footer | 문서 전체 또는 특정 영역의 꼬리말(저작권, 연락처 등) |
<body>
<header>
<h1>독학사 웹 프로그래밍</h1>
<nav>
<a href="#html">HTML</a>
<a href="#css">CSS</a>
</nav>
</header>
<main>
<article>
<h2>HTML5 시맨틱 태그란</h2>
<section>
<h3>등장 배경</h3>
<p>과거에는 div와 class 이름만으로 영역의 역할을 구분했다.</p>
</section>
</article>
<aside>
<p>관련 편: 03편 HTML 문서 구조</p>
</aside>
</main>
<footer>
<p>저작권 안내</p>
</footer>
</body>쉽게 말하면: div는 “이름 없는 빈 상자”이고, header·nav·main·section·article·aside·footer는 “상자 겉면에 용도가 이미 적혀 있는 상자”다.
시맨틱 태그를 쓰든 div를 쓰든 브라우저 화면에 보이는 기본 모양(레이아웃)은 거의 동일하다(둘 다 기본적으로 블록 요소다). 그런데도 시맨틱 태그를 쓰는 이유는 다음과 같다.
- 접근성(accessibility): 스크린 리더 사용자가 “본문으로 바로 이동”, “내비게이션으로 이동” 같은 탐색을 할 수 있다.
- 검색 엔진 최적화(SEO, Search Engine Optimization): 검색 엔진이 문서에서 어느 부분이 핵심 본문인지 더 정확히 파악할 수 있다.
- 코드 가독성: 개발자가
class="header"처럼 이름을 직접 짓지 않아도 태그 이름만으로 역할을 알 수 있다.
자주 틀리는 점: “시맨틱 태그를 쓰면 레이아웃(배치 모양)이 자동으로 좋아진다”고 오해하는 보기가 나온다. 시맨틱 태그는 의미를 전달하는 것이지 레이아웃을 자동으로 예쁘게 만들어 주지 않는다. 레이아웃은 여전히 CSS(07편)의 몫이다.
section과 article의 구분 — 자주 나오는 함정
section과 article은 둘 다 내용을 구획으로 나누는 블록 요소라 헷갈리기 쉽다. 구분 기준은 “독립적으로 떼어내 다른 곳에 재배치해도 의미가 통하는가”이다.
article은 블로그 글 하나, 뉴스 기사 하나처럼 그 자체로 완결되어 다른 사이트에 그대로 가져다 놔도 내용이 이해되는 단위다.section은 하나의 문서 안에서 주제별로 묶은 구획일 뿐, 따로 떼어내면 맥락이 사라지는 경우가 많다(예: 어떤 글의 “결론” 부분만 떼어내면 앞뒤 맥락 없이는 이해하기 어렵다).
또한 article 안에 여러 개의 section이 들어갈 수도 있고(긴 기사 하나가 여러 소주제로 나뉘는 경우), 반대로 section 안에 여러 개의 article이 들어갈 수도 있다(예: “최신 글 모음” section 안에 여러 개의 블로그 글 article이 나열되는 경우). 즉 두 태그 사이에 절대적인 포함 순서가 정해져 있는 것이 아니라, 내용의 성격에 따라 선택하는 것이 핵심이다.
시맨틱 태그와 div/span 구분 실습
다음 예제로 시맨틱 태그와 div가 화면에는 비슷하게 보이지만 태그 이름이 다르다는 것을 직접 확인해 보자.
핵심 정리
- b·i는 의미 없이 모양만 바꾸는 태그이고, strong·em은 “왜 강조되는지” 의미를 담은 시맨틱 태그다. 화면에 보이는 모양은 비슷해도 전달하는 의미가 다르다.
- mark·small·del·ins·sub·sup은 각각 하이라이트·작은 글씨·삭제·삽입·아래첨자·위첨자라는 고유한 의미를 가진 텍스트 서식 태그다.
- header·nav·main·section·article·aside·footer는 div와 달리 태그 이름 자체가 영역의 역할을 알려주는 시맨틱 구조 태그다.
- 시맨틱 태그는 접근성과 검색 엔진 최적화에 도움을 주지만, 레이아웃(배치 모양)을 자동으로 바꿔 주지는 않는다.
- section과 article의 구분 기준은 “독립적으로 떼어내도 의미가 통하는가”이며, 서로 포함 순서가 고정되어 있지 않다.
마무리 복습
참고 자료
텍스트 서식·시맨틱 태그의 더 많은 실전 예제는 이 사이트의 HTML 기초 과목에서 확인할 수 있다. 이 편은 독학사 2단계 출제 범위에 맞춘 핵심 비교에 집중한다.