[ HTML ] 시맨틱(semantic) 태그란? HTML 코드의 가독성 높이기!

시맨틱 태그

시맨틱 태그(Semantic Tag)는 태그명 자체가 의미를 가지고 있는 HTML 태그를 뜻한다. 예를들어 <table>, <address> 같은 태그는 이름만 봐도 테이블과 주소 정보를 담는 역할을 한다는 걸 알 수 있다.

 

시맨틱 태그의 필요성

과거에는 <div> 태그를 사용해 웹페이지의 모든 레이아웃을 구성했다. 그러나 웹사이트 구조가 점점 복잡해지면서 개발자와 검색 엔진이 코드를 이해하기 어려워졌다. 이를 해결하기 위해 HTML5에서 의미를 직관적으로 알 수 있는 시맨틱 태그가 추가되었다.

 

대표적인 시맨틱 태그

• <header>: 웹페이지의 머리글(로고, 제목 등)
• <nav>: 내비게이션(메뉴) 영역
• <main>: 본문 콘텐츠 영역
• <section>: 논리적으로 연관된 콘텐츠 그룹
• <article>: 독립적인 콘텐츠(게시글, 뉴스, 블로그 글 등)
• <aside>: 사이드바(광고, 부가 정보 등)
• <footer>: 웹페이지의 바닥글(저작권, 연락처 등)

 

시맨틱 태그의 장점

• 가독성 향상: 코드만 봐도 구조를 쉽게 파악할 수 있다.
• 검색 엔진 최적화(SEO) 효과: 검색 엔진이 콘텐츠의 의미를 정확하게 이해할 수 있다.
• 웹 접근성 강화: 스크린 리더와 같은 보조 기술이 더 정확하게 정보를 전달할 수 있다.

 

언제 <div>를 사용할까?

시맨틱 태그가 주요 레이아웃을 담당하는 반면, 특정한 의미가 없는 단순한 그룹핑이 필요할 때는 <div>를 사용할 수 있다.

예를 들어 버튼 여러 개를 묶거나, 스타일링을 위한 단순 컨테이너 역할을 할 때 <div>를 활용하면 된다.