JunO3O
시맨틱 태그
시맨틱 태그
2023. 3. 21. 03:01ㆍHTML
시맨틱(semantic) 태그
# 시맨틱 태그
ㅁ 시맨틱은 '의미론적인'이라는 의미입니다.
ㅁ 특정 태그에 의미를 부여해 웹 페이지를 만드는 것을 시맨틱 웹이라고 합니다.
ㅁ 시맨틱 웹은 컴퓨터 프로그램이 코드를 읽고 의미를 인식할 수 있는 지능형 웹을 의미합니다.
1. header : 머리말을 의미합니다. 페이지 제목, 페이지 소개 등이 해당됩니다.
2. nav : 하이퍼링크들을 모아 놓은 네비게이션을 말합니다.
3. aside : 본문 흐름에 벗어나는 노트나 팁을 말합니다.
4. section : 문서의 장이나 절에 해당하는 내용을 말합니다.
5. article : 본문과 독립적인 콘텐츠 영역을 말합니다.
6. footer : 꼬리말을 의미합니다. 저작권, 저자 등이 해당됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>
<h1> HTML 시맨틱 </h1>
</header>
<nav>
<ul>
<li><a href="#"> 네비게이션 바1 </a> </li>
<li><a href="#"> 네비게이션 바2 </a> </li>
<li><a href="#"> 네비게이션 바3 </a> </li>
</ul>
</nav>
<section>
<article>
<h1> 첫번째 제목을 작성합니다. </h1>
<p> 첫번째 문단을 작성합니다. </p>
</article>
<article>
<h1> 두번째 제목을 작성합니다. </h1>
<p> 두번째 문단을 작성합니다. </p>
</article>
</section>
<footer>
<address> footer에 주소를 작성합니다. </address>
</footer>
</body>
</html>
