HHyo814
발행일

[ZBF] 7주차 보충 : Semantic Markup

기술노트UI

[ZBF] 7주차 보충 : Semantic Markup

이 글은 네이버 블로그에 2024년 7월 1일에 올렸던 것을 그대로 옮겨온 것입니다.

Semantic Markup란 무엇인가요?

Semantic Markup은 HTML 요소를 사용할 때 그 요소가 담고 있는 내용의 의미를 반영하는 것을 말합니다. 예를 들어, 단순히 텍스트를 굵게 표시하기 위해 <b> 태그를 사용하는 대신, 중요한 내용을 강조하기 위해 <strong> 태그를 사용합니다. 이렇게 하면 브라우저와 검색 엔진, 그리고 스크린 리더가 그 내용의 의미를 더 잘 이해할 수 있습니다.

왜 Semantic Markup이 중요한가요?

  1. SEO 향상: 검색 엔진은 페이지의 내용을 더 잘 이해하고, 그 결과 검색 순위가 향상됩니다.
  2. 접근성 개선: 스크린 리더와 같은 보조 기술이 페이지의 구조와 내용을 더 명확히 해석할 수 있습니다.
  3. 코드 가독성: 개발자들이 코드를 더 쉽게 이해하고 유지보수할 수 있습니다.

주요 Semantic HTML 요소

다음은 자주 사용되는 Semantic HTML 요소와 그 용도입니다:

  • <header>: 페이지나 섹션의 머리말을 정의합니다.
  • <nav>: 내비게이션 링크를 포함합니다.
  • <article>: 독립적인 콘텐츠 블록을 나타냅니다.
  • <section>: 관련된 콘텐츠를 그룹화합니다.
  • <aside>: 본문과 관련성이 적은 콘텐츠를 나타냅니다.
  • <footer>: 페이지나 섹션의 바닥글을 정의합니다.
  • <main>: 문서의 주요 콘텐츠를 나타냅니다.
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Semantic Markup 예시</title>
</head>
<body>
    <header>
        <h1>웹 개발 블로그</h1>
        <nav>
            <ul>
                <li><a href="#home">홈</a></li>
                <li><a href="#about">소개</a></li>
                <li><a href="#contact">연락처</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <h2>Semantic Markup이란?</h2>
            <p>Semantic Markup은 HTML 코드에 의미를 부여하는 방법입니다...</p>
        </article>

        <section>
            <h2>중요성</h2>
            <p>Semantic Markup은 SEO와 접근성을 향상시킵니다...</p>
        </section>
    </main>

    <aside>
        <h2>관련 기사</h2>
        <p>Semantic Markup에 대한 추가 정보는 여기서 확인하세요...</p>
    </aside>

    <footer>
        <p>&copy; 2024 웹 개발 블로그</p>
    </footer>
</body>
</html>

검색 엔진 최적화(SEO)에 Semantic Markup이 어떻게 기여할 수 있나요?

  • 콘텐츠 이해 향상: 검색 엔진은 페이지의 콘텐츠를 더 잘 이해하기 위해 HTML 태그를 분석합니다. Semantic Markup을 사용하면 검색 엔진이 페이지의 구조와 내용을 더 명확히 파악할 수 있습니다. 예를 들어, <header>, <article>, <nav>, <footer> 등의 태그는 페이지의 어떤 부분이 중요한 정보를 담고 있는지 명확히 나타냅니다.
  • 검색 순위 향상: Semantic 태그는 검색 엔진이 페이지의 각 섹션의 목적을 더 잘 이해하도록 도와줍니다. 이를 통해 특정 검색어와 관련된 페이지의 연관성을 높이고, 검색 결과에서 페이지의 순위를 향상시킬 수 있습니다.
  • 리치 스니펫 지원: Semantic Markup을 사용하면 검색 엔진이 리치 스니펫(검색 결과 페이지에서 더 많은 정보를 제공하는 확장된 검색 결과)을 생성할 가능성이 높아집니다. 예를 들어, 리뷰, 이벤트, 제품 정보 등을 포함하는 페이지는 리치 스니펫으로 표시될 수 있습니다.
  • 콘텐츠 노출 증가: 검색 엔진이 페이지를 더 잘 이해하면, 다양한 검색어와 검색 의도에 맞춰 페이지를 더 잘 노출시킬 수 있습니다. 이는 더 많은 트래픽을 유도할 수 있는 기회를 제공합니다.

접근성을 위해 어떤 Semantic 요소를 사용하는 것이 좋나요?

