[HTML] 시맨틱 웹과 시맨틱 태그

시맨틱 웹이란?

시맨틱 웹(Semantic Web)은 웹의 콘텐츠를 기계가 이해할 수 있는 의미론적인 정보로 구성하는 것을 의미합니다. 현재 웹은 사람이 이해하기 쉬운 문서로 구성되어 있지만, 기계가 그 의미를 이해하거나 처리하는 것은 어려운 경우가 많습니다. 시맨틱 웹은 이러한 문제를 해결하기 위해 웹 문서의 의미를 명확하게 표현하고, 웹 자원 간의 관계를 표현하는 RDF(Resource Description Framework)와 같은 기술을 활용하여 웹의 정보를 구조화합니다.

---

시맨틱 태그란?

시맨틱 태그(Semantic Tag)는 HTML5에서 도입된 태그로, 콘텐츠의 의미를 명확하게 표현하는 태그를 말합니다. 시맨틱 태그를 사용하면 웹 페이지의 구조가 명확해지고, 검색 엔진이나 스크린 리더 등이 문서의 구조와 의미를 더 잘 파악할 수 있습니다. 시맨틱 태그를 사용함으로써 웹 페이지의 접근성이 향상되고, 검색 엔진 최적화(SEO)에도 도움이 됩니다.

---

몇 가지 기본적인 시맨틱 태그

<header> 태그는 웹 페이지나 섹션의 머리말(Header)을 정의합니다. 일반적으로 로고, 제목, 검색 폼 등과 같은 내용을 포함합니다.

<header>
    <h1>My Website</h1>
    <nav>
        <!-- 네비게이션 메뉴들 -->
    </nav>
</header>

 

<nav> 태그는 웹 페이지의 네비게이션 부분을 정의합니다. 보통 링크 목록이나 메뉴를 담고 있습니다.

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

 

<main> 태그는 웹 페이지의 주요 콘텐츠를 정의합니다. 하나의 페이지에는 하나의 <main> 태그만 사용해야 합니다.

<main>
    <!-- 웹 페이지의 주요 콘텐츠들 -->
</main>

 

<article> 태그는 독립적인 콘텐츠 블록을 정의합니다. 뉴스 기사, 블로그 글 등 독립적으로 배포하거나 재사용 가능한 콘텐츠를 감싸는데 사용됩니다.

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

 

<footer> 태그는 웹 페이지나 섹션의 바닥글(Footer)을 정의합니다. 일반적으로 저작권 정보, 연락처, 관련 링크 등을 포함합니다.

<footer>
    <p>&copy; 2023 My Website. All rights reserved.</p>
</footer>

위의 예제에서는 몇 가지 기본적인 시맨틱 태그를 소개했습니다. 시맨틱 태그를 적절하게 활용하면 웹 페이지의 의미가 명확해지고, 검색 엔진 최적화와 웹 접근성을 향상시킬 수 있습니다. 따라서 웹 개발 시 시맨틱 태그의 사용을 고려하는 것이 좋습니다.

---

시맨틱 웹과 기본적인 시맨틱 태그에 대한 설명을 마쳤습니다. 시맨틱 웹의 개념을 이해하고, 시맨틱 태그를 적절하게 활용하여 웹 페이지를 구조화하는데 도움이 되기를 바랍니다. 계속해서 웹 개발을