Semantic element (의미 요소)

aepee·2020년 9월 16일

시맨틱하다는 것은 말 그대로 의미를 가진다는 것 !

문서의 정보를 잘 나타내려면 의미에 맞는 요소를 적절히 사용해야 한다.
html 요소의 목적 / 역할을 나타내는 주요 시맨틱 요소를 알아보자.

`h1 ~ h6`

<h1>은 페이지의 최상위 제목을 나타냄

위의 두 요소는 글자 크기도 크고.. 누가봐도 제목처럼 보인다.
첫 번째는 <h1>을 사용하여 가장 중요한 제목임을 나타낸 것이고, 두 번째는 css로 글자 크기, 굵기를 조절해 아무런 의미 없는 <div>를 제목처럼 보이게 만든 것이다.
보기에는 똑같은 제목같지만 아래는 아무 의미를 가지지 않는 텍스트일 뿐이다.

`header`

페이지 상단에 위치하여 소개 및 탐색에 도움을 주는 컨텐츠를 나타냄.
제목, 로고, 검색 폼, 작성자 이름 등을 표현

`footer`

페이지 하단에 작성자, 저작권 정보, 관련 문서 등을 표현

`section`

HTML 문서의 독립적인 구획을 나타냄

`article`

문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타냄.
게시판과 블로그 글, 매거진이나 뉴스 기사 등을 표현

`aside`

문서의 주요 내용과 간접적으로만 연관된 부분을 나타냄.
사이드바나 콜아웃 박스로 표현

`nav`

문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획.
메뉴, 목차, 색인 등을 표현

그 외 요소들

<details>
<figcaption>
<figure>
<main>
<mark>
<summary>
<time>
...

💡 만약 시맨틱 요소 대신 전부 <div>와 같은 요소들을 사용한다면..?

사실 HTML4까지는 시맨틱 요소가 사용되기 전이라 <div id="header"> <div id="nav"> 이런 식으로 사용되었다. 시맨틱 요소들은 HTML5부터 추가된 개념이다.

시맨틱 요소들은 각각의 목적이나 역할을 브라우저와 개발자에게 명확히 나타낸다. 때문에 코드를 보지 않고 태그만 보고도 문서의 정보를 쉽게 파악할 수 있다.

시맨틱을 사용하면 얻을 수 있는 이점이 몇가지 더 있다.