99.Study/99-1.HTML
2.HTML semantic tag
왕영주
2021. 10. 21. 13:41
이미지 출처 https://velog.io/@wan-seung/Semantic-Web-and-Semantic-Tag
HTML의 semantic tag는 각 tag의 속한 다른 tag및 요소들이 web page에서 어떤 부분을 가리치고 있는지 나타냅니다.
위와 같은 semantic tag를 이용하여 웹 페이지를 구조화할 수 있습니다.
아래 코드만으로는 다른 점을 찾기 어렵지만 CSS와 함께 웹페이지를 꾸미다보면 구조화 하는 것이 편함을 알 수 있습니다.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>2번 실습 페이지</title>
</head>
<body>
<header><h1>2번 실습</h1></header>
<nav>
<h2>first navigation</h2>
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
</ul>
</nav>
<section>
<article>
<header><h3>First</h3></header>
<p>
첫번째 목차에 해당되는 내용입니다.
</p>
</article>
<article>
<header><h3>Second</h3></header>
<p>
두번째 목차에 해당되는 내용입니다.
</p>
</article>
</section>
<footer>
<address>+82-1234-5678</address>
</footer>
</body>반응형