[HTML] HTML5 레이아웃 종류 (태그로 범위 나누기)

HTML5에서 제공하는 레이아웃만을 위한 의미(semantic) 요소는 다음과 같습니다.

body 태그안에서 나누어진다고 보면 됩니다.

 

HTML5 레이아웃

 

<header>	HTML 문서나 섹션(section) 부분에 대한 헤더(header)를 정의함.
<nav>	HTML 문서의 탐색 링크를 정의함.
<section>	HTML 문서에서 섹션(section) 부분을 정의함.
<article>	HTML 문서에서 독립적인 하나의 글(article) 부분을 정의함.
<aside>	HTML 문서에서 페이지 부분 이외의 콘텐츠(content)를 정의함.
<footer>	HTML 문서나 섹션(section) 부분에 대한 푸터(footer)를 정의함.

 

 

1. header

---

HTML5에 새롭게 추가된 요소로서, 웹 문서 맨 윗부분에 있으며 웹 사이트 이름, 글로벌 링크(로그인, 회원가입, 사이트맵, 언어 선택등 웹사이트 어느 곳에서든지 이용할 수 있는 링크)등으로 구성된 영역입니다.

 

• 사이트 이름(로고), 네비게이션, 헤드라인, 검색 등으로 보통 구성됩니다.
• 간단한 제목, 소개 컨텐츠를 담을 수 있습니다.
• 브라우저가 헤더영역을 인식할 수 있게되면 *스크린 리더의 네비게이션과 검색엔진의 색인에 도움을 줄 수 있습니다.

*스크린 리더 : 컴퓨터의 화면 낭독 소프트웨어

 

 

2. NAV

---

HTML5에 새롭게 추가된 요소로서, 목적지로 이동할 수 있도록 링크를 별도로 모아둔 영역이다.

 

• 링크 중에서 중요도가 높은 링크를 체계적으로 구성해 놓은 것으로 단순 본문 링크와 메뉴(카테고리) 성격의 링크인지 확인이 가능하다.
• 카테고리

 

 

3. SECTION

---

HTML5에 새롭게 추가된 요소로서, 섹션을 표시한다.

 

• 내용적 흐름과 구조를 만들기 위해 내용을 나누는 용도이다.
• 같은 성격의 내용, 즉 관련있는 내용을 section요소로 묶어 표시한다.
• 섹션은 독립적인 영역이라 섹션 내에도 헤더(header)와 푸터(footer)를 둘 수 있다. 이것은 섹션마다 나름의 제목 체계를 가질 수 있다는 것을 의미하며, 섹션마다 H1 요소를 가질 수 있게 되었다.

 

 

 

4.  ARTICLE

---

HTML5에 새롭게 추가된 요소로서, 독립적으로 구성된 글을 표시한다.

 

 

• 본문과 별개로 구성되어 다른 영역에 영향을 주거나 받지 않고 독립적으로 배포되거나 재사용할 수 있다.
• 게시판의 게시물, 블로그 포스트, 댓글, 위젯에 담긴 콘텐츠등이 article에 해당한다.
• 일반적인 상황에서는 section 요소가 article 요소를 포함한다. 하지만 독립적으로 구성된 내용이 몇 개의 섹션으로 구성된 경우라면 article 요소가 section 요소를 포함할 수도 있다.
  
  
  
  
  

 

5. MAIN

---

HTML5 권고후보에 main요소가 추가되었다고 합니다.

 

• 문서내 main요소가 나오는 것은 1번만 허용
• 단, main요소를 article, aside, footer, header, nav요소의 하위로 사용하지 않음
• 섹션 콘텐츠가 아니기 때문에 아웃라인 생성하지 않음

 

 

6. ASIDE

---

HTML5에 새롭게 추가된 요소로소, 페이지 전체 내용과는 어느정도 관련성이 있지만 주요 내용과는 직접적인 연관성은 없는 분리된 내용을 담고 있다.

 

• 흔히 사이드바라고 부르는 영역으로 배너, 용어 설명, 관련 상품 등 본문 내용과 직접적인 관련성이 적거나 없는 내용으로 구성된다.
• aside 요소로 구성된 것을 검색엔진은 무시하고 본문 위주로 색인을 진행할 수 있고 스크린리더 사용자는 해당 영역이 어떤 성격의 영역인지 신속하게 파악할 수 있으므로 곧바로 다른 영역으로 이동할 수도 있다.

 

 

7. FOOTER

---

HTML5에 새롭게 추가된 요소로소, 웹 문서 맨 아래쪽에 있으며 저작권, 연락처등으로 구성된 영역이다.

 

• 푸터는 바닥 영역 또는 꼬릿말을 지칭하는데, 저작권, 연락정보 등 본문과의 관련성은 있지만 본문에는 담기 어려운 내용을 담는다.
• 일반적으로 푸터 영역은 한 문서 내에서 한 번만 제공되지만 section 요소나 article 요소 내에 있는 footer 요소는 해당 영역에 관한 꼬리말을 표시할 수 있다.
• 맨 위로가기 링크나 헤더의 메인 내비게이션도 반복 제공을 위해 푸터 영역에 둘 수 있다.