...
HTML의 문서 한 페이지에는 각각의 섹션이 나누어져 있는데,
어떤 것들이 있는지 알아보고 특징들을 살펴보도록 하겠습니다.
Header
태그명 <header></header>로 HTML 문서의 헤더 영역을 의미합니다.
주로 사이트의 이름(제목, 로고), 내비게이션, 헤드라인, 검색 등으로 구성됩니다.
텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있지만
<header>, <footer> 태그는 포함 할 수 없습니다.
Nav
태그명 <nav></nav>로 목적지로 이동할 수 있도록 링크를 별도로 모아둔 영역입니다.
링크 중에서 중요도가 높은 링크를 체계적으로 구성해 놓은 것으로
단순 본문 링크인지 메뉴(카테고리) 성격의 링크인지 확인이 가능합니다.
텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있습니다.
Section
태그명 <section></section>으로 맥락이 같은 요소들을 주제별로 그룹화해주어
내용적 흐름과 구조를 만들며 내용을 나누어주는 용도입니다.
주제별로 모아 주제에 대한 제목요소 (<h1> ~ <h6>)를 포함하는 것이 좋습니다.
텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있고,
<section>은 독립적인 영역이기 때문에 섹션 내에도 <header>, <footer>를 둘 수 있습니다.
Article
태그명 <article></article>로 독립적으로 구성된 글을 표시하는 영역입니다.
본문과 별개로 구성되어 다른 영역에 영향을 주거나 받지 않고 독립적으로 배포되거나 재사용할 수 있습니다.
일반적으로는 <section>요소가 <article>요소를 포함하지만
상황에따라 <article>요소가 <section>요소를 포함할 수도 있습니다.
텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있습니다.
<article> 역시 독립적인 영역이기 때문에 <header>와 <footer>를 둘 수 있습니다.
Aside
태그명 <aside></aside>로 페이지 전체 내용과 어느정도 관련성이 있지만
주요 내용과는 집적적인 연관성은 없는 분리된 내용을 담고 있는 영역입니다.
주로 HTML문서의 좌측이나 우측 사이드 메뉴나 광고 등의 내용을 담을 때 사용합니다.
텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있습니다.
Footer
태그명 <footer></footer>로 HTML문서의 맨 아래쪽에 있으며 저작권, 연락처등으로 구성된 영역이다.
<footer>는 바닥 영역 또는 꼬리말을 지칭하는데, 저작권, 연락정보 등 본문과의 관련성은 있지만
본문에는 담기 어려운 내용을 담는데 쓰입니다.
일반적으로는 한 문서 내에서 한번만 제공되지만 <section>, <article> 요소 내에서
해당 영역에 관한 꼬리말을 표시하는데 사용되기도 합니다.
텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있지만, <header>와 마찬가지로
<header>, <footer> 태그는 포함할 수 없습니다.
이상으로 HTML문서의 구조(섹션) 관련 요소에 대해서 알아보았습니다 !