[HTML] 11. div, span 그리고 시맨틱 태그 완전 이해

[HTML] 11. div vs span + 시맨틱 태그까지 (Output 포함, 깊게)

이번 글은 “레이아웃의 재료”를 정리하는 편입니다.
많이 쓰는 div, span이 왜 존재하는지, 그리고 왜 요즘은 시맨틱 태그를 권장하는지까지
화면 출력(Output)으로 직접 확인하면서 이해합니다.

---

1. div란? (블록 요소, 영역 박스)

div는 의미가 없는 “영역 박스”입니다.
큰 틀(컨테이너)을 만들 때 가장 많이 씁니다.

• 블록 요소라서 기본적으로 줄을 바꿉니다.
• 가로 폭을 한 줄 전체(100%)로 쓰는 성향이 있습니다.
• 구조를 “나누기” 위한 박스라서, CSS와 함께 진짜 힘을 발휘합니다.

예제 코드

<div style="border:1px solid #333; padding:10px; margin-bottom:10px;">
  첫 번째 div 박스
</div>

<div style="border:1px solid #333; padding:10px;">
  두 번째 div 박스
</div>

Output

첫 번째 div 박스

두 번째 div 박스

출력을 보면 div는 박스가 위아래로 쌓이면서 자동으로 줄 바꿈이 일어납니다.

---

2. span이란? (인라인 요소, 텍스트 일부)

span도 의미는 없지만, 목적이 다릅니다.
span은 “문장 안에서 특정 부분만” 잡을 때 씁니다.

• 인라인 요소라서 줄을 바꾸지 않습니다.
• 내용만큼만 공간을 차지합니다.
• 텍스트의 일부 강조/색상 변경 등에 많이 쓰입니다.

예제 코드

<p>
  저는 오늘 <span style="background:yellow;">HTML</span>을 공부합니다.
</p>

Output

저는 오늘 HTML을 공부합니다.

출력을 보면 span은 문장 흐름을 깨지 않고, 딱 그 부분만 잡습니다.

---

3. div와 span 차이 한눈에 보기

구분	div	span
기본 성격	블록(block)	인라인(inline)
줄 바꿈	자동 줄 바꿈	줄 바꿈 없음
주 사용 목적	영역(레이아웃) 구성	텍스트 일부/작은 영역

---

4. “div 남발”이 왜 문제일까?

div는 편해서 막 쓰기 쉬운데, 문서 의미가 사라집니다.
예를 들어 아래 구조는 사람이 보면 이해되지만, 기계(검색엔진/스크린리더)가 보면 의미를 알기 어렵습니다.

나쁜 예

<div>사이트 제목</div>
<div>메뉴</div>
<div>본문</div>
<div>푸터</div>

“이게 메뉴인지, 본문인지”는 사람만 감으로 압니다. 그래서 나온 게 시맨틱 태그입니다.

---

5. 시맨틱 태그란? (의미가 있는 구조)

시맨틱(Semantic)은 “의미”라는 뜻입니다.
시맨틱 태그는 “여긴 헤더”, “여긴 내비게이션”, “여긴 본문”처럼 역할이 드러나는 태그입니다.

• header : 상단 영역(로고/제목 등)
• nav : 메뉴/내비게이션
• main : 페이지 핵심 본문
• section : 주제별 구역
• article : 독립적인 글/게시글 단위
• footer : 하단 정보

---

6. 시맨틱 구조 예제 + Output

아래 예제를 보면 “div만 썼을 때”와 “시맨틱을 썼을 때” 화면은 크게 달라지지 않습니다.
대신 문서의 의미가 달라집니다.

예제 코드

<header style="border:1px solid #333; padding:10px; margin-bottom:10px;">
  <h1 style="margin:0;">My Site</h1>
</header>

<nav style="border:1px solid #333; padding:10px; margin-bottom:10px;">
  <a href="#">홈</a> |
  <a href="#">소개</a> |
  <a href="#">게시판</a>
</nav>

<main style="border:1px solid #333; padding:10px; margin-bottom:10px;">
  <section style="border:1px dashed #999; padding:10px; margin-bottom:10px;">
    <h2 style="margin-top:0;">공지사항</h2>
    <article style="border:1px solid #ddd; padding:10px;">
      첫 번째 공지 글
    </article>
  </section>
</main>

<footer style="border:1px solid #333; padding:10px;">
  © 2026 My Site
</footer>

Output

My Site

홈 | 소개 | 게시판

공지사항

첫 번째 공지 글

© 2026 My Site

보이는 건 “박스들”이지만, 실제 HTML 문서의 의미는 다음처럼 명확해집니다.

• header = 상단
• nav = 메뉴
• main = 핵심 본문
• section = 주제 구역
• article = 글 단위
• footer = 하단

---

7. 언제 div를 쓰고, 언제 시맨틱을 쓰나?

• 시맨틱 태그: “이 영역의 역할”이 명확할 때 (header/nav/main/footer/section/article)
• div: 역할 이름이 애매하거나, 단순 레이아웃 묶음/그리드/정렬용 컨테이너가 필요할 때
• span: 문장 안 일부, 작은 조각(텍스트/아이콘/배지 등)

즉, “가능하면 의미 있는 태그 → 부족하면 div로 보완”이 가장 좋은 패턴입니다.

---

8. 핵심 정리

• div는 블록 박스(영역/레이아웃 컨테이너)
• span은 인라인 조각(텍스트 일부)
• 시맨틱 태그는 문서 구조의 의미를 표현
• 화면은 비슷해도, 문서 품질은 시맨틱 구조가 훨씬 좋음

이제 HTML 구조 설계의 핵심을 이해했습니다.
다음 편에서는 이 구조를 바탕으로 간단한 웹페이지를 통째로 만들어보는 종합 예제로 가면 완성됩니다.