(HTML/CSS/JavaScript)시멘틱 태그란

HTML CSS

(HTML/CSS/JavaScript)시멘틱 태그란 - 6

mynote6676 2025. 5. 28. 19:51

시멘틱 웹 (Semantic Web)

-시멘틱 웹은 월드 와이드 웹 컨소시엄(W3C)이 주도한 개념으로, 웹 데이터를 단순히 표시하는 것을 넘어 데이터가 의미를

가지도록 만드는 기술과 철학을 의미합니다.

- 기존 웹은 사람이 읽고 이해하기 쉽게 설계되었지만. 기계(컴퓨터,검색 엔진 등)는 데이터의 의미를 이해하기 어려웠습니다.

시멘틱 웹은 데이터를 구조화하고 메타데이터를 추가해 기계가 데이터를 이해하고 처리할 수 있게 합니다.

시멘틱 태그 (Semantic Tag)

- HTML5에 도입된 태그로, 콘텐츠의 의미와 구조를 명확히 정의하는 태그.

- 기존<div>태그는 단순히 레이아웃을 나누는 용도였지만, 시멘틱 태그는 콘텐츠의 역할과 의미를 부여해

코드의 가독성과 접근성을 높임

주요 특징

의미 전달; 태그 이름 자체가 콘텐츠의 역할을 나타냄(예) < header>는 페이지 상단,<footer>는 하단)

비시멘틱 태그와의 차이: <div>나 <span>은 의미가 없고 단순히 구조적 용도. 반면<article>,

<section>등은 의미를 가짐

|주요 태그

<header>: 페이지 상단에 위치하며, 로고, 제목, 소개 문구 등을 포함.
<nav>: 내비게이션 메뉴를 정의. 링크 목록을 포함해 사용자 이동 경로 제공.
<section>: 주제별로 콘텐츠를 구분. 관련된 콘텐츠를 그룹화.
<article>: 독립적인 콘텐츠(블로그 포스트, 뉴스 기사 등)를 정의.
<aside>: 본문과 직접 관련 없는 부가 콘텐츠(광고, 추천 링크 등).

----------------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>시멘틱 태그 연습</title>
</head>
<body>
    <!-- 1. header : 페이지 상단, 로고, 제목을 포함 -->
    <header>
        <h1>나의 블로그</h1>
        <p>환영합니다. 다양한 주제를 다룹니다.</p>
    </header> 

    <!-- 2. nav: 네비게이션 메뉴 -->
     <nav>
        <ul>
            <li><a href="">홈</a></li>
            <li><a href="">소개</a></li>
            <li><a href="">연락처</a></li>
        </ul>    
     </nav>

     <!-- 3. section : 주제별 콘텐츠를 구별 -->
     <section>
        <h2>오늘에 포스트</h2>
        
        <!-- 4. article : 독립적인 콘텐츠 -->
        <article>
            <h3>HTML5</h3>
            <p>HTML5는 웹의 최신 표준으로, 시멘틱 태그를 통해 구조를 좀 더 명확히 합니다</p>
        </article>

        <article>
            <h3>CSS 배우기</h3>
            <p>CSS는 스타일링을 담당하며, HTML 과 함께 사용이 됩니다(종속적)</p>
        </article>

     </section> 

     <!-- 5. aside: 부가적인 콘텐츠(사이드 바) -->
     <aside>
        <h3>추천 링크</h3>
        <p><a href="https://www.naver.com">HTML 배우기</a></p>
     </aside>

     <!-- 6. footer : 페이지 하단, 저작권 정보 등 -->
     <footer>
        <p>&copy 2025 나의 블로그. All rights reserved.</p>
        <p>문의 : contact@myblog.com</p>
     </footer>

</body>
</html>

728x90