[HTML] HTML의 시맨틱 레이아웃, Semantic Layout

시맨틱 레이아웃, Semantic Layout

• 시맨틱 태그(Semantic Tag)
• 웹페이지의 레이아웃 구조를 쉽게 이해할 수 있도록 이름을 붙인 것
• 태그의 이름을 확인하면 HTML 문서의 구조를 대략적으로 짐작할 수 있도록 한다.
• 검색엔진(robots)이 페이지의 구성을 파악할 수 있도록 해준다.

• 대표적인 태그의 종류
  • header
    • 사이트 소개, 로고 등의 머리글 지정
  • nav
    • Navigation, Navigator, 메뉴 모든것을 통칭함
    • 동일한 도메인(사이트)내에서 다른 문서로 연결하는 링크들의 모음
  • aside
    • 사이드바
    • 광고, 배너, 작은 메뉴 등 본문이외의 내용을 표시하는 곳
  • section
    • 실제 문서 내용, 본문 등을 다루는 컨텐츠 영역
    • 주제별 카테고리 역할
  • article
    • section 카테고리 내에서 내용물이 되는 태그
  • footer
    • 바닥글
    • 사이트의 저작권, 제작자, 사업자 등록번호, 주소, 전화번호, 간단한 회사 정보 등을 담는다.
    • 이용약관, 개인정보취급방침은 필수로 넣어줘야 한다.