시맨틱 태그는 포함된 콘텐츠의 특정 의미를 정의하고 목적을 갖는 태그를 의미한다.
- 요소 : <header>, <nav>, <article>, <section>, <footer>, <main> 등등…
<div> 태그의 기능과 마찬가지로 block element이지만, 각 콘텐츠의 의미를 가진다는 점이 특징이다!
🤔 그럼 <div>태그가 있는데 왜 등장했을까?
HTML5 이전에는 <div> 태그에 id또는 클래스 등으로 구분하며 구조를 설계하거나 <span> 태그를 사용해서 콘텐츠가 어떤 의미를 가지는지, 어떤 역할을 수행하는지를 명시했지만 점점 페이지 내부의 요소들이 늘어날 수록 직관성이 떨어질 수 있다.
따라서, 좀 더 명시적이면서 직관적인 구조의 설계가 가능하도록 시맨틱 태그가 등장한 것이다.
스타일 지정이나 스크립팅 목적으로 필요한 경우를 제외하고는 <div>와 같은 의미가 없는 요소나 속성을 사용하지 않는 것이 좋다.
출처 : https://seo.tbwakorea.com/blog/what-is-semantic-tag/
🔍 시맨틱 태그 종류 및 의미
<article>
- 독립적인 콘텐츠를 위한 태그
- 예: 블로그 포스트, 뉴스 기사, 제품 리뷰
- 특징: 독립적으로 배포 또는 재사용 가능
<aside>
- 주요 콘텐츠와 간접적으로 연관된 부가 정보를 위한 태그
- 주로 사이드바에 사용
<details> & <summary>
<details>: 접었다 펼 수 있는 추가 정보를 정의<summary>:<details>내부에서 항상 보이는 제목 부분- 특징: 사용자 상호작용 가능, 기본적으로 접혀있음
<figure> & <figcaption>
<figure>: 독립적인 콘텐츠(이미지, 다이어그램 등)를 위한 컨테이너<figcaption>:<figure>내부의 캡션 정의
<footer>
- 문서나 섹션의 바닥글
- 포함 내용: 연락처 정보, 저작권 정보, 관련 링크 등
<header>
- 문서나 섹션의 머리글
- 포함 내용: 로고, 네비게이션, 제목, 소개 정보 등
<main>
- 문서의 주요 콘텐츠를 담는 태그
- 특징: 문서 내에 하나만 존재해야 함
<nav>
- 주요 네비게이션 링크를 위한 태그
- 예: 메뉴, 목차, 색인
<section>
- 문서의 독립적인 섹션을 정의
- 주제별 콘텐츠 그룹화에 사용
- 중첩 가능:
<section>안에<section>또는<article>포함 가능
