Semantic은 '의미의', '의미론적인'이라는 뜻을 가진 형용사이다. 따라서 시맨틱 태그란 의미가 있는 태그를 말한다.
div나 span과 같이 의미가 없는 태그는 태그 이름만 보고는 어떤 내용인지 전혀 유추할 수가 없는 반면, form, table, article 등 의미가 있는 태그는 내용을 명확하게 정의한다.
검색엔진최적화(SEO) : 검색엔진은 태그를 기반으로 페이지 내 검색 키워드의 우선순위를 판단한다. 따라서 제목은 h1, 중요한 단어는 strong 또는 em을 사용하는 등 의미에 맞는 올바른 태그를 사용하는 것이 중요하다.
시맨틱 태그를 사용하면 애플리케이션, 기업, 커뮤니티에서 데이터를 공유하고 재사용할 수 있다.
- W3C -
<header> : 도입부에 해당하는 콘텐츠나 네비게이션 메뉴와 같은 정보를 포함한다
- 하나 이상의 제목 요소(h1~h6)
- 로고(logo), 아이콘(Icon)
- 저자(author) 정보
<nav> : 페이지의 네비게이션 영역이며 보통 메뉴,목차에 사용 (사이트 내부, 외부로 이동)
<aside> : 간접 컨텐츠, 보조 콘텐츠 라고 칭하며 문서와 관련된 내용을 나타냄
- 블로그 옆에 광고, 링크등 필수요소가 아닌 보조 콘텐츠 삽입(본문 이외의 내용)
<section>: 본문의 여러 내용(article)로 구성된 부분을 의미
<article>: 본문의 내용이 삽입된 독립적으로 구성된 요소를 의미
- 게시물
- 잡지
- 기사
- 블로그 작성글
- 제품 카드
<footer>: 하단 바닥글을 의미함. 섹션에 대한 아래와 같은 정보를 포함한다.
- 저자(author)의 정보
- 저작권
- 연관 페이지
- 사이트맵
- 연락처
<article>은 실제 내용이 들어가고 <section>은 각 태그별로 구분하기 위해 사용
ETC
강조할 땐 em, strong
<p> 태그는 글의 단락에 사용된다 하지만 막 쓰는건 비추
- 리스트는
<li> - 링크라면
<a> - 제목이면
<h1 ~ h6>
