HTML 시맨틱 태그

시맨틱웹은  더 의미있게 웹페이지를 설계하는 트렌드

시맨틱 태그는 태그의 이름만으로도 태그의 용도나 역할에 대한 의미가 명확한 태그htmh

HTML5에서 새롭게 추가되었다.

 

 

 

header태그 : 웹 페이지에서 헤더 영역을 구분하는데 사용

<header>
    헤더 구성요소
</header>

헤더영역은 웹 사이트의 최상단이나 좌측에 위치하며, 로고, 검색, 메뉴와 같은 요소들을 포함한다.

 

 

 

hgroup 태그 : 제목과 부제목을 한번에 묶을 때 사용한다.

<hgroup></hgroup>

 

 

 

nav태그 : 웹페이지에서 내부의 다른 영역이나 외부를 연결하는 링크 영역을 구분하는데 사용

<nav></nav>

웹사이트의 주요 탐색 링크 영역만 포함하면 된다.

 

 

 

 

section 태그 : 웹페이지에서 논리적으로 관련 있는 내용 영역을 구분할 때 사용

<section></section>

보통 section태그는 내용의 제목을 나타내는 hn 태그 중 하나를 포함한다.

 

 

 

 

article 태그 : 웹페이지에서 독립적인 영역을 구분할 때 사용

<article></article>

section 태그는 웹 페이지 안에서 관련 있는 내용을 구분하고

article 태그는 어떤 웹 페이지에서든 독립적으로 사용할 수 있는 영역을 구분하는 차이점이 있다.

 

 

 

 

aside 태그 : 웹페이지 안에서 주력 내용이나 독립적인 내용으로 보기 어려워

article이나 section으로 영역구분이 힘들 때 사용

<aside></aside>

 

 

 

footer 태그 : 웹 페이지에서 푸터 영역을 구분할 때 사용

<footer></footer>

일반적으로 페이지의 최하단에 있고, 저작권 정보, 연락처, 사이트 맵 등의 요소를 포함한다.

 

 

 

 

main태그 : 웹페이지의 주요 내용을 지정할 때 사용

<main></main>

문서에서 반복해서 등장하는 요소를 포함해서는 안된다.

main태그는 article, aside, footer, header, nav태그의 하위에 포함할 수 없다.