시맨틱 태그란?
시맨틱(semantic)이란 “의미의” 또는 “의미론적인” 이라는 뜻입니다. 따라서 시맨틱 태그란 태그 이름 자체에 특정한 의미를 담고 있어, 해당 요소가 어떤 역할을 하는지 알려주는 HTML 태그를 말합니다.
여러 개의 병마다 라벨을 붙여 내용물을 알아보기 쉽게 한 모습.
HTML의 시맨틱 태그는 이처럼 각 콘텐츠 블록에 의미의 “라벨”을 붙여주는 역할을 합니다.
예를 들어 <header> 태그를 보면 “머리글 부분”임을 바로 알 수 있고, <nav> 태그는 “길잡이 내비게이션 메뉴”를 나타냅니다.
이처럼 태그 이름만 보고도 그 안에 담길 콘텐츠의 성격을 짐작할 수 있는 태그들이 시맨틱 태그입니다.
과거 HTML4 시절에는 콘텐츠의 구획을 나눌 때 의미 없는 <div> 태그에 클래스나 아이디를 붙여 구분하곤 했습니다. 예를 들면 페이지 헤더를 <div id="header">로, 푸터를 <div id="footer">로 작성하는 식이었습니다. 하지만 이러한 방식은 “무의미한 <div> 태그 난무”, 일명 div 태그 지옥을 만들어 코드 가독성을 떨어뜨렸습니다.
다행히 HTML5부터는 다양한 시맨틱 태그들이 도입되어, 더 이상 모든 것을 <div>로만 작성하지 않아도 되게 되었습니다. 이제는 의미가 분명한 태그들로 문서 구조를 표현할 수 있어 코드의 구조와 의미를 한눈에 파악할 수 있습니다.
시맨틱 태그로 구조를 잡는법
시맨틱 태그를 활용한 웹 페이지 구조의 예시 다이어그램.
<header>(주황색)은 머리글, <nav>(회색)는 내비게이션, <main>(연노랑 배경)은 주요 콘텐츠 영역이며
그 안에 <article>(연노랑 박스)와 <aside>(핑크 박스)가 나란히 배치되어 있습니다. 마지막으로 <footer>(연두색)는 바닥글 영역입니다.
<header>
<h1>사이트 제목 또는 로고</h1>
</header>
<nav>
<!-- 내비게이션 메뉴 링크들 -->
<a href="#">Home</a> | <a href="#">About</a> | <a href="#">Contact</a>
</nav>
<main>
<article>
<h2>기사 또는 포스트 제목</h2>
<p>이곳은 본문 콘텐츠를 담는 <strong>article</strong> 영역입니다. 독립적인 글이나 게시물 등을 나타냅니다.</p>
</article>
<aside>
<h3>관련 정보</h3>
<p>이곳은 <strong>aside</strong> 영역으로, 본문과 간접적으로 관련된 부가 콘텐츠를 표시합니다.</p>
</aside>
</main>
<footer>
© 2025 내 웹사이트 – All rights reserved.
</footer>위 코드와 그림은 시맨틱 태그들로 페이지의 큰 틀을 나눈 모습입니다.
<header>[헤더] : 문서나 섹션의 머리말 부분을 정의합니다. 주로 사이트의 제목, 로고, 소개글, 주요 메뉴 등이 포함됩니다. 페이지 최상단에 한 번만 쓰이는 것이 일반적이지만, 경우에 따라 각 섹션이나<article>내에 자체적인<header>를 둘 수도 있습니다.
<nav>[내비게이션] : 주요 탐색 링크 모음을 나타냅니다. 주로 상단 메뉴바, 사이드바 메뉴, 페이지 내 목차 등의 영역에 사용됩니다.<nav>태그 안에는 대개<ul><li>리스트로 메뉴를 구성하거나 여러 개의<a>링크를 배치합니다.
하나의 문서에 여러<nav>를 둘 수도 있지만, 주요 메뉴 영역에만 사용하는 것이 좋습니다.
<main>[메인 콘텐츠] : 문서의 주요 콘텐츠 영역을 나타냅니다. 페이지에서 핵심적인 내용이 담기는 부분으로, 사이트 공통요소나 사이드 내용은 제외한 본문에 해당합니다.
일반적으로 한 페이지에<main>은 하나만 사용하며, 보통 기사, 글, 상품정보 등 해당 페이지의 주된 콘텐츠 블록들을 포함합니다.
<section>[섹션] : 주제별로 묶은 콘텐츠의 구획을 정의합니다. 예를 들어 하나의 웹 페이지 안에 여러 개의 챕터나 섹션으로 나눌 때 사용합니다. 각<section>에는 보통 제목이 있어 해당 섹션의 주제를 나타냅니다.
<section>은 논리적으로 관련있는 콘텐츠를 그룹짓는 용도로, 단순히 스타일이나 레이아웃 목적으로 묶을 땐 의미 없는<div>를 쓰는 편이 낫습니다.
<article>[기사]: 독립적인 콘텐츠 조각을 나타냅니다. 개별 기사, 블로그 포스트, 댓글, 상품 소개 등 문맥상 독립적으로 떼어내어도 의미가 통하는 콘텐츠에 사용합니다.
예를 들어 블로그 글 목록 페이지에서 각 글은<article>로 감쌀 수 있고, 뉴스 사이트에서 기사 하나하나를<article>로 표현할 수 있습니다.
<article>안에는 자체적으로<header>나<footer>를 포함하여 그 글의 부제나 작성자, 꼬리말 정보를 담기도 합니다.
-
<aside>[보조 콘텐츠]: 메인 콘텐츠와 간접적으로 관련된 콘텐츠를 나타냅니다.
흔히 사이드바와 같이 본문 옆에 배치되는 부가 정보 영역에 사용하며, 광고 배너, 관련 링크 목록, 참고 자료, 프로필 요약 등이 이에 해당합니다. -
<footer>[푸터]: 문서나 섹션의 바닥글(footer) 부분입니다. 주로 저작권 표시, 연락처, 개인정보 링크, 작성자 정보 등을 포함하며, 페이지 맨 아래에 위치합니다.<header>와 마찬가지로<footer>도 페이지 전체의 푸터뿐만 아니라, 개별<article>등의 하단에 그 글의 메타 정보를 담는 용도로 쓸 수 있습니다.
시맨틱 태그를 사용하면 얻는 장점
시맨틱 태그를 사용하면, 단순히 코드가 예쁘게 보이는 것을 넘어, 웹 접근성부터 검색엔진 최적화, 코드 관리 측면에서 이득을 줍니다.
웹 접근성(Accessibility) 향상
시맨틱한 마크업은 시각장애인이나 보조기기를 사용하는 사용자들에게 웹 페이지의 구조를 더 잘 전달합니다. 스크린 리더(screen reader)는 시맨틱 태그를 인식하여 사용자에게 헤더, 내비게이션, 메인 콘텐츠, 푸터 등의 구역을 구분해 안내할 수 있습니다. 예를 들어 <main> 태그를 사용하면 스크린 리더가 그 부분을 “메인 콘텐츠 영역”으로 인식하여 바로 이동할 수 있고, <nav>는 “내비게이션 메뉴”로 인식되어 반복되는 링크 모음을 쉽게 건너뛸 수 있습니다. <strong>과 <em>같이 의미 있는 강조 태그를 사용하면 단순히 굵은 글씨(<b>)를 사용하는 것보다 스크린 리더가 “강조된 내용”으로 읽어주는 등 의도를 정확히 전달할 수 있습니다.
검색 엔진 최적화(SEO) 개선
시맨틱 태그는 검색 엔진이 페이지의 내용을 더 효과적으로 이해하도록 도와줍니다. 검색 엔진 크롤러는 HTML 코드를 해석하여 어떤 부분이 중요한 본문이고 어떤 부분이 네비게이션이나 사이드바인지를 파악하려고 합니다.
이때 <header>, <nav>, <main>, <article> 등으로 잘 구조화된 코드는 크롤러에게 “이 페이지의 핵심 내용은 여기이고, 부가적인 링크나 설명은 저기이다”라고 명확한 힌트를 줍니다.
예를 들어 <article>로 감싼 콘텐츠 블록은 독립된 글로 인식될 수 있고, <header>로 묶인 제목은 그 페이지나 섹션의 대표 제목으로 인지됩니다. 실제로 시맨틱 HTML 자체가 검색 순위를 올려주는 직접 요인은 아니지만, 페이지의 주요 콘텐츠 영역을 분명히 드러내어 검색엔진이 더 정확하게 색인할 수 있게 해준다는 점에서 SEO에 유리합니다.
구조화된 콘텐츠는 검색 결과에서 리치 스니펫 등으로 활용되기도 쉬워져 결과적으로 검색 노출 품질을 향상시키는 데 도움을 줄 수 있습니다.
코드 가독성과 유지보수성 향상
시맨틱 태그를 사용하면 사람이 코드를 읽고 이해하기가 훨씬 수월해집니다. 동일한 페이지를 <div만 잔뜩 써서 만든 코드와 시맨틱 태그로 구분해서 만든 코드를 비교해보면, 후자가 “여기가 헤더, 여기가 내비, 여기가 본문, 저기가 푸터”라는 구조가 눈에 바로 들어옵니다.
이는 협업 상황에서 더욱 큰 이점을 가져옵니다. 다른 개발자가 내 코드를 볼 때도, 의미 없이 중첩된 <div> 덩어리보다는 태그 자체에 역할이 드러나는 시맨틱 태그로 구성된 코드라면 내용을 빠르게 파악하고 수정하기가 쉽습니다
