[HTML5] header / nav / footer / section / article / figure 의 사용법

▶ header / nav / footer / section / article / figure 의 사용법 

 

 

 

 

 

 

 

 

빨간 네모는 <header>영역입니다.
페이지명(로고)와 다른 페이지로 이동하기 위한 네비게이션을 담고있습니다.
말그대로 '머릿글'이며, 웹 페이지영역에서 해당 부분의 머리글역할을 합니다.
<nav>태그를 담는 용도로도 사용이됩니다.
주로 메뉴들을 담는 역할을 하며 다른 페이지로 navigate(nav)해주는 역할을 합니다.

 

 

 

 

 

<nav>영역입니다.
다른 페이지로 이동하기 위한 네비게이션입니다.

 

 

 

 

 

<section>영역입니다.
<section>태그와 <article>태그는 나누기가 나름이지만, 어떤 부분에 사용되는지에 대해 이해를 돕기위해서
임의로 구분을해봤습니다.

 

 

 

 

 

 

<article>영역입니다.
본내용들이 들어가는 부분이라고 생각하시면 됩니다.
<article>영역안에서 또 영역이 나눠지는데 밑에 사진에서 설명드리겠습니다.

 

 

 

초록색 부분인 <article>영역을 나눠보겠습니다.
빨간색 부분이 <article>내에서의 <nav>이고, 파란색부분이 <article>내의 <section>영역입니다.

 

 

 

 

 

사이드 메뉴로 주로 많이 쓰이며 본래 역할은 본문과 구분되는 별도의 구역을 만드는 데 사용됩니다.
본문 외에 쇼핑, 회원정보 등 다른 내용들을 담고 있습니다.

 

 

 

 

 

<footer>영역입니다.
웹 페이지 하단에 위치하고 주로 저작권정보 / copyright / 기업소개 등의 정보를 담는 영역입니다.

 

 

 

---