12.시맨틱 태그

- 웹 페이지를 의미 있게 설계하는 게 중요해짐 -> sementic web의 대두

-시맨틱 웹(sementic web) : 의미있게 웹 페이지를 설계하는 트랜드

- 시맨틱 태그 : 태그의 이름안에 의미가 들어있는 태그, 뭘 하는 앤지 명확함

-논 시맨틱 태그 : 시맨틱하지 않은 애들

 

HTML5에서 웹 페이지 구조 설계용으로 시멘틱태그가 추가됐는데 그게 다음과 같음

1. header 태그

- 헤더 영역 구분에 사용 ex) 네이버 로고랑 검색창

<!--형식-->
<header>
	헤더 구성 요소
</header>

2. nav 태그

-다른 곳으로 연결하는 링크 영역 ex) 포털창에 쇼핑, 뉴스, 증권 바로가기 창

<!--형식-->
<nav></nav>

3.  section 태그

-글로 내용 영역을 구분할 때  ex)네이버 영어사전의 신조어, 오픈사전 글로 내용 구분

<!--형식-->
<section></section>

4. article 태그

-독립적인 영역을 구분할 때

-section과 다르게 어느 페이지에서든 독립적으로 사용가능한 곳에 사용 ex) 네이버 로그인 창은 네이버 뉴스, 증권 블로그 쇼핑 어디서든 쓰임

<!--형식-->
<article></article>

 

5. aside 태그

-articel이나 section으로 하기는 애매한 애들

<!--형식-->
<aside></aside>

6.footer 태그

-웹 페이지 제일 아래 이용약관 개인정보처리방침, 연락처, 사이트 맵 이런거 있는 영역

<!--형식-->
<footer></footer>

7.main 태그

-주요 내용을 지정할 때 사용하는 태그