문서구조 태그정리

"나의 첫 HTML&CSS 웹 디자인" 이라는 책을 공부하며 정리한 글입니다.

문서 구조를 정하는 태그들을 알아보자!

문서 구조를 정하는 것은 유지보수도 수월하고, 검색엔진을 최적화하여 검색시 상위에 올릴 수 있는 등 장점이 매우매우 많다.

그래서 구조를 정하는 건 매우 중요하다.

이제 그 중요한 역할을 하는 태그들을 알아보자.

(참고로, header, main, aside, footer가 같은 위계를 가지고 있다.)

header

제목과 내비게이션을 포함한 태그

nav

페이지 이동하는 내비게이션을 감싸는 태그

main

header 다음으로 오는 부분.

페이지의 주제가 되는 부분에 한 번만 사용하는 태그

article

자기완결성이 있는 요소에 감싸는 태그.

트위터 게시물이나 인스타 게시물같이 외부에서도 따로 쓰일 수 있는 걸 말한다.

aside

사이드바를 나타내는 태그로,

main 다음으로 오는 부분이다.

footer

가장 아래에 있는 요소들을 묶은 태그.

저작권 정보, 주소, 사업자 정보를 표시할 때가 많다.

section

아웃라인이라는 개념이 있다.

아웃라인은 책의 목차이다.

문서의 계층 구조를 한눈에 볼 수 있도록 아웃라인을 정한다

(이렇게 하는 이유는 검색엔진 최적화, 유지보수 수월 등이 있다.)

그 이웃라인을 짜도록 도와주는 게 section 태그이다.

뭔가 분리가 안되어있는 느낌이 든다면 section으로 묶어준다.

다만, 섹셔닝 태그 (콘텐츠에 의미가 있는 태그. header,main,aside,footer 제외)를 감싸야한다.