semantic elements = elements with a meaning
시맨틱 요소는 브라우저와 개발자에게 요소의 의미를 명확하게 묘사하는 요소를 의미한다. <p>, <div>와 같이 태그 이름만으로 요소의 내용 및 의미를 알 수 없는 요소는 시맨틱 요소가 아니다.
또한 시맨틱 요소는 코드들의 의미를 알기 쉽게 구분해주며 컨텐츠를 공유하며 재사용할 수 있게 해준다.
HTML에서 시맨틱 요소들을 사용해 웹 페이지의 각 부분들을 정의 할 수 있다.
-
<section>: 문서의 섹션을 정의하며 일반적으로 제목이 있는 주제별 컨텐츠 그룹의 요소를 의미한다. (W3C HTML documentation) -
<article>: 뉴스기사나 일반적인 포스트들처럼 자체적이고 독립적으로 의미를 가지는 요소이다. -
<aside>: 사이드바와 같이 컨텐츠와 관련있지만 분리되는 컨텐츠로 구성된 요소이다. -
<figure>: 그림, 표, 이미지 등과 같은 태그에 포함되는 내용의 요소이다. -
<figuration>:<figure>내부의 컨텐츠에 대한 부연 설명 -
<details>: 사용자가 열고 닫을 수 있는 부가적인 설명을 포함한 요소이다. -
<main>: 문서의 주요 내용을 지정한다.
Reference