⭕️ semantic tags(시멘틱 태그)란?
semantic의 사전적 의미는 "의미의, 의미론적인"이다.
시멘틱 태그는 태그의 이름만으로 의미를 전달할 수 있다.
예시를 들어보자면, 태그 <div> 만을 썼을 땐 안에 담긴 내용이 무엇인지 정확하게 유추하기 어렵다. 반면 태그 <main>를 사용했을 땐 문서의 주요 내용을 나타냄을 알 수 있다.
📌 semantig tag의 종류와 기능
<header>
문서 상단에 위치하여 소개에 도움을 주는 컨텐츠를 나타낸다. 제목, 로고, 검색 폼, 작성자 이름등의 요소를 포함할 수 있다.
<main>
해당 문서의 주요 컨텐츠를 나타낸다
<article>
문서 안에서 독립적으로 구분해 재사용할 수 있는 내용을 나타낸다. 블로그, 뉴스 기사 등을 주로 묶는다.
<section>
문서 안에서 내용을 다른 주제로 구분짓기 위해 사용된다. 서로 관계 있는 문서들을 분리한다.
<aside>
문서의 주요 내용과 간접적으로 연관된 부분을 나타낸다. 주로 사이드바 또는 콜아웃 박스로 표현한다.
<details>
컨텐츠의 요소를 접기/펼치기 목록으로 숨기거나 보여줄 수 있다. details 요소의 제목은 summary 태그를 사용한다.
<summary>
summary 요소를 클릭하면 상세 요소의 상태가 열리거나 닫힌다. 접기/펼치기 목록을 사용시 details태그를 사용한다면 접기/펼치기 목록의 제목은 summary태그를 사용한다.
<nav>
nav가 자주 쓰이는 예제는 메뉴, 목차, 색인이다. nav요소는 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크로 이어주는 섹션을 의미한다.
<figcaption>
figure의 자식 요소이다. figure 요소에 캡션을 만든다. 즉, figure요소가 포함하는 컨텐츠에 대한 설명을 나타낸다.
<figure>
이미지나 삽화, 사진 등이 등장할 때 이를 설명하는 문구로 사용된다. figcaption요소는 이에 대한 설명을 담는다.
<footer>
웹페이지의 하단 영역을 만들 때 사용되며 주로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담는다.
<mark>
현재 맥락과 관련이 깊거나 중요하여 표시 또는 하리라이트한 부분을 나타낸다.
<time>
시간의 특정 지점 또는 구간을 나타낸다. time요소가 나타낼 수 있는 시간은 다음과 같다.
- 24시간 표기법 시계의 시간.
- 정확한 그레고리력 날짜.
- 유효한 시간 범위.
출처: MDN
