what is Semantic Elements?

• 단순히 스타일링을 위한 <div> 태그와 달리 문서의 내용을 더 쉽게 이해할 수 있는 의미를 가진 새로운 태그 요소이다.

• 페이지의 구조를 더 잘 나타낼 수 있다.

이러한 Semantic Tag를 바탕으로 검색엔진은 웹사이트의 정보(키워드)를 수집한다.

<header> : HTML 문서나 section 부분에 대한 header를 정의한다. (ex. 메인 메뉴, 로고 등)

<nav> : 보통 웹페이지의 메뉴, 문서 내의 Navigation 요소, 링크 등

<aside> : 페이지의 오른쪽이나 왼쪽에 부수적인 내용을 포함해야 할 때 사용한다. (ex. 광고, 부가메뉴, 참고 문서, 링크)

<section> : 문서의 section을 정의하며 독립적인 구획을 나타낸다.

<article> : 독립적인 글 (ex. 뉴스기사, 블로그 글 등), 여러 개의 article을 가질 수 있다. (section 포함)

<main> : body의 주요 콘텐츠

참고: hidden 속성 없이 2개 이상의 main 요소가 있어서는 안된다.

<footer> : 문서 하단에 존재하며 작성자의 정보(이메일, 주소, copyrights 등)를 포함한다.

예시 그림 > <img src=https://www.w3schools.com/html/img_sem_elements.gif />

참조: w3school

Reference TCPschool > MDN