시멘틱 코드

Semantic HTML은 HTML5에서 중요한 개념으로, 요소의 의미를 명확히 나타내는 태그를 사용하여 콘텐츠의 구조를 정의하는 것을 뜻한다. 이를 통해 개발자, 브라우저, 그리고 스크린 리더와 같은 보조 기술이 문서를 더 잘 이해할 수 있도록 한다.

---

1. Semantic HTML이란?

• 의미 있는 태그 사용: 단순히 시각적 스타일링이 아닌, 태그가 포함된 콘텐츠의 목적과 역할을 정의.
• 의미 전달: 문서 구조를 명확히 하고, 브라우저와 검색 엔진이 콘텐츠를 이해하는 데 도움을 줌.
• 접근성 향상: 스크린 리더가 사용자에게 더 나은 경험을 제공.

Semantic 태그 예시

• <header>, <footer>, <nav> 같은 태그는 해당 콘텐츠의 역할을 즉시 알 수 있도록 정의.
• <div> 또는 <span>은 비시멘틱(non-semantic) 태그로, 별다른 의미를 전달하지 않음.

---

2. 주요 Semantic HTML 태그

2.1. 문서 구조 관련 태그

<header>

• 페이지 또는 섹션의 머리글.
• 일반적으로 로고, 네비게이션, 제목 등이 포함됨.

<header>
  <h1>My Website</h1>
  <nav>
    <a href="#home">Home</a>
    <a href="#about">About</a>
  </nav>
</header>

<footer>

• 페이지나 섹션의 바닥글.
• 저작권 정보, 연락처, 추가 링크 등을 포함.

<footer>
  <p>&copy; 2024 My Website</p>
</footer>

<main>

• 페이지의 주요 콘텐츠를 나타냄. 동일 문서 내에서 한 번만 사용.

<main>
  <article>
    <h2>Welcome!</h2>
    <p>This is the main content of the page.</p>
  </article>
</main>

<nav>

• 네비게이션 링크의 모음.

<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

<section>

• 관련 있는 콘텐츠 그룹화.
• 제목과 함께 사용하여 특정 주제의 콘텐츠를 나눌 때 적합.

<section>
  <h2>About Us</h2>
  <p>We are a team of passionate developers.</p>
</section>

2.2. 콘텐츠 관련 태그

<article>

• 독립적인 콘텐츠 조각(블로그 글, 뉴스 기사, 리뷰 등)을 나타냄.
• 독립적으로 배포되거나 재사용될 수 있음.

<article>
  <h2>Breaking News</h2>
  <p>Here is the latest news in tech...</p>
</article>

<aside>

• 페이지의 주요 콘텐츠와 별도로 제공되는 추가 정보(광고, 관련 링크 등).

<aside>
  <h3>Related Links</h3>
  <ul>
    <li><a href="#link1">Link 1</a></li>
    <li><a href="#link2">Link 2</a></li>
  </ul>
</aside>

<figure> & <figcaption>

• 시각적 콘텐츠(이미지, 차트 등)를 그룹화.
• figcaption은 해당 콘텐츠의 설명 제공.

<figure>
  <img src="image.jpg" alt="A beautiful landscape">
  <figcaption>A breathtaking view of nature.</figcaption>
</figure>

<blockquote>

• 긴 인용문을 나타냄.

<blockquote cite="https://example.com">
  "This is a meaningful quote."
</blockquote>

2.3. 텍스트 관련 태그

<time>

• 날짜나 시간을 나타냄.
• ISO 8601 형식을 사용하면 컴퓨터가 시간 데이터를 이해할 수 있음.

<p>Published on <time datetime="2024-12-27">December 27, 2024</time>.</p>

<mark>

• 강조하거나 하이라이트된 텍스트.

<p>Please pay attention to the <mark>important details</mark> in the document.</p>

<abbr>

• 약어를 나타내며, title 속성으로 전체 뜻을 제공.

<p>The <abbr title="World Wide Web">WWW</abbr> is vast.</p>

 

---

3. Semantic HTML의 장점

1. 가독성 향상 : 코드의 의미가 명확해져 다른 개발자가 쉽게 이해 가능.
2. 검색 엔진 최적화(SEO) : 검색 엔진이 콘텐츠를 더 잘 파악하고 색인을 생성.
3. 접근성 개선 : 스크린 리더와 같은 보조 기술이 콘텐츠를 더 효과적으로 처리.
4. 유지보수 용이 : 콘텐츠와 역할이 구분되어 구조가 더 논리적.