Semantic 요소는 웹 페이지의 접근성을 크게 향상시킬 수 있습니다. 다음은 접근성을 위해 자주 사용되는 주요 Semantic 요소들입니다:

  1. <header>: 페이지나 섹션의 머리말을 정의합니다. 스크린 리더 사용자는 이 태그를 통해 각 섹션의 시작 부분을 쉽게 찾을 수 있습니다.
  2. <nav>: 내비게이션 링크를 그룹화하여 페이지 내의 다른 부분으로 이동할 수 있는 구조를 제공합니다. 스크린 리더는 이 태그를 통해 내비게이션 메뉴를 인식합니다.
  3. <main>: 문서의 주요 콘텐츠를 나타냅니다. 이 태그를 사용하면 보조 기술이 주요 콘텐츠와 부가적인 콘텐츠를 구분할 수 있습니다.
  4. <article>: 독립적으로 구분되는 콘텐츠 블록을 나타냅니다. 이는 블로그 게시물, 뉴스 기사 등에서 유용합니다.
  5. <section>: 관련된 콘텐츠를 그룹화하여 페이지를 더 구조적으로 만들 수 있습니다. 각 섹션에 제목을 붙여 의미를 명확히 할 수 있습니다.
  6. <aside>: 본문과 관련성이 적은 콘텐츠를 나타냅니다. 주로 사이드바나 부가적인 정보에 사용됩니다.
  7. <footer>: 페이지나 섹션의 바닥글을 정의합니다. 여기에는 저작권 정보, 연락처 정보 등이 포함될 수 있습니다.
  8. <h1> - <h6>: 제목 태그는 페이지의 계층 구조를 정의합니다. 스크린 리더 사용자는 이 태그를 통해 페이지의 구조를 쉽게 이해할 수 있습니다.

Semantic Markup을 사용하지 않았을 때 발생할 수 있는 문제점

<div class="header">
    <h1>웹 개발 블로그</h1>
    <div class="nav">
        <ul>
            <li><a href="#home">홈</a></li>
            <li><a href="#about">소개</a></li>
            <li><a href="#contact">연락처</a></li>
        </ul>
    </div>
</div>
<div class="main-content">
    <div class="section">
        <h2>Semantic Markup이란?</h2>
        <p>Semantic Markup은 HTML 코드에 의미를 부여하는 방법입니다...</p>
    </div>
</div>
<div class="footer">
    <p>&copy; 2024 웹 개발 블로그</p>
</div>

이러한 문제는 웹사이트의 SEO, 접근성, 유지보수성에 부정적인 영향을 미칩니다.

1. 검색 엔진 최적화(SEO) 저하

  • 콘텐츠 이해도 감소: 검색 엔진은 페이지의 의미를 이해하기 위해 HTML 태그를 분석합니다. Semantic Markup이 없으면 검색 엔진이 페이지의 콘텐츠를 제대로 이해하지 못해 검색 순위가 낮아질 수 있습니다.
  • 키워드 연관성 저하: 적절한 Semantic 요소를 사용하지 않으면 검색 엔진이 페이지의 주요 키워드를 파악하기 어려워집니다. 이는 페이지가 특정 검색어와의 연관성을 잘 반영하지 못하게 합니다.

2. 접근성 문제

  • 스크린 리더 지원 부족: 보조 기술, 특히 스크린 리더는 Semantic 태그를 통해 페이지의 구조를 파악합니다. Semantic Markup이 없으면 스크린 리더 사용자가 페이지를 탐색하기 어려워집니다.
  • 콘텐츠 구분 어려움: Semantic 요소가 없으면 사용자는 페이지의 각 부분이 어떤 역할을 하는지 직관적으로 이해하기 어려워집니다. 예를 들어, 내비게이션 메뉴, 주요 콘텐츠, 사이드바 등을 구분하기 어렵습니다.

3. 유지보수 및 협업 문제

  • 코드 가독성 저하: 의미 없는 <div>나 <span> 태그만으로 구성된 코드는 이해하기 어렵고, 유지보수가 복잡해집니다. 개발자가 코드의 목적을 빠르게 이해할 수 없어 협업이 어려워집니다.
  • 기능 확장 어려움: 명확한 구조와 의미가 없는 코드는 새로운 기능을 추가하거나 수정할 때 많은 혼란을 야기할 수 있습니다. 이는 프로젝트의 확장성을 저해합니다.

4. 사용자 경험(UX) 저하

  • 페이지 구조 파악 어려움: 사용자도 페이지의 구조를 이해하기 어렵습니다. 특히, 복잡한 웹 페이지에서 중요한 정보를 빠르게 찾기 힘들어질 수 있습니다.
  • 리치 스니펫 생성 불가: Semantic Markup을 사용하지 않으면 검색 엔진이 페이지의 구조를 이해하지 못해 리치 스니펫을 생성할 수 없습니다. 이는 검색 결과에서 페이지가 눈에 띄기 어렵게 만듭니다.
← 글 목록으로