최원종의 개발 블로그

시멘틱 태그란 - 6 본문

HTML_CSS/사전학습

시멘틱 태그란 - 6

chl6698 2026. 4. 15. 15:33

시멘틱 웹(Semantic Web)

  • 시멘틱 웹은 월드 와이드 웹 컨소시엄(W3C)이 주도한 개념으로,
  • 웹 데이터를 단순히 표시하는 것을 넘어 데이터가 의미를 가지도록 만드는 기술과 철학을 의미
  • 기존 웹은 사람이 읽고 이해하기 쉽게 설계되었지만, 기계(컴퓨터, 검색 엔진 등)는 데이터의 의미를 이해하기 어려움
  • 시멘틱 웹은 데이터를 구조화하고 메타데이터를 추가해 기계가 데이터를 이해하고 처리할 수 있게 함

 

 

시멘틱 태그(Semantic Tag)

  • HTML5에서 도입된 태그로, 콘텐츠의 의미와 구조를 명확히 정의하는 태그.
  • 기존 <div> 태그는 단순히 레이아웃을 나누는 용도였지만,
  • 시멘틱 태그는 콘텐츠의 역할과 의미를 부여해 코드의 가독성과 접근성을 높임.

 

주요 특징

  • 의미 전달: 태그 이름 자체가 콘텐츠의 역할을 나타냄 (예: <header>는 페이지 상단, <footer>는 하단).
  • 비시멘틱 태그와의 차이: <div>나 <span>은 의미가 없고 단순히 구조적 용도. 반면 <article>, <section> 등은 의미를 가짐.

 

주요 태그

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

 

실습 코드

<!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>
    <!-- 페이지 상단, 로고나 제목 -->
    <header>
      <h1>나의 블로그</h1>
      <p>환영합니다. 다양한 주제를 다룹니다</p>
    </header>

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

    <!-- 주제별 콘텐츠 구분 -->
    <section>
      <h2>오늘에 포스트</h2>
      <!-- 독립적인 콘텐츠 -->
      <article>
        <h3>HTML 5란</h3>
        <p>HTML5은 웹 표준이다</p>
      </article>
      <article>
        <h3>CSS 배우기</h3>
        <p>CSS 는 스타일링을 담당합니다</p>
      </article>
    </section>

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

    <!-- 페이지 하단, 저작권 정보 사이트 정보 -->
    <footer>
      <p>&copy; 2026 나의 블로그. All rights ...</p>
    </footer>
  </body>
</html>

실습코드 2

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>뉴스 사이트 (div)</title>
  </head>
  <body>
    <!-- bad div만 사용해보기 -->
    <div>
      <div>오늘의 뉴스</div>
      <div>
        <div><a href="#">홈</a></div>
        <div><a href="#">정치</a></div>
        <div><a href="#">경제</a></div>
      </div>
    </div>
    <div>
      <div>
        <div>HTML 시멘틱 태그의 중요성</div>
        <div>시멘틱 태그를 사용하면 검색엔진이 콘텐츠를 더 잘 이해합니다</div>
      </div>
    </div>
    <div>
      <div>&coyp; 2026 뉴스 사이트 </div>
    </div>
  </body>
</html>

실습코드 3

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>오늘에 뉴스</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        background-color: beige;
      }
      header {
        background-color: blueviolet;
        color: white;
        text-align: center;
      }
      nav a {
        text-decoration: none;
        font-size: 16px;
        margin: 0 15px;
        color: black;
      }
      main {
        display: flex;
        padding: 20px;
        min-height: 400px;
      }
      section {
        flex: 3;
        padding: 20px;
      }
      aside {
        flex: 1;
        background-color: #fff;
        border-radius: 8px;
      }
      footer {
        background-color: aqua;
        text-align: center;
        padding: 15px;
      }
    </style>
  </head>
  <body>
    <!-- 페이지 상단 영역 -->
    <header>
      <h1>오늘의 뉴스</h1>
      <p>매일 새로운 소식을 전합니다</p>
    </header>

    <!-- 네비게이션 메뉴 -->
    <nav>
      <a href="#">홈</a>
      <a href="#">정치</a>
      <a href="#">경제</a>
    </nav>

    <!-- main : 핵심 콘텐츠 영역 -->
    <main>
      <!-- 기사 목록 영역 -->
      <section>
        <h2>오늘의 주요 뉴스</h2>
        <!-- 독립적인 기사 하나  -->
        <article>
          <h3>HTML5 시멘틱 태그의 중요성</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde nulla
            ipsum nam asperiores. Tempore consectetur aspernatur unde explicabo
            optio voluptatibus reiciendis assumenda sequi quidem. Architecto
            numquam hic sint suscipit sit!
          </p>
        </article>

        <article>
          <h3>카페 개장</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde nulla
            ipsum nam asperiores. Tempore consectetur aspernatur unde explicabo
            optio voluptatibus reiciendis assumenda sequi quidem. Architecto
            numquam hic sint suscipit sit!
          </p>
        </article>
      </section>

      <aside>
        <h3>인기 검색어</h3>
        <ol>
          <li>HTML 시멘틱 태그</li>
          <li>CSS 레이아웃</li>
          <li>프론트 엔드 로드맵</li>
          <li>JS 기초 문법</li>
        </ol>
      </aside>
    </main>

    <!-- footer 페이지 하단 영역 -->
    <footer>
      <p>&copy; 2026 오늘에 뉴스.</p>
    </footer>
  </body>
</html>

'HTML_CSS > 사전학습' 카테고리의 다른 글

CSS 선택자(결합 선택자) - 8  (1) 2026.04.16
CSS(Cascading Style Sheets) - 7  (0) 2026.04.16
HTML 주요 body 내의 태그 - 5  (0) 2026.04.15
HTML 속성 - 4  (0) 2026.04.15
HTML 기본 템플릿에 이해 - 3  (1) 2026.04.15
'HTML_CSS/사전학습' Related Articles more