HTML5의 Sectioning content(nav, article, section, aside)에 대해 MDN을 참고하여 작성한 글입니다.
Section Elements in HTML5
<nav>
- 메뉴, 목차 등의 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 섹션에 쓰인다. 하나의 문서 내에 여러개 사용할 수 있지만
<nav>안에<nav>를 중첩하여 사용할 수는 없다. - 필수 요소는 아니지만 보통 list elements를 포함한다.
<article>
- 블로그 글, 뉴스 등의 독립된 콘텐츠를 보여준다. 블로그 글에 대한 댓글과 같은 요소는
<article>안에<article>이 중첩하여 사용해 바깥쪽 요소와 관련된 콘텐츠임을 나타낼 수 있다. - headers, asdies, footers와 같은 semantic elements를 포함할 수 있다.
<article>안에<section>이 포함될 수 있으며,<section>안에<article>이 포함될 수도 있다.
<section>
- 일반적인 섹션 요소로, 이 섹션을 나타내는 더 구체적인 태그가 없는 경우 사용한다. (예를 들어 문서의 주요내용이라면
<main>으로, 신문 기사라면<article>로 나타낼 수 있을 것이다.) <section>안의 콘텐츠는 서로 의미적으로 연관이 있어야 하는데, 만약 서로 연관이 없으며 오로지 스타일링을 위해 그룹화해야한다면<div>를 사용하는 것이 낫다.- 몇가지의 예외를 제외하고는 heading 태그를 반드시 포함하여 각
<section>이 구분되도록 해야 한다.
<aside>
-
메인 요소와 관련은 있지만, 직접적으로 연관된 것은 아닌 사이드바, 인용문 등의 영역을 나타낸다.
-
<aside>안에<aside>를 포함할 수는 없다.
이 외 Sectioning을 위해 사용되는 Elements
<body>
- 해당 문서의 모든 콘텐츠를 포함한다.
<header>
- 도입부 역할의 영역을 정의한다. 보통 로고, 타이틀, 네이게이션, 검색창 등을 포함한다.
<article>이나<section>등 다른 요소 안에도 사용되는데, 이 경우 섹션의 제목, 작가이름 등이 포함될 수 있다.- 반드시 시작 부분에 배치되는 것은 아니다.
- 보통 heading 태그와 콘텐츠 관련 metadata(블로그 포스트의 작성시간, 목차 등)를 포함하고 있다.
<footer>
- 섹션의 저자, 라이센스 정보, 관련 링크 등을 포함하는 footer을 나타낸다.
+
<main>
- 웹페이지의 기본적인 내용을 포함한다.
- 각 페이지에서 개별적으로 존재해야 하며, 로고나 검색창 같은 다른 페이지를 가도 볼 수 있는 기본적인 요소는 포함하면 안된다.
- 각 페이지당 하나의 요소를 사용해야 한다.
<article>,<aside>,<header>,<footer>,<nav>안에 포함시킬 수 없다.
