HTML 기초 포스팅에서 짧게 다뤘던 시맨틱 태그를 이번 포스팅에서 조금 더 자세하게 이야기 하려고 한다.
시맨틱 태그란 ?
시맨틱(semantic)은 '의미의', '의미론적인'라는 뜻을 가진 형용사다. 즉, 시맨틱 태그는 의미를 부여한 태그라는 뜻으로, HTML5에서 처음 등장했다.
시맨틱 태그를 사용해야 하는 이유
웹 문서 레이아웃을 만들 때 시맨틱 태그를 사용하지 않을 때는 <div> 태그를 활용하여 웹 문서를 만들었다. 그럼에도 시맨틱 태그를 사용해야 하는 이유는 크게 3가지가 있다.
1. HTML 문서의 가독성과 유지보수가 쉬워진다.
만약 웹 문서 레이아웃이 div만 사용하여 만들었다고 가정했을 때 어디가 어느 부분인지, 어떤 영역인지 한눈에 파악하기 어렵다. 하지만 시맨틱 태그를 활용하면 유지보수를 할 때나 다른 개발자가 코드를 파악하기 쉬워진다.
2. 웹 브라우저가 HTML만 보고 영역을 파악할 수 있다.
웹 브라우저가 HTML만 보고 상단(header), 본문(main), 하단(footeR), 사이드(side)등 이곳이 어느 영역인지 쉽게 파악할 수 있다. 이러한 구조적인 요소들을 제공하면 시각적으로 화면을 구성하는 것 외에도 사용자들이 웹 페이지를 이해할 수 있으며 이는 웹 접근성 시각에서 볼 때 중요하다.
3. 검색엔진이 검색을 수행할 때 HTML 내의 태그 분석할 수 있다.
검색엔진의 검색로복에서는
태그가 사용된 콘텐츠는 일반적으로 뉴스 기사, 블로그 게시물, 포럼 등과 같이 배포하거나 재사용될 수 있는 컨텐츠로 인식한다. 반대로 태그로 묶은 콘텐츠는 문서의 일부분을 표현하며 개별적으로 재배포될 수 없는 구조적 단위로 인식된다. 때문에 검색엔진의 처리 방식에 따라 콘텐츠의 재배포 가능성이나 포함 여부가 달라질 수 있어 적절하게 사용해야 한다. 
시맨틱 태그 종류
<header>
<header> 태그는 보통 사이트의 도입부, 즉 머릿 부분에 사용되며 사이트의 로고나 제목 등을 기술할 때 사용한다.
<header> 태그 안에 부수적인 태그들이 추가로 들어갈 수 있으며 주로 <form>태그를 사용해 검색창을 넣거나 <nav> 태그를 사용해 사이트 메뉴를 넣는다. 문서 내의 여러 개의 <header> 태그를 작성하는 것 또한 가능하다 .
<main>
<main> 태그는 웹 페이지의 주요 콘텐츠 영역을 나타낼 때 사용하며 한 웹 페이지에는 반드시 한 번만 사용되어야 한다. <main> 태그 내의 콘텐츠는 해당 문서의 중심이 되는 주제나 확장되는 콘텐츠로 구성되어야 하며 문서 전번에 걸쳐 반복되는 내용을 포함해서는 안 된다.
주로 <header>와<footer>사이에 위치하며 뉴스 기사, 제품 소개, 본문 내용 등이 <main>태그로 감싸질 수 있다.
<nav>
<nav> 태그는 내비게이션 표현을 위한 태그로써 현재 문서 내에서 또 다른 문서에 대한 탐색 링크를 제공하는 목적인 페이지 섹션을 나타낸다. 탐색 섹션의 일반적인 예는 메뉴, 목차 및 색인이 있다.
<header>,<footer>,<aside> 태그를 안에 포함시킬 수도 있고 독립해서 사용할 수도 있다. 다시 말해, <body> 태그 안에는 어디든지 사용이 가능하다.
<footer>
<footer> 태그는 일반적으로 웹 페이지 마지막 부분에 위치하는 태그로 보통 저작권 정보나 연락처 정보, 사이트 맵, 개인정보 보호 정책 등과 같은 내용이 들어가는 부분이다.
<asdie>
<aside> 태그는 주로 웹 페이지의 측면이나 가장자리에 위치하며, 로 부가 정보를 제공하거나 사이드바 영역을 정의하는 데 사용된다.
예를들어 블로그 게시물에서 작성자의 소개, 관련 글 목록, 광고배너 등을 <aside> 태그로 감싸서 표시한다.
<article>
<article> 독립적인, 완결된 콘텐츠 블록을 나타내는 데 사용된다. 주로 뉴스 기사, 블로그 게시글, 기사 등과 같이 독립적으로 구성되는 콘텐츠 영역을 표시하는데 사용한다.
<article> 태그는 주로 제목(<h1>~<h6>)과 함께 사용되며, 내부에는 해당 콘텐츠의 본문이 들어간다.
스크린 리더 사용자나 다른 보조 기술을 사용하는 사용자들은 <article> 태그로 정의된 독립적인 콘텐츠 블록을 쉽게 인식할 수 있다. 또한, 검색 엔진은 <article>태그를 이용하여 웹 페이지의 독립적인 콘텐츠 블록을 쉽게 인식할 수 있다.
<section>
<section> 태그는 웹 페이지의 구획을 나누어 그룹화 할 때 사용한다. 예를 들어 웹 페이지의 각각의 섹션, 챕터, 주제, 기능 영역 등을 <section> 태그로 표시한다.
<section> 태그 내부에 다른 시맨틱 태그인 <article>, <aside>, <header>, <footer> 등을 포함시켜 보다 명확한 의미 전달과 구조화를 할 수 있다.
<figure> | <figcaption>
<figure> 태그는 독립적인 콘텐츠를 나타내며, 일반적으로 이미지, 도표, 사진 등과 함께 설명하는 캡션(<figcaption>)을 포함한다.
<figcaption> 은 <firgure> 요소 내에서 콘텐츠의 설명이나 캡션을 나타낸다.
<figure>
<img src="image.jpg" alt="이미지 설명">
<figcaption>이미지 캡션</figcaption>
</figure>
<details> | <summary>
<details> 태그는 추가 정보나 세부 사항을 제공하는 컨텐츠의 영역을 나타낸다. 기본적으로 접혀진 상태이며, 사용자가 클릭하여 내용을 펼칠 수 있다.
<summary> 태그는 요소의 요약 또는 제목을 나타낸다. 주로 사용자가 클릭하여 세부 사항을 펼치는 트리거 역할을 한다. <details> 요소의 첫 번째 자식 요소로 위치해야 한다.
<details>
<summary>요약 내용</summary>
<p>처음 알게된 details란 태그 신기하다. 잘 활용해봐야지</p>
</details>처음 알게된 details란 태그 신기하다. 잘 활용해봐야지
<mark>
<mark> 태그는 문서 내에서 특정 부분을 강조 표시하는 데 사용된다. 주로 하이라이트 효과를 적용하거나 검색 결과에서 키워드를 강조하기 위해 활용된다.
<mark>강조할 텍스트</mark>강조할 텍스트
<time>
<time> 태그는 날짜, 시간 또는 시간 정보를 나타낸다. 웹 페이지에서 날짜와 시간에 대한 의미를 제공하고 날짜를 기계가 읽을 수 있는 형식으로 변환하는 <datetime> 속성을 포함한다.
<p>
이 문서는 마지막으로 업데이트된 시간은 <time datetime="2023-06-08T21:30:00">21:30</time>입니다.
</p><meter>
<meter>태그는 알려진 범위 내의 스칼라 값 또는 분수 값을 나타낸다. value 속성은 측정된 값을, min 속성은 최소값을, max 속성은 최대값을 지정한다.
<meter value="70" min="0" max="100">70%</meter> 은 0부터 100 사이의 범위에서 70%의 값을 나타낸다.
70%
<progress>
<progress> 태그는 작업의 진행 상태를 나타낸다. value 속성은 진행된 작업의 양을, max 속성은 전체 작업량을 나타낸다.
<progress value="50" max="100">50%</progress> 은 작업의 50%가 완료된 상태를 의미한다.
50%
<blockquote> | <cite>
<blockquote> 태그는 다른 소스에서 인용된 글을 나타낸다. 주로 인용된 텍스트 블록을 감싸는 용도로 사용되고 <cite> 요소를 같이 사용할 수 있다.
<cite> 태그는 창작물의 제목, 출처, 작성자 등의 출처를 나타낸다.
<q>
<q> 태그는 짧은 인용구를 나타낸다. 브라우저는 일반적으로 <q>태그로 묶인 텍스트를 큰따옴표로 감싸서 표시한다.
<h1> ~ <h6>
<h1> ~ <h6> 태그는 제목 레벨을 나타낸다. <h1>이 가장 높은 수준의 제목이며, <h6>이 가장 낮은 수준의 제목이고 이는 페이지 구조와 정보의 중요도를 나타내는 데 사용된다.
보통 웹 페이지에서는 한 번에 하나의 <h1> 태그를 사용하고, 하위 제목은 순차적으로 <h2>, <h3>, ..., <h6> 태그를 사용하여 구조화 한다.
