CODEDRAGON ㆍDevelopment/Web, WWW
CodeLab - 시멘틱 태그 01.html
- sematic
- 시멘틱 태그
- 표현을 위한 태그
- 소스코드
- 출력결과
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>
출력결과
'Development > Web, WWW' 카테고리의 다른 글
| Tomcat 설정 및 Dynamic Web Project 생성 (0) | 2022.01.27 |
|---|---|
| 시멘틱 태그 작성 - 02.html (0) | 2021.12.15 |
| HTML5 시멘틱 태그 (0) | 2021.12.15 |
| CodeLab ch01-first / 01.html-Hello World (0) | 2021.12.14 |
| Encode & decode HTML entities - 특수기호를 HTML 엔티티 코드로 변환 (0) | 2021.11.23 |