시맨틱 태그

시맨틱 태그란?

시맨틱 태그는 웹 페이지의 의미와 구조를 좀더 명확하게 표현하기 위해 HTML5에서 도입된 태그들 입니다. 이 태그들은 웹 페이지의 다양한 부분이 어떤 내용을 담고 있는지를 명확하게 해주며 웹 개발자나 사용자 그리고 검색 엔진(SEO)에게도 웹 페이지의 구조를 좀 더 잘 이해시킬 수 있는 역할을 가지고 있습니다.

시맨틱 태그의 분리

시맨틱 태그의 종류

<header>

주로 페이지나 머리글을 나타냅니다. 보통은 로고, 제목, 네비게이션 링크 등을 포함합니다.

<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>

 

<nav>

네비게이션 링크를 위한 태그로 주로 메뉴, 목차, 색인 등을 구성하는데 사용됩니다.

위에 있는 header 와 비슷한 유형을 가지고 있다고 생각이 들지만 각각 다른 목적과 역할을 가지고 있습니다.

header는 웹 페이지의 소개 및 머리글을 위한 것이며, nav 는 탐색을 위한 링크를 제공합니다. 또한 header는 nav를 포함할 수 있지만 nav 자체는 페이지의 탐색을 도와주는 독립적인 역할을 합니다.

<nav>
    <ul>
        <li><a href="#news">뉴스</a></li>
        <li><a href="#blog">블로그</a></li>
        <li><a href="#contact">연락처</a></li>
    </ul>
</nav>

 

<article>

하나의 완석된, 독립적인 내용을 나타내면서 재사용 가능한 콘텐츠 영역을 정의합니다. 예를들어 블로그 글, 뉴스 기사 등이 여기에 해당합니다.

<article>
    <h2>시맨틱 태그의 중요성</h2>
    <p>시맨틱 태그는 웹 접근성과 SEO를 향상시키는데 중요한 역할을 합니다.</p>
</article>

 

<section>

문서의 독립적인 구역을 나타냅니다. 보통 제목 태그(h1,h2 등)을 포함하고, 관련 콘텐츠를 그룹화하는데 사용됩니다.

<section>
    <h2>웹 개발 튜토리얼</h2>
    <p>이 섹션에서는 HTML, CSS에 대해 배웁니다.</p>
</section>
<section>
    <h2>Javascript 튜토리얼</h2>
    <p>이 섹션에서는 JavaScript에 대해 배웁니다.</p>
</section>

 

<footer>

페이지나 섹션의 footer(꼬리글)를 나타냅니다. 저작권 정보, 연락처 정보, 백 링크 등이 포함됩니다.

<footer>
    <p>저작권 © 2024 trophyjourney 블로그</p>
    <p><a href="#privacy-policy">개인정보 처리방침</a></p>
</footer>

 

또한 간접적인 관련이 있는 콘텐츠(사이드바 광고, 그룹내 관련 다른 콘텐츠)를 위한 <aside> 태그와 이미지와, 이미지 설명을 담고 있는 영역 <figure> 등 많은 시맨틱 태그들이 있습니다.

시맨틱 태그 사용을 왜 해야할까?

시맨틱 태그들을 알기 위해선 검색 엔진의 작동 원리를 먼저 알아야 합니다.

 

크롤링

검색 엔진의 크롤러(스파이더)는 인터넷을 탐색하며 웹 페이지를 발견하고 그 내용을 수집합니다.

 

인덱싱

수집된 페이지의 내용은 검색 엔진의 데이터베이스에 저장됩니다. 이 과정에서 페이지의 내용, 이미지, 링크 등이 분석되어 검색 가능한 형태로 정리됩니다.

 

순위 매기기

사용자의 검색 쿼리에 대한 가장 관련성 높고 권위 있는 페이지를 결정하기 위해 다양한 알고리즘과 기준이 적용됩니다.

 

시맨틱 태그는 이러한 각 단계에서 중요한 역할을 합니다. 예를 들어 <article> 태그는 주요 콘텐츠를 <nav> 태그는 내비게이션 링크를 <footer> 태그는 저자 정보나 저작권 정보를 나타내는 것으로 해석됩니다. 이런 명확한 구조는 검색 엔진이 페이지의 중요한 부분을 더 정확하게 파악하고 적절하게 인덱싱하도록 도와, 최종적으로 검색 결과의 질을 향상시킵니다.

 결과적으로 시맨틱 태그의 사용은 웹 페이지를 보다 접근성 높고 검색 엔진에 친화적인 구조로 만들어 주는 중요한 수단입니다.

 

 

마무리

시맨틱 태그들을 사용하여 얻을 수 있는 이점은 단순한 효율성 그 이상으로 보입니다. 더 나은 사이트 구조를 구축하고 검색 엔진의 성능을 향상 시키는데 도움이 되며 접근성을 크게 향상시킬 수 있습니다.

이러한 의미론적 마크업을 사용하여 웹 페이지를 구축하는 것은 사용자와 컴퓨터 모두가 액세스할 수 있는 보다 의미 있는 웹 페이지를 만드는 것을 의미합니다.

 

 

참고 문서

https://medium.com/codex/what-is-semantic-markup-and-why-you-should-use-it-44777543c29c