[HTML5] Semantic 태그

1. 설명

- 브라우저와 개발자에게 명확한 의미를 부여하는 태그

- non-Semantic 태그인 <div>, <span>은 어느 영역인지 어떤 내용인지 파악하기 힘들지만 Semantic 태그인 <article>, <table>은 코드 가독성이 상대적으로 뛰어남.

- "A semantic Web allows data to be shared and reused across applications, enterprises, and communities." - W3C


2. 주 사용 태그

> header : 사이트 헤더 영역

> nav : 메뉴 영역

> main : 사이트 메인 content 영역

> section : content 영역

> article : 개별 content 영역

> footer : 사이트 footer 영역


3. 코드

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>변경 타이틀</title>

<!--타이틀 변경 방법(참고 : https://hkand.blogspot.com/2023/01/html5.html)-->

</head>

<body>

<form>

<header>

<h1>SEMANTIC TAG</h1>

<p>header 영역</p>

<hr>

</header>

<nav>

<p>nav 영역</p>

</nav>

<section>     

<article>

<p>article1</p>

</article>

<article>

<p>article2</p>

</article>

</section>

<footer>

<pre>footer 영역

COPYRIGHTS&copy; HKAND</pre>

</footer>

</form>

</body>

</html>


4. 참고