시맨틱 태그

✒️ 2025-05-16 11:09 내용 수정

해당 태그가 감싸는 컨텐츠의 의미나 역할을 명확하게 전달하기 위한 요소

태그	설명
`<header>`	Heaer, 헤더 영역을 표시하는 태그
`<footer>`	Footer, 푸터 영역을 표시하는 태그
`<aside>`	사이드바 영역을 표시하는 태그
`<main>`	메인 컨텐츠가 들어가는 영역을 표시하는 태그
`<section>`	주제별로 묶는 영역을 표시하는 태그
`<article>`	블로그, 뉴스 등 별도의 독립적인 컨텐츠로 분리 가능한 내용을 묶는 태그
`<nav>`	메뉴 영역을 묶는 태그
`<details>`	추가 정보를 담는 태그 기본적으로 내용을 숨기고, 사용자가 영역 클릭 시 컨텐츠 표시
`<summary>`	`<details>` 요소의 요약이나 제목을 제공하고, 사용자가 클릭하면 상세 정보를 보여줄 수 있는 트리거 역할
`<figure>`	문서의 주요 흐름과는 독립적인 컨텐츠를 정의할 때 사용
`<figcation>`	`<figure>`의 설명을 추가하는 태그

기타 사항

시맨틱 코드에서 <header>와 <footer>는 구역마다 1개씩 넣을 수 있다.
- ex) 문서의 위와 아래의 <header>, <footer>
- <article> 내의 <header>, <footer>
<nav>는 왼쪽이나 오른쪽, 사이트에 따라 상단에 배치할 수 있다.
<main>은 반드시 문서 당 1개만 넣어야 한다.

삽화, 도표, 비디오, 오디오, 코드, 설명 등 문서의 주요 흐름과는 독립적인 컨텐츠를 정의할 때 사용하는 시맨틱 태그다.
- 참고 자료 : https://developer.mozilla.org/ko/docs/Web/HTML/Element/figure
- https://tcpschool.com/html-tags/figure
문서의 내용과는 연관성을 가지지만, 해당 컨텐츠의 위치가 문서의 주요 흐름과는 독립적이어서 이를 제거해도 문서의 흐름에 영향을 주지 않아야 한다.
figcaption 태그를 함께 사용하여 설명을 붙일 때도 있다.

<figure>
	<img src="image.jpg" alter="img">
	<figcaption>figure의 설명</figcaption>
</figure>