시멘틱 태그
sematic
무의미한 태그가 아니라
'의미를 갖는다'는 뜻으로, 각 태그가 스스로 의미를 지닌다는 뜻
시멘틱 태그
태그 | 설명 |
header | 사이트에 대한 소개 정보나 메인 메뉴, 사이트 로고 등이 포함됨 |
hgroup | 제목과 부제목을 묶는 역할 |
nav | 사이트나 메뉴나 링크 같은 내비게이션 요소들이 포함 |
section | 실제 문서 내용이 들어감 |
article | 문서 내용이 많을 경우 여러 개의 <article>요소로 나눌 수 있음 |
aside | 문서의 주요 내용 외의 내용들을 넣어 문서의 주 영역 주변에 배치 |
footer | 작성자 정보나 저작권 정보, 또는 관련 문서 링크 등 부가 정보들을 담고 있음 |
표현을 위한 태그
태그 | 설명 |
mark | 특정 텍스트를 강조하고자 할 때 사용하는 태그 |
소스코드
<html>
<head>
<meta
charset="UTF-8">
<title>시멘틱
태그</title>
</head>
<body>
<header
id="page_header">
<hgroup>
<h1>대한
대학교
홈페이지</h1>
<h4>세계를
향상
지식의
공간</h4>
</hgroup>
<nav>
<ul>
<li><a
href="">1학년</a></li>
<li><a
href="">2학년</a></li>
<li><a
href="">3학년</a></li>
<li><a
href="">4학년</a></li>
</ul>
</nav>
</header>
<section>
<header>
<h3>이달의
소식</h3>
</header>
<article>
네셔널
컨테스트에서
<strong>대상
수상</strong>을
하여
대한
대학교를
알렸습니다. 수상자는
<mark>홍길동</mark>입니다.
</article>
</section>
<footer>
2020년
대한
대학교
</footer>
</body>
</html>
댓글을 달아 주세요