[HTML] 콘텐츠 구분

1. Body 태그 : 정보의 구조

<header> : 소개나 탐색을 돕는 것의 그룹을 나타냄.

ex) 로고나 메뉴 등

header안에 header/footer를 넣을 수 없음

address안에 header를 넣을 수 없음

<footer> : 가장 가까운 구획화 콘텐츠나 구획화 루트의 푸터

작성사 구획,저작권 데이터, 관련된 문서의 링크에 대한 정보를 포함

일반적으로 사이트 최하단에 있는 바. 주소,사업자 등의 사이트 정보 등이 적혀있다.

footer 안에 header/footer를 넣을 수 없음

레이아웃에 태그를 의미에 맞게 사용하는 것이 좋다.

<h1>~<h6> : 6단계의 문서 제목(목차)을 구현

크기가 다 다르게 지정되어있기는 하지만, 글자 크기를 우리가 모두 초기화한 후 명확하게 지정해놓고 써야한다.

구조를 나타내는 용도로 사용해야하지, 글자 크기는 신경쓰지 않도록 한다. (css의 font-size 사용)

단계를 건너뛰면 브라우저나 검색엔진에서 h1부터 순차적으로 내용을 찾아내려가므로 순차적으로 사용하는 것이 좋다.

h1은 전체 제목으로 하나만 사용하는 것이 좋다

<main> : <body>의 주요 콘텐츠를 나타낸다.

주요 콘텐츠: 문서의 핵심주제나 애플리케이션의 핵심 기능성에 대해 부연, 또는 직접적으로 연관된 콘텐츠

ex) 블로그 같은 곳에서 핵심 포스팅 같은 부분.

문서에 하나만 존재해야 한다

인터넷 익스플로러에서 지원하지 않음

<article> : 독립적으로 구분되거나 재사용 가능한 영역을 설정

ex) 블로그의 포스트나 신문기사

일반 적으로 h1~h6 태그 사용

작성일자와 시간을 <time>의 datetime 속성으로 작성

다른 곳을 분리하더라도 콘텐츠로서의 가치를 잃지 않음!

출처 : mdn

<section> : 문서의 일반적인 영역

<h1>~<h6> 태그 사용

※ div는 의미없이 사용하는데 section은 의미를 가지고 있기 때문에 제목을 포함

※ section과 article 서로 자손이 되는 것 가능

<aside> : 별도 콘텐츠 설정 ex) 광고, 기타 링크

<nav> : Navigaion의 약어. 다른 페이지 링크를 제공하는 영역

ex) 메뉴 Home, About, Contact, 목차, 색인

일반적으로 영역을 설정하는 태그들은 블록 요소다

<address> : body, article, footer 등에서 연락처정보 영역

ex) 주소, 이메일, 전화번호 등의 연락처 정보

출처: mdn

<div> : division의 약어. 아무 의미없는 콘텐츠 영역. 막 갖다쓸 수 있다.

css나 js를 삽입해서 div가 존재하는 특정 영역에 스타일링하거나 제어 할 수 있음

꾸미는 목적으로 많이 사용된다.

예제

티스토리툴바