HTML 시맨틱 태그를 사용하여 웹 페이지의 구조를 명확하게

HTML(HyperText Markup Language)은 웹 페이지의 구조를 정의하는 데 사용되는 표준 마크업 언어입니다. 이전에는 대부분 div, span과 같은 HTML 태그를 사용했지만, 최근에는 시멘틱 태그를 사용합니다.

 

여기서 시맨틱(Semantic) 태그란, 그 내용이 무엇인지 브라우저와 개발자 모두에게 명확하게 설명해 주는 HTML 태그를 말합니다. 이러한 시멘틱 태그들은 웹 페이지의 가독성을 높이고, 검색 엔진 최적화(SEO)에 도움을 줍니다. 본 글에서는 HTML의 시멘틱 태그에 대해 설명합니다.

 

시맨틱 태그란?

시맨틱 태그는 웹 페이지의 다양한 부분(헤더, 푸터, 본문 등)을 명확하게 구분짓는 데 사용되는 HTML 태그입니다. 이 태그들은 각 섹션의 의미를 명확히 하여, 웹 페이지의 구조를 더 잘 이해할 수 있게 도와줍니다. 예를 들어, <header> 태그는 페이지의 머리말을, <footer> 태그는 바닥글을 나타내는 데 사용됩니다. 시맨틱 태그들을 각각 자세하게 살펴보겠습니다.

 

header

웹 페이지나 섹션의 머리말을 나타냅니다. 보통 로고, 제목, 네비게이션 링크 등이 포함됩니다.

<header>
    <h1>웹사이트 제목</h1>
    <nav>...</nav>
</header>

 

nav

네비게이션 링크를 위한 태그로, 사용자가 사이트 내에서 다른 페이지나 섹션으로 쉽게 이동할 수 있도록 돕습니다.

<nav>
    <ul>
        <li><a href="#home">홈</a></li>
        <li><a href="#about">소개</a></li>
    </ul>
</nav>

 

section

문서의 섹션을 나타냅니다. 각각의 <section>은 주제별로 콘텐츠를 그룹화하는 데 사용됩니다.

<section>
    <h2>섹션 제목</h2>
    <p>섹션 내용...</p>
</section>

 

article

독립적인 콘텐츠를 나타냅니다. <article>은 블로그 글, 뉴스 기사, 포럼 글 등 재사용 가능하거나 독립적으로 배포될 수 있는 콘텐츠에 사용됩니다.

<article>
    <h2>기사 제목</h2>
    <p>기사 내용...</p>
</article>

 

aside

페이지의 주 내용과는 직접적으로 관련이 없지만, 추가 정보를 제공하는 콘텐츠에 사용됩니다. 광고, 사이드바, 관련 링크 등에 활용됩니다.

<aside>
    <h2>관련 링크</h2>
    <ul>
        <li><a href="#">추가 링크 1</a></li>
        <li><a href="#">추가 링크 2</a></li>
    </ul>
</aside>

 

footer

페이지나 섹션의 바닥글을 나타냅니다. 저작권 정보, 연락처 정보, 사이트 맵 등을 포함할 수 있습니다.

<footer>
    <p>Copyright © 2024 bluemiv 웹사이트</p>
</footer>

 

main

웹 페이지의 주요 콘텐츠를 나타냅니다. <main> 태그는 문서당 한 번만 사용될 것을 권장하며, 페이지의 핵심 콘텐츠를 감싸는 데 사용됩니다.

<main>
    <article>...</article>
    <section>...</section>
</main>

 

figure와 figcaption

<figure>는 독립적인 콘텐츠(이미지, 다이어그램, 코드 예제 등)를 포함하며, <figcaption>은 그 콘텐츠에 대한 설명을 제공합니다.

<figure>
    <img src="image.jpg" alt="설명적 이미지">
    <figcaption>이미지 설명</figcaption>
</figure>

 

시멘틱 태그 사용의 중요성

시멘틱 태그를 사용하면 아래와 같은 이점을 얻을 수 있습니다.

• 가독성 향상: 시맨틱 태그는 웹 페이지의 구조를 더 명확하게 만들어, 개발자들이 코드를 더 쉽게 이해하고 관리할 수 있게 합니다.
• 접근성 향산: 스크린 리더와 같은 보조 기술이 웹 페이지의 구조를 더 잘 파악하고 사용자에게 콘텐츠를 제공할 수 있게 도와줍니다.
• SEO 최적화: 검색 엔진은 시멘틱 태그를 사용하여 웹 페이지의 구조와 콘텐츠를 더 잘 이해할 수 있습니다. 이는 검색 결과에서의 랭킹을 향상시킬 수 있습니다.
• 표준화된 구조: 시맨틱 태그는 웹 문서의 구조를 표준화합니다. 이는 다양한 브라우저에서 일관된 사용자 경험을 제공하는 데 도움이줍니다.

 

결론

HTML 시맨틱 태그는 웹 개발에서 중요한 역할을 합니다. 웹 페이지의 구조를 명확하게 정의하고, 가독성과 접근성을 향상시키며, SEO에도 긍정적인 영향을 미칩니다.

 

따라서 웹 개발을 할 때 단순히 div, span을 사용하기 보단 시맨틱 태그를 사용하는 것이 좋습니다.

 

다른 글

CSS 정의와 구성 요소 (selector, property, value)