반응형
시맨틱 레이아웃, Semantic Layout
- 시맨틱 태그(Semantic Tag)
- 웹페이지의 레이아웃 구조를 쉽게 이해할 수 있도록 이름을 붙인 것
- 태그의 이름을 확인하면 HTML 문서의 구조를 대략적으로 짐작할 수 있도록 한다.
- 검색엔진(robots)이 페이지의 구성을 파악할 수 있도록 해준다.
- 대표적인 태그의 종류
- header
- 사이트 소개, 로고 등의 머리글 지정
- nav
- Navigation, Navigator, 메뉴 모든것을 통칭함
- 동일한 도메인(사이트)내에서 다른 문서로 연결하는 링크들의 모음
- aside
- 사이드바
- 광고, 배너, 작은 메뉴 등 본문이외의 내용을 표시하는 곳
- section
- 실제 문서 내용, 본문 등을 다루는 컨텐츠 영역
- 주제별 카테고리 역할
- article
- section 카테고리 내에서 내용물이 되는 태그
- footer
- 바닥글
- 사이트의 저작권, 제작자, 사업자 등록번호, 주소, 전화번호, 간단한 회사 정보 등을 담는다.
- 이용약관, 개인정보취급방침은 필수로 넣어줘야 한다.
- header
반응형
'FrontEnd > HTML' 카테고리의 다른 글
[HTML] HTML 의 Inline - Block 모델 (0) | 2020.09.29 |
---|---|
[HTML] HTML table 모델 (0) | 2020.09.29 |
[HTML] HTML inline 모델 (0) | 2020.09.29 |
[HTML] id, class 속성 정리 (0) | 2020.09.29 |
[HTML] HTML 테이블 태그 모음 (0) | 2020.09.29 |