시멘틱 웹
웹이 점차 발전하고 웹이 가진 정보의 가치가 높아짐에 따라 사람이 아닌 기계도 쉽게 이해할 수 있도록 웹페이지를 의미있게 설계하는 것이 중요
-> 이때 등장한 트렌드가 시멘틱 웹
시멘틱 태그란 태그의 이름만으로 태그의 용도나 역할에 대한 의미가 명확한 태그를 의미
대표적으로 table,from,a 태그 등은 시맨틱 태그, div,span은 논 시멘틱 태그
-> table, from,a 태그들은 HTML 문서의 구성 요소로는 적합할지 몰라도 전체 구조를 설계할만한 태그는 X
header 태그
웹페이지에서 헤더 영역을 구분하는데 사용
<header>
헤더 구성 요소
</header>헤더 영역은 웹사이트의 최상단이나 좌측에 위치하고, 로고, 검색,메뉴와 같은 요소들을 포함
nav 태그
nav(navigation) 태그는 웹 페이지에서 내부의 다른 영역이나 외부를 연결하는 링크 영역을 구분할 때 사용
<nav> </nav>
보통 링크 영역에는 헤더 영역에서의 메뉴나 목차와 같은 요소가 많은데, 이러한 링크들이 전부 nav일 필요는 없고, 웹 사이트의 주요 탐색 링크 영역만 포함하면 됨
section 태그
<section></section>웹 페이지에서 논리적으로 관련 있는 내용 영역을 구분할 때 사용
-> 보통 section 태그에는 내용의 제목을 나타내는 hn 태그 중 하나를 포함
여기서 뉴스스탠드, 오늘 읽을만한 글처럼 논리적으로 내용 영역을 구분할 때 보통 section 태그 사용
article 태그
웹 페이지에서 독립적인 영역을 구분할 때 사용
<article></article>section 태그는 웹 페이지 안에서 관련 있는 내용을 구분하고, article 태그는 어떤 웹페이지에서든 독립적으로 사용될 수 있는 영역을 구분한다는 점에서 차이
ex)
메인 페이지에서의 로그인
네이버 카페에서의 로그인
aside 태그
웹 페이지 안에서 주력 내용이나, 독립적인 내용으로 보기 어려워서 article 태그나 section 영역으로 구분할 수 없을 때 사용
<aside></aside>
footer 태그
웹 페이지에서 푸터 영역을 구분할 때 사용
-> 일반적으로 웹페이지 최하단에 위치, 저작권 정보, 연락처, 사이트 맵등의 요소를 포함
main 태그
웹 페이지에서의 주요 내용을 지정할 때 사용하는 태그
-> 문서에 반복해서 등장하는 요소를 포함시키면 안됨
-> main 태그를 article, aside, footer, header, nav 태그의 하위에 포함할 수 없음
