[HTML] 용도에 따른 태그 사용 (Semantic tag) - header,nav,footer,main,aside,section,article

시맨틱 태그가 무엇인가요?

HTML5의 여러 태그들은 그 자체로 어떤 의미를 지닙니다.

이번 시간에 배울, 왼쪽 사이드바에 나열된 태그들은
기능적으로는 div 태그와 동일하지만 각각의 종류 자체가
페이지에서 해당 요소가 갖는 의미와 역할을 나타내죠.

 

시맨틱 태그를 쓰면 뭐가 좋은가요?

1. 웹 접근성 개선
2. 스크린 리더로 페이지를 보는 사람들이 필요한 정보를 보다 수월히 찾을 수 있습니다.
3. SEO (Search Engine Optimization)
4. 검색엔진이 페이지를 분석할 때 각 정보의 종류를 파악하는데 도움이 됩니다.
5. 유지보수와 가독성
6. 모든 구획들이 div들로 구성된 페이지보다 코드를 읽고 구조를 파악하기 쉽습니다.

태그별 설명

header

페이지나 구획의 제목 역할을 하는 요소들을 두는데 사용됩니다.
로고와 제목, 검색창 등이 들어갑니다.

MDN 문서 보기

nav

링크들을 포함하는 태그입니다.
주로 페이지의 메뉴들이나 색인 등에 사용됩니다.

MDN 문서 보기

footer

페이지나 구획의 최하단에 보여지는 푸터에 사용됩니다.
페이지의 주인 연락처 및 저작권 정보 등이 들어갑니다.

MDN 문서 보기

main

페이지의 주요 내용이 들어가는 곳입니다.
페이지에서 하나만 존재해야 합니다.

MDN 문서 보기

aside

사이드바 등 주요 내용과 간접적으로 연관된
컨텐츠를 포함합니다.

MDN 문서 보기

section

페이지의 컨텐츠를 일정 단위의 구획으로 나누는데 사용됩니다.
더 작은 단위의 컨테이너는 div를 사용합니다.

MDN 문서 보기

article

페이지 내에서 재사용될 수 있거나 페이지로부터 독립적인,
즉 다른 페이지에서도 사용될 수 있는 컨텐츠에 사용합니다.
기사나 블로그 포스트, 댓글 등에 사용됩니다.