HTML - Semantic Tag

시맨틱 태그 (Semantic Tag)는 무엇일까?

Semantic은 '의미의', '의미론적인'이라는 뜻을 가진 형용사이다.
따라서 시맨틱 태그란, 의미가 있는 태그를 말한다.

div나 span과 같이 의미가 없는 태그는 태그 이름만 보고는 어떤 내용인지 전혀 유추할 수가 없는 반면, header, section, footer 등 의미가 있는 태그는 내용을 명확하게 정의한다.

---

시맨틱 태그 종류와 용도

1. header
=> html문서의 header를 정의하는 요소

• 페이지의 제목과 같은 소개 내용을 포함한다.
• 일반적으로 heading 태그나 로고 또는 아이콘, 저작권 정보, 검색 양식, 작성자 이름 등을 포함한다.

ex)

<header></header>

2. section
=> html문서의 section을 정의하는 요소

• section이란, 제목이 있으며 html 문서의 전체적인 내용과 관련이 있는 콘텐츠의 집합
• 구체적인 시맨틱 태그가 없는 문서의 독립적인 영역을 나타낸다.
• 섹션에는 매우 소수의 예외를 제외하고 항상 제목이 있는 것이 일반적이다.

ex)

<section></section>

3. footer
=> html문서의 footer부분을 정의하는 요소

• 일반적으로 섹션의 작성자에 대한 정보, 저작권 데이터 또는 관련 문서에 대한 링크를 포함한다.

ex)

<footer></footer>

4. main
=> html문서의 주요 컨텐츠부분을 정의하는 요소

• 지배적인 콘텐츠 영역을 나타내는 태그이다.
  ex)

<main></main>

5. nav
=> html 문서를 탐색하는 링크의 집합을 정의하는 요소

• 보통 메뉴, 목차 등에 사용된다.

ex)

<nav></nav>

시맨틱 태그 사용 예시

<header>
<footer>
<section>
<nav>
<div id="wrap">
	<div id="header"></div> //<header></header> 태그로 바꿔서 사용할 수 있다.
	<div id="container"></div> //<section></section> or <main></main>로 바꿔서 사용할 수 있다.
	<div id="footer"></div> //<footer></footer> 태그로 바꿔서 사용할 수 있다.
</div>