문서구조 잡기 header main footer nav article section aside div

header main footer nav article section aside div

 

문서 내용에 직접적 영향은 없으나 구조 파악이 용이하게 하기위해 만들어진 tag다. 웹 문서 구조를 만드는 주요 시맨틱(semantic) 태그다.

 

header

사이트에서 헤더는 주로 맨 위쪽이나 왼쪽에 있으며 그 속에 로고, 검색, 메뉴 등이 포함된다.

 

main

웹 문서에서 핵심이 되는 내용(메뉴, 로고 등 페이지마다 똑같은 내용이 아닌)을 넣는다.

main tag는 웹 문서에서 한 번만 사용할 수 있다.

 

footer

웹 문서에서 보통 맨 아래쪽에 있는 푸터 영역이다. 저작권 연락처 등을 넣는다.

header, section, article등 다른 tag들을 사용할 수 있다.

 

nav

내비게이션 의미로, 다른 위치나 문서로 연결하는 링크 등을 배치한다.

딱히 코드 위치에 영향을 받지 않으므로 header, footer 등에 포함될 수 있고 독립해서 사용할 수 있다.

nav를 여러개 사용할 경우 id속성으로 각각 다른 스타일을 적용할 수 있다.

 

Article

신문이나 잡지의 기사처럼 보여줄 세부 내용을 넣는다.

article tag를 여러 개 사용할 수 있고 section tag를 넣을 수도 있다.

 

Section

 웹 문서에서 콘텐츠 영역을 나타낸다.

article: 블로그 포스트처럼 독립된 콘텐츠.
section: 몇 개의 콘텐츠를 묶는 용도로 사용.

 

Aside

본문 내용 외에 왼쪽 오른쪽 아래쪽 등에 사이바를 만들 때 사용.

 

Div

영역을 구별하거나 스타일로 문서를 꾸미는데 사용.

2022.11.13 - Html 문단 줄바꿈 (div, p, br) tag

 

header, section 같은 시맨틱 태그가 나오기 전에 

<div id="header"> <div class="detail">처럼 사용하여 문서 구조를 만들거나 스타일을 적요할 때 사용했다.