Chapter 1-17. 의미론적인 코드-시맨틱 태그(HTML)

📌 시맨틱 태그란?

시맨틱은 **‘의미론적인’**이라는 뜻을 가지고 있습니다. 시맨틱 태그는 웹 콘텐츠의 의미를 명확히 표현하는 HTML 태그들입니다.
시맨틱 태그를 사용하면, 브라우저와 개발자에게 콘텐츠의 목적과 역할을 정확하게 전달할 수 있습니다.

🔹 시맨틱 태그의 장점

1. 검색엔진 최적화(SEO):
   • 시맨틱 태그는 검색엔진이 콘텐츠를 더 잘 이해하고 인덱싱할 수 있게 도와줍니다.
2. 웹 접근성 향상:
   • 시각 장애가 있는 사용자가 화면 판독기를 사용할 때, 시맨틱 태그는 내용을 쉽게 탐색할 수 있게 합니다.
3. 가독성 및 코드 유지보수:
   • 코드의 가독성이 좋아지고, 불필요한 컨테이너 태그(예: <span>, <div>)의 사용을 줄여 코드 작성이 편리해집니다.

---

🖥️ 1. 대표적인 시맨틱 태그들

🔸 <article>: 독립적인 콘텐츠

• 독립적으로 배치되는 콘텐츠를 정의합니다. 예를 들어, 뉴스 기사나 블로그 글 등을 <article> 태그로 감쌀 수 있습니다.

<article>
  <h2>오늘의 뉴스</h2>
  <p>내용이 여기에 들어갑니다.</p>
</article>

🔸 <aside>: 별도의 콘텐츠

• 본문에서 관련이 있지만 부수적인 콘텐츠를 표시합니다. 예를 들어, 사이드바나 광고 등을 포함할 수 있습니다.

<aside>
  <h3>추천 글</h3>
  <p>이 글을 추천합니다.</p>
</aside>

🔸 <details>: 추가적인 상세한 정보

• 사용자가 클릭하여 세부 정보를 볼 수 있는 항목을 제공합니다.

<details>
  <summary>자세히 보기</summary>
  <p>여기에 추가 정보가 들어갑니다.</p>
</details>

🔸 <figure>와 <figcaption>: 설명이 붙는 독립 콘텐츠

• **<figure>**는 이미지를 포함한 콘텐츠, **<figcaption>**은 그 이미지에 대한 설명을 제공하는 태그입니다.

<figure>
  <img src="cat.jpg" alt="고양이 사진">
  <figcaption>고양이의 귀여운 모습</figcaption>
</figure>

🔸 <footer>: 맺음말

• 페이지나 섹션의 하단에 들어가는 정보, 예를 들어 저작권 정보, 연락처 등을 표시하는 데 사용됩니다.

<footer>
  <p>저작권 © 2023</p>
</footer>

🔸 <header>: 머릿말

• 웹 페이지나 섹션의 상단에 위치한 제목, 내비게이션 등을 포함합니다.

<header>
  <h1>웹 페이지 제목</h1>
</header>

🔸 <main>: 주된 콘텐츠

• 웹 페이지에서 주요 콘텐츠를 나타내는 태그입니다. 페이지의 핵심적인 내용만을 포함하며, 나머지 정보는 다른 시맨틱 태그로 구분합니다.

<main>
  <h2>주요 콘텐츠</h2>
  <p>본문 내용이 여기에 들어갑니다.</p>
</main>

🔸 <nav>: 네비게이션 링크

• 내비게이션 메뉴나 링크를 정의하는 데 사용됩니다.

<nav>
  <ul>
    <li><a href="#home">홈</a></li>
    <li><a href="#about">소개</a></li>
    <li><a href="#contact">연락처</a></li>
  </ul>
</nav>

🔸 <section>: 콘텐츠의 한 섹션

• 페이지 내에서 하나의 주제나 섹션을 나타내는 태그입니다. **<article>**과는 달리, 콘텐츠의 부분적인 그룹화입니다.

<section>
  <h2>공지사항</h2>
  <p>이번 주의 공지사항은 다음과 같습니다.</p>
</section>

🔸 <summary>: <details>의 헤더

• <details> 태그의 제목을 정의하는 태그입니다. 클릭하면 상세 정보가 펼쳐지도록 합니다.

<details>
  <summary>자세히 보기</summary>
  <p>추가 정보가 여기 들어갑니다.</p>
</details>

🔸 <time>: 시간 강조

• 날짜와 시간을 표현할 때 사용되는 태그입니다. datetime 속성을 사용하여 시간을 명시합니다.

<time datetime="2023-03-25">2023년 3월 25일</time>

---

🚩 결론

• 시맨틱 태그는 웹 페이지의 의미를 명확히 표현하는 중요한 요소입니다. 이를 통해 SEO(검색 엔진 최적화)와 웹 접근성을 개선할 수 있습니다.
• 검색 엔진은 시맨틱 태그의 의미를 중요한 단서로 보고, 스크린 리더와 같은 도구는 사용자가 페이지를 탐색하는 데 도움을 줍니다.
• HTML5에서는 시맨틱 태그를 활용하여 가독성과 유지보수성을 높일 수 있습니다.