header
위에서 언급한 <head>는 <html>바로 밑에 쓰이지만 <header>는 <body>안에 있기 때문에 둘은 전혀 다릅니다. <header>는 주로 머리말, 제목을 표현하기 위해 쓰입니다.
nav
HTML5에서 새롭게 생긴 시맨틱 태그이고 네비게이션이라고 불립니다. 콘텐츠를 담고 있는 문서를 사이트간에 서로 연결하는 링크의 역활을 담당합니다. <nav>는 주로 메뉴에 사용되고 위치에 영향을 받지 않아 어디에서든 사용이 가능합니다.
section
<body>영역은 콘텐츠를 <Header>,<section>,<footer>의 3가지 공간에 콘텐츠를 저장하는데요. 그 중 <section>은 본문 콘텐츠를 담고 있습니다. <section>안에 <section>을 넣는 것도 가능합니다. 그리고 반드시 제목 요소(h1~h6)을 가져야 합니다.
article
<section>이 콘텐츠를 분류한다면 이 <article>태그안에는 실질적인 내용을 넣습니다. 뉴스로 예를 들면 정치/ 연예/ 사회의 대분류는 <section>이고, 정치의 기사내용과 연예의 기사내용들을 <article>에 넣는 것이죠.
aside
사이드바라고 불르기도 하며, 본문 이외의 내용을 담고 있는 시맨틱 태그입니다. 주로 본문옆에 광고를 달거나 링크들을 이 공간에 넣어 표현합니다.
footer
화면의 구조 중 제일 아래에 위치하고, 회사소개 / 저작권 / 약관 / 제작정보 들이 들어갑니다. 연락처는 <address>태그를 사용하여 표시합니다.
div
위 사진에는 없지만 <div>는 HTML5에 와서 글자나 사진등 콘텐츠들을 묶어서 CSS 스타일을 적용시킬때 사용합니다.
출처: http://hunit.tistory.com/172 [HunIT Blog]
'Web > Markup | WEB' 카테고리의 다른 글
| [SEO] 메타태그 최적화 (0) | 2021.06.07 |
|---|---|
| [퍼블리싱] 퍼블리셔 (0) | 2021.02.10 |
| 파비콘 (0) | 2018.05.30 |
| [HTML] View Port(뷰포트 설정) (0) | 2018.05.15 |
| [HTML] html5 tag 정리 (0) | 2018.05.15 |