[HTML] 시멘틱 태그

시멘틱 태그  Semantic Tag

시멘틱 태그는 HTML5에서 도입된 태그로, 문서의 구조와 의미를 명확히 하기 위해 사용된다.

주요 시멘틱 태그에는 <header>, <footer>, <article>, <section>, <nav>, <aside> 등이 있으며, 각각의 태그는 고유한 의미와 용도를 가지고 있다.

 

 

시멘틱 태그 장점

 

div로만 이루어진 코드는 가독성이 낮아 쉽게 원하는 부분을 찾기 어렵다.

반면 시멘틱 태그를 사용한 코드는 가독성이 높아 원하는 부분을 상대적으로 쉽게 찾을 수 있다.

시멘틱 태그가 가진 고유한 기능을 통해 번거로운 작업을 건너 뛸 수도 있다.

또한 시맨틱 태그는 관련 키워드와 문구에 대해 웹페이지를 최적화하는데 도움이 되며, 검색엔진에 풍부하고 구조화된 데이터를 제공할 수 있다.

 

 

시멘틱 태그 정리

(시멘틱 태그 관련 사이트)

예시와 설명이 자세하므로 해당 사이트를 참고하는 것을 추천한다.

Semantics - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN

 

가능한 요소들이 100개 정도 있다고 나와있는데...

이 중 일부만 간략히 정리해보도록 하겠다.

 

태그	설명	예시
<article>	반복되는 컨텐츠를 그룹할 때 사용한다.	뉴스 기사, 블로그 포스트, 사용자 리뷰 등
<section>	섹션을 구분해 그룹할 때 사용한다.	챕터, 탭, 슬라이드 등
<nav>	내비게이션 바에 사용한다.	메뉴, 탐색 바 등
<aside>	사이드 바에 사용한다.	사이드바, 인용문, 광고 등
<header>	머리글에 사용한다.	로고, 사이트 제목, 내비게이션 링크 등
<footer>	바닥글에 사용한다.	저작권 정보, 연락처, 관련 링크 등
<main>	문서의 주요 콘텐츠를 그룹할 때 사용한다.	문서의 핵심 내용 등
<figure>	독립적인 콘텐츠(이미지, 도표 등)와 그 설명을 포함한다.
<figcaption>	<figure> 요소의 설명을 설정한다.
<details>	접기 기능이 붙어있는 태그로 사용자에게 정보를 바로 공개하지 않을 때 사용한다.	접는 글
<summary>	<details> 가 접혀있을 때 텍스트를 설정한다.