[HTML] Semantic Tag

시맨틱 태그 (Semantic Tag)

시맨틱(semantic)이라는 '의미의', '의미론적인'라는 뜻을 가진 형용사이다. 즉, 시맨틱 태그는 의미를 부여한 태그라는 뜻이 됩니다. <div> 태그에 의미를 부여했다고 생각하면 이해가 편하다.

 

예를 들어, <header>태그는 <div>와 동작은 똑같이 하지만, header 부분에서 사용되며 이 영역은 상단 영역이라는 것을 나타낸다.이렇게 시맨틱 태그의 등장으로 인해 우리는 태그만 보고서도 문서를 더 쉽게 이해할 수 있게 되는 것이다.

 

 

 

시맨틱 태그를 사용 이유

시맨틱 태그는 사용하지 않더라도 div 태그를 활용하여 웹 문서를 똑같이 만들 수 있다. 그렇다면 왜 시맨틱 태그를 사용해야 할까? 그 이유로는 아래의 3가지가 있다.

 

• HTML 문서의 가독성과 유지보수가 쉬워진다. 예를 들어, 모든 태그들을 div로 만들었다고 가정해보자. HTML 문서가 길어진다면 어디가 어느 부분인지, 어떤 영역인지 한눈에 파악하기가 어려워지는 것이 당연하다. 하지만 시맨틱 태그를 활용하면 유지보수를 할 때나 다른 작업자가 코드를 파악하기가 보다 쉬워진다.
• 웹 브라우저가 HTML만 보고도 header, main, footer, aside 어느 영역인지 쉽게 알 수 있다. 이는 웹 접근성 시간에서 볼 때도 매우 중요하게 사용된다. 
• 검색엔진이 검색을 수행할 때 HTML 내의 태그를 분석할 수 있다. 예를 들면 검색엔진의 검색로봇에서는 <article> 태그가 사용된 콘텐츠를 재배포할 수 있는 콘텐츠로 인식하는 반면 <section> 태그로 묶은 콘텐츠는 재 배포를 금지하는 콘텐츠로 인식한다. 

 

 

 

시맨틱 태그의 종류

태그	설명
header	사이트의 상단 부분
main	메인 콘텐츠
section	제목별로 나눌 수 있는 문서의 콘텐츠 영역
article	개별 콘텐츠
aside	좌우측의 사이드 영역
footer	사이트의 하단 부분
hgroup	제목과 부제목을 묶어서 나타냄
nav	웹페이지의 메뉴

 

<header>

<header> 태그는 보통 사이트의 도입부, 즉 상단 부분에 사용되며 사이트의 로고나 제목 등을 기술할 때 사용한다. 하나의 구역이기에 <header> 태그 안에 부수적인 태그들이 추가로 들어갈 수 있으며 주로 <form> 태그를 사용해 검색창을 넣거나 <nav> 태그를 사용해 사이트 메뉴를 넣는다또한 HTML 문서 내에 여러 개의 <header> 태그를 작성하는 것 또한 가능하다.

 

 

<main>

<main> 태그는 해당 페이지의 메인 콘텐츠를 나타낼 때 사용하며  반드시 한 번만 사용되어야 한다. <main> 태그 내의 콘텐츠는 해당 문서의 중심이 되는 주제나 확장되는 콘텐츠로 구성되어야 하며, 문서 전반에 걸쳐 반복되는 내용을 포함해서는 안 된다.

 

 

<hgroup>

<hgroup>은 제목과 부제목을 묶어서 나타내 주는 요소로,  <h1>, <h2>... 이렇게 연속해서 나올 때 묶어주기 위한 태그이다. 페이지 전체 구조에 대한 개념으로 쉽게 눈에 들어오게 하는 역할을 담당한다.

 

 

<nav>

<nav> 태그는 내비게이션 표현을 위한 태그로써 동일한 사이트 안의 문서나 다른 사이트의 문서로 연결하는 링크들의 모음, 즉 메뉴를 나타낸다. 이 태그를 사용하면 어느 부분이 내비게이션인지 쉽게 알 수 있다. <nav> 태그는 본문 위치에 영향을 받지 않는다. 즉 <header><footer><aside> 태그를 안에 포함시킬 수도 있고 독립해서 사용할 수도 있다. 

 

<footer>

<footer> 태그는 일반적으로 웹 문서 하단에 들어가는 태그로 보통 저작권 정보나 저작권 표기와 같은 내용이 들어가는 부분이다. <footer> 태그 안에  <section>, <article> 등 다른 레이아웃 태그들을 모두 사용할 수 있고 이런 태그들을 활용하여 푸터 안에 다양한 정보들을 넣을 수 있다.

 

<aside>

블로그에서 왼쪽이나 오른쪽, 혹은 하단에 사이드바가 표현된 것을 본 적이 있을 텐데 이렇게 웹 콘텐츠 제작 시 주 내용이 아닌 왼쪽이나 오른쪽에 부수적인 내용이 들어가는 부분을 <aside> 태그로 표현한다. 대게 사이드바를 aside 태그를 통해 표현한다. class="content"라는 속성을 사용하여 <section> 요소의 위치나 여백 등의 스타일을 조절하고 class="sidebar" 속성을 활용하여 사이드바를 왼쪽에 배치할지 오른쪽에 배치할지 등을 지정할 수 있습니다.

 

<article>

<article> 태그는 웹페이지 상에서의 실제 내용을 의미합니다. 보통 블로그의 포스트나 웹사이트의 내용, 사용자가 등록한 코멘트, 독립적인 웹 콘텐츠 항목 등이 있으며 한마디로 정의하자면 태그를 적용한 부분을 떼어 내 독립적으로 배포하거나 재사용하더라도 완전히 하나의 콘텐츠가 된다면 <article> 태그를 사용하면 된다. 이렇게 <article> 태그를 사용한 웹 콘텐츠는 다른 곳에 배포하거나 재사용할 수 있다. 검색엔진의 검색로봇에서는 <article> 태그가 사용된 콘텐츠를 배포할 수 있는 콘텐츠로 인식한다.

 

<section>

<section> 태그는 콘텐츠의 영역. 즉 여러 가지 콘텐츠들을 그룹으로 묶어주는 역할을 담당한다. 더 쉽게 말하면 문맥 흐름 중에서 콘텐츠를 주제별로 묶을 때 사용하며 그 안에는 섹션 제목을 나타내는 <h1> ~ <h6> 태그들이 함께 사용되는 태그이다. <article> 태그와는 달리 <section> 태그는 재배포할 수 없는 콘텐츠로 인식한다.