시멘틱 마크업

❓ 정의

- 시멘틱 마크업(Semantic Markup)은 HTML 요소를 사용해 콘텐츠의 의미와 목적을 명확히 전달하는 방식이다.

- 단순히 콘텐츠의 외형을 정의하는 것이 아니라, 각 요소가 담고 있는 정보의 역할과 의미를 설명한다.

- 예) <header>는 페이지 머리글, <article>은 독립적인 콘텐츠, <nav>는 내비게이션 링크, <footer>는 페이지 하단 정보

▶ 기본 사용 예시

<header>
  <h1>My Website</h1>
</header>
<main>
  <article>
    <h2>Article Title</h2>
    <p>Article Content</p>
  </article>
</main>
<footer>
  <p>Copyright © 2025</p>
</footer>

---

❗ 사용이유

✅ 접근성 향상

- 스크린 리더와 같은 보조 기술이 시멘틱 요소를 통해 콘텐츠의 구조와 의미를 더 잘 이해할 수 있다. 예를 들어 <nav>는 내비게이션 영역으로 인식되어 사용자가 주요 콘텐츠로 바로 이동할 수 있다.

✅ SEO 개선

- 검색 엔진은 시멘틱 마크업을 통해 페이지의 구조와 핵심 콘텐츠를 더 효과적으로 파악한다. 이를 통해 검색 결과에서 더 높은 노출 순서를 확보할 수 있다.

✅ 코드 유지보수성 향상

- 시멘틱 요소는 코드의 가독성을 높여 개발자들이 구조를 쉽게 이해하고 수정할 수 있도록 돕는다. 또한 불필요한 <div>나 <span> 사용을 줄인다.

---

💥 주의

1️⃣ 요소를 스타일링 목적으로만 사용

- 예를 들어, <h1>을 단순히 텍스트 크기를 키우기 위해 사용하면 안 된다. 해당 요소는 콘텐츠 계층 구조를 나타내기 위해 사용해야 한다.

2️⃣ 적절한 중첩 구조 유지

- 시멘틱 태그는 논리적인 순서로 중첩되어야 한다. 예를 들어, <main>은 페이지에 한 번만 사용되고 다른 시멘틱 태그 안에 중첩되지 않아야 한다.

3️⃣ <main>은 하나만!

- 한 페이지에는 반드시 하나의 <main>만 존재하도록 설계해야한다.

- Header, Footer, Nav 등 공통 레이아웃 요소는 <main> 외부에 위치한다.

➕ 컴포넌트 시멘틱 마크업 설계시

- 컴포넌트 내부에서는 독립적인 콘텐츠를 나타낼 때 <section>, <article>, <div> 등을 사용한다.

- 컴포넌트 자체가 독립적인 문서 단위라면 <article>을 사용하고, 관련된 콘텐츠 묶음이라면 <section>을 사용한다.

---

💠 예시

1️⃣ 블로그 게시글

<article>
  <header>
    <h2>블로그 제목</h2>
    <p>작성자: 홍길동 | 날짜: 2025-03-29</p>
  </header>
  <section>
    <p>블로그 내용...</p>
  </section>
  <footer>
    <p>댓글 남기기</p>
  </footer>
</article>

2️⃣ 네비게이션 메뉴

<nav>
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

2️⃣ 레이아웃 컴포넌트

function Layout({ children }) {
  return (
    <>
      <header>
        <h1>My Website</h1>
        <nav>
          <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
          </ul>
        </nav>
      </header>

      <main>{children}</main>

      <footer>
        <p>Copyright © 2025</p>
      </footer>
    </>
  );
}