그 자체로 의미를 가진 태그
의미 없는 태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div style="background-color: yellow">헤더정보, 헤더이미지</div>
<div style="background-color: greenyellow">
<a href="">메뉴1</a>
<a href="">메뉴2</a>
<a href="">메뉴3</a>
<a href="">메뉴4</a>
</div>
<div style="background-color: blue">
<div>
섹션1
<div>아티클1</div>
<div>아티클2</div>
</div>
<div>섹션2</div>
</div>
<div style="background-color: gray">footer : 회사 정보</div>
</body>
</html>
div로 그냥 쪼개버린 웹사이트.
어떤게 헤더인지 콘텐츠인지 푸터인지 한눈에 들어오는가?
의미를 가진 태그(Sementic 태그)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- 시멘틱 태그 -->
<!-- 태그명 자체가 의미를 갖고 있는 태그를 말함 -->
<!-- table, address -->
<!-- header, aside, nav, main, section, article, footer -->
<header style="background-color: yellow">헤더정보, 헤더이미지</header>
<nav style="background-color: greenyellow">
<a href="">메뉴1</a>
<a href="">메뉴2</a>
<a href="">메뉴3</a>
<a href="">메뉴4</a>
</nav>
<main style="background-color: blue">
<section>
섹션1
<article>아티클1</article>
<article>아티클2</article>
</section>
<section>섹션2</section>
</main>
<footer style="background-color: gray">footer : 회사 정보</footer>
</body>
</html>
위와 비교해보면 훨씬 가독성이 좋은 코드가 되었다.
그 자체로 의미가 있는 코드를 사용하면 전달이 잘 되고,
인터넷 소수자들(시각장애인용 웹 페이지 리더기)에 편의성을 줄 수 있다.
-