# 시맨틱 HTML 완벽 가이드: div 지옥에서 벗어나는 방법 > 시맨틱 HTML의 핵심 개념부터 실전 활용법까지. header, nav, main, article 등 올바른 사용법과 접근성, SEO 향상 효과를 알아봅니다. **Published:** 2025-12-23 | **Updated:** 2025-12-23 --- ## 들어가며 웹 개발을 하다 보면 이런 코드를 마주하게 됩니다: ```html

제목

내용...

``` 겉으로 보기엔 문제없어 보이죠? 하지만 이 코드에는 심각한 문제가 숨어 있어요. **스크린 리더 사용자는 이 페이지의 구조를 전혀 파악할 수 없습니다.** 검색 엔진도 마찬가지고요. 사실 제가 처음 개발 일을 시작하던 15년쯤 전에는 이런 일도 있었어요. 기존 웹사이트를 리뉴얼하라는 지시를 받고 코드를 열어봤는데, `` 태그가 겹겹이 중첩되어 있더라고요. 진짜 초보 개발자 시절이라 울면서 작업하던 기억이 나네요 😂 예전에는 테이블로 레이아웃을 잡는 게 흔한 일이었거든요. 지금 생각하면 그때의 테이블 지옥이나, 요즘의 div 지옥이나... 본질은 같아요. **의미 없는 태그로 구조를 만들면 결국 누군가는 고생하게 됩니다.** {{< img src="images/contents/html-code-screen.jpg" alt="모니터 화면에 표시된 HTML 코드 - 시맨틱 HTML은 코드에 의미를 부여합니다" caption="사진: Pankaj Patel / Unsplash" >}} 이 글에서는 **시맨틱 HTML**이 무엇인지, 왜 중요한지, 그리고 어떻게 올바르게 사용하는지 실전 예제와 함께 알아보겠습니다. ## 시맨틱 HTML이란? ### 의미 있는 마크업 **시맨틱(Semantic)**은 "의미론적"이라는 뜻이에요. 시맨틱 HTML은 **태그 자체가 콘텐츠의 의미를 설명하는 HTML**을 말합니다. ```html

사이트 제목

``` 둘 다 시각적으로는 똑같이 보일 수 있어요. 하지만 브라우저, 스크린 리더, 검색 엔진에게 전달하는 정보는 완전히 다릅니다. - `

`: "여기에 뭔가가 있어요" (의미 없음) - `

`: "여기는 머리글 영역이에요" (명확한 의미) ### 왜 시맨틱 HTML이 중요할까요? {{< img src="images/contents/accessibility-diversity.jpg" alt="다양한 사람들이 컴퓨터를 사용하는 모습 - 시맨틱 HTML은 모든 사용자를 위한 것입니다" caption="사진: Vitaly Gariev / Unsplash" >}} #### 1. 접근성 (Accessibility) 스크린 리더는 시맨틱 태그를 통해 페이지 구조를 파악합니다: - `

`: "여기는 네비게이션입니다" - `

`: "여기가 주요 콘텐츠입니다" - `

`: "여기는 부가 정보입니다" 시각장애인 사용자는 이 정보를 바탕으로 원하는 콘텐츠로 바로 이동할 수 있어요. #### 2. SEO (검색 엔진 최적화) 구글, 네이버 같은 검색 엔진은 시맨틱 태그를 통해 콘텐츠의 중요도를 파악합니다: - `

` 안의 내용 → 핵심 콘텐츠 - `

` 안의 내용 → 부가 정보 - `

semantic-tagging)