시맨틱 태그 (Semantic Tag) 란?
- 문서의 의미와 구조를 정확하게 표현하기 위해 생긴 태그
- 포함된 콘텐츠의 특정 의미를 정의하고 목적을 가짐
- 가독성이 좋아지고 브라우저, 검색엔진 등이 콘텐츠를 쉽게 이해할 수 있음
-> 의미가 없는 div는 사용 X
시맨틱 태그의 종류
1. < header >
: 문서나 섹션의 머리말 ( 로고, 제목, 메뉴 )
-> 페이지 상단에 위치 / 여러개 가능 (PC, Mobile)
2. < main >
: 페이지의 주요 콘텐츠 영역 ( 본문, 메인 기사 )
-> 페이지 당 한번만 사용
3. < footer >
: 문서나 섹션의 바닥글 ( 저작권, 연락처, 회사정보 )
4. < nav >
: 내비게이션 ( 메인 메뉴, 사이드 메뉴, 탭 메뉴 )
5. < section >
: 논리적 구역, 주제별 콘텐츠 그룹 정의
-> section 안에 section 넣기 가능 / article 사용
6. < article >
: 독립적으로 배포 가능한 콘텐츠 ( 블로그 글, 뉴스카드, 카드형 콘텐츠 )
-> 안에 header, footer 포함 가능
7. < aside >
: 부가 정보, 사이드바 ( 광고, 관련 링크, 보조 설명 )
8. < figure > & < figcaption >
< figure > : 다이어그램, 차트, 일러스트레이션, 지도 첨부
< figcaptin > : figure 설명 텍스트
9. < details >
: 사용자가 보거나 숨길 수 있는 추가 세부 정보
-> 사용자와 상호작용 가능 / 기본적으로 닫혀있음
10. < time >
: 시간 / 날짜 데이터
11. < address >
: 연락처 정보 ( 이메일, 주소, 전화번호 등 )
12. < mark >
: 텍스트 강조 표시
-> 노란색 배경 기본
13. < em >
: 문맥상 강조
-> 기울임(italic) 기본
14. < strong >
: 의미상 강한 강조
-> 굵게(bold) 기본
