[HTML] 시맨틱 태그 (Semantic Tag)란?

시맨틱 태그는 웹 페이지의 구조를 명확하게 정의하고 의미를 부여하여 검색 엔진이나 웹 브라우저, 보조 기술과 같은 도구들이 페이지를 더 잘 이해하고 해석할 수 있도록 돕습니다

각각의 시맨틱 태그는 특정한 역할과 의미를 가지고 있습니다

 

1. <header>

웹 페이지 상단의 헤더를 정의합니다

사이트 로고, 주요 내비게이션 링크, 검색 폼 등을 포함합니다

페이지의 전체적인 정보를 요약하고 사용자에게 핵심 내용을 제공합니다

 

2. <nav>

내비게이션 영역을 정의합니다

메뉴, 링크 목록 등을 포함합니다

사용자가 사이트 내에서 쉽게 이동할 수 있도록 돕습니다

 

3. <article>

독립적인 컨텐츠 블록을 정의합니다

블로그 글, 뉴스 기사, 포럼 글 등을 포함합니다

단일한 주제나 컨텐츠를 표현하며, 독립적으로 배포하거나 재사용할 수 있는 단위입니다

 

4. <section>

문서의 섹션을 정의합니다

주제에 따라 그룹화된 콘텐츠를 나타냅니다

관련 있는 내용을 그룹화하여 나타내어 문서의 구조를 명확하게 합니다

 

5. <footer>

웹 페이지의 하단, 저작권 정보, 연락처, 사이트 링크 등을 포함하는 부분을 정의합니다

페이지의 부가 정보를 담고 있습니다

 

6. <aside>

주요 콘텐츠와는 상관없는 부가적인 정보를 정의합니다

사이드바, 광고 영역, 관련 링크 목록 등을 포함합니다

페이지의 주요 내용과는 독립적으로 추가 정보를 제공합니다

 

7. <main>

문서의 주요 콘텐츠를 정의합니다

주요 글, 제품 목록, 주문 양식 등을 포함합니다

페이지의 핵심적인 내용을 담고 있으며, 다른 시맨틱 태그들로 둘러 쌓여 있습니다

 

예시

<header>
    <!-- 로고, 메인 내비게이션 등을 포함하는 페이지 상단의 헤더 -->
</header>

<nav>
    <!-- 메뉴, 링크 목록 등을 포함하는 내비게이션 영역 -->
</nav>

<main>
    <article>
        <!-- 독립적인 컨텐츠 블록 (블로그 글, 뉴스 기사 등) -->
    </article>

    <section>
        <!-- 문서의 섹션을 그룹화하여 나타내는 영역 -->
    </section>

    <aside>
        <!-- 주요 콘텐츠와는 상관없는 부가적인 정보 (사이드바, 광고 영역 등) -->
    </aside>
</main>

<footer>
    <!-- 페이지의 하단을 정의하며, 저작권 정보, 연락처, 사이트 링크 등을 포함 -->
</footer>

 

 

이러한 시맨틱 태그를 적절히 활용하면 웹 페이지의 구조가 명확해지고, 검색 엔진 최적화(SEO)나 웹 접근성을 향상시킬 수 있습니다

또한, 코드의 가독성과 유지보수성을 높이는데에도 기여합니다