시멘틱 태그

시멘틱 태그란 전체 HTML문서의 구조화를  위해 사용하는 태그다.

필수적으로 사용해야 하는 태그는 아니지만, 잘 활용한다면 간결한 코드를 작성할 수 있다.

 

시멘틱 태그를 사용하게 되면 웹 브라우저가 HTML의 소스코드만 보고 어느 부분이 제목인지, 본문 내용인지 쉽게 알 수 있고

화면 낭독기가 필요한 사용자의 경우 시멘틱 태그로 구조화가 되어 있으면 보다 더 정확한 내용을 전달받을 수 있다.

 

또한 문서의 구조가 정확하게 나눠지므로 웹 브라우저와 다양한 스마트 기기의 화면에서 웹 문서를 표현하기가 쉬워진다.

 

시멘틱 태그의 종류

태그명	설명
<header> </header>	맨 위쪽이나 왼쪽에 존재하며 검색창이나 사이트 메뉴를 삽입하는 구간
<nav> </nav>	같은 웹 문서 안에서 다른 위치로 연결하거나 다른 웹 문서로 연결
<main> </main>	핵심 콘텐츠를 담는 영역으로 웹 문서에서 한번만 사용이 가능
<article> </article>	독립적인 콘텐츠를 담는 영역으로, 여러번 사용 가능
<section> </section>	콘텐츠 영역을 나타내는 태그로 몇개의 콘텐츠를 묶는 용도로 사용
<aside> </aside>	좌/우 혹은 하단에 사이드 바를 만드는 영역을 나타내는 태그로, 필수 요소는 아님
<footer> </footer>	제일 하단에 위치하며, 사이트/저작권 정보/연락처 등을 넣는 구간 해당 구간에 <header>,<section>,<article> 등 다른 시맨틱 태그 사용 가능
<div> </div>	id, class 속성을 사용하여 문서 구조를 만들거나 스타일 적용이 가능한 태그 시멘틱 태그가 나오기 전에는 div태그를 사용했고, 지금도 자주 사용됨

 

시멘틱 태그 의 구조

<header> 
	<nav>

	</nav>
</header>

<main>
	<article>
	
	</article>

	<section> 
	  
  </section>
</main>


<footer> 

</footer>

<nav> 태그는 <header> 태그 안에서 사용되며, 헤더/푸터/사이드바 등 독립적 사용이 가능한 태그다.

<article>, <section> 태그는 <main>태그 안에서 사용된다.

 

<div> 태그는 class나 id 속성을 사용하여 영역을 구별하거나 스타일을 적용할 때 사용한다.