내가 계속 헷갈려서 정리하는 시맨틱 태그..
이제 그만 찾아보자..
<header>
사이트의 머릿말 부분 나타낼때 사용
<hgroup>
제목과 부제목을 묶어서 나타내는 요소
<nav>
웹 페이지 메뉴만들 때 사용
<main>
- 해당 문서의
<body>요소의 주 콘텐츠를 정의할 때 사용
(해당 문서의 중심 주제 또는 주요 기능과 직접적으로 관련되어 있거나 확장되는 콘텐츠로 구성) - 하나의 문서에는 단 하나의 main만 존재
- 문서 전반에 걸쳐 반복되는 내용 포함해서는 안됨
- header, nav, article, aside, footer 요소의 자손 요소가 되어서는 안됨
<section>
- 문서 내에서 같은 의미의 컨텐츠를 나눌때 사용
<article>
- 문서 내의 독립적인 글 나눌 때 사용
<article>안에서<header>,<footer>와 같은 하나의 페이지 형식으로 구성할 수도 있으며 페이지 안에서 article요소가 반복 되어도 됨 (단, 중접된 article 요소는 서로 상호관련이 있어야함)
<section>과<article>의 차이
- 두 시맨틱 태그는 div와 같은 블록 속성을 가지고 있기 때문에 div로 대치해도 기능상 문제 ❌ → 콘텐츠를 구분하는데 사용되며 서로 바꿔서 사용 가능
<section>: 섹션들을 그룹화해서 분리하는 역할 - 주제별로 그룹화<article>: 문서내에서 그룹화해서 분리하는 역할 - 독립적으로 존재 & 재사용 가능(구체적)
내용이 독립적이다 → article
내용이 관계가 있다 → section
의미적으로 관계가 없다 → div( 오로지 내용을 묶는 역할)
<aside>
- 좌우측의 사이트 영역
<footer>
- 사이트의 바닥부분
- 연락처나 제작정보 등 기재
