시멘틱 웹(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>
<!-- 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>© 2025 나의 블로그. All rights reserved.</p>
<p>문의 : contact@myblog.com</p>
</footer>
</body>
</html>
'HTML CSS JavaScript' 카테고리의 다른 글
| CSS 크기와 단위, 색상 (0) | 2025.07.14 |
|---|---|
| CSS(Cascading Style Sheets)란 뭘까? (0) | 2025.07.14 |
| HTML 주요 body 내의 태그 (0) | 2025.07.14 |
| HTML 속성이란? (1) | 2025.07.14 |
| HTML 기본 템플릿의 이해 (0) | 2025.06.20 |