시맨틱 웹(Semantic Web)은 현재의 웹 환경에 자원들의 의미와 자원들 간의 관계 정보를 부가하여 컴퓨터가 스스로 정보의 의미를 파악하고 정보를 처리, 추론할 수 있는 환경을 구축하는 것을 말한다.<위키>
HTML5 부터 시멘틱 웹을 위해, 관련 태그들이 제공된다. 기존 태그들과 같이 숙지 하면 좋다.
기본 HTML4
<div class="header">헤더입니다</div
---------------------------------------------------------------
HTML5
<header>헤더입니다</header>
눈으로 볼때는 차이는 없지만, 검색 엔진 최적화(SEO)에서 중요한 역할을 하기 때문에 쓰는것을 습관화 하는 것이 좋다.
기존 태그
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>비의미적 HTML 문서</title>
<style>
body {
font-family: Arial, sans-serif;
}
.header {
background-color: #f60707;
padding: 20px;
text-align: center;
}
.content {
padding: 20px;
}
.footer {
background-color: #0f7ff0;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<h1>비의미적 HTML 문서 제목</h1>
</div>
<div class="content">
<h2>내용 제목</h2>
<p>이곳은 비의미적 HTML 문서의 내용이 들어가는 부분입니다. 이 문서는 semantic 태그를 사용하지 않고 작성되었습니다.</p>
<div>
<h3>부제목</h3>
<p>부제목에 대한 설명이 여기에 들어갑니다.</p>
</div>
</div>
<div class="footer">
<p>저작권 © 2024</p>
</div>
</body>
</html>
시멘틱 태그
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>비의미적 HTML 문서</title>
<style>
body {
font-family: Arial, sans-serif;
}
header {
background-color: #f60707;
padding: 20px;
text-align: center;
}
main {
padding: 20px;
}
footer {
background-color: #0f7ff0;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>비의미적 HTML 문서 제목</h1>
</header>
<main>
<section>
<h2>내용 제목</h2>
<p>이곳은 비의미적 HTML 문서의 내용이 들어가는 부분입니다. 이 문서는 semantic 태그를 사용하여 작성되었습니다.</p>
</section>
<section>
<h3>부제목</h3>
<p>부제목에 대한 설명이 여기에 들어갑니다.</p>
</section>
</main>
<footer>
<p>저작권 © 2024</p>
</footer>
</body>
</html>
3.emmit 실습