▶ 시맨틱(semantic) 태그
의미 요소(semantic element)란 그 자체로 의미를 가지고 있는 요소를 가리킨다. 즉, 요소가 자기 스스로 브라우저와 개발자 모두에게 자신이 사용된 의미를 명확히 전달해 주는 요소를 의미한다.
| 태그 | 설명 |
| <header> | 문서의 제목 요소 또는 로고/아이콘 등 헤더(header)를 정의한다. 헤더란 도입부에 해당하는 콘텐츠를 가지고 있는 부분이다. 또한 한 문서 내에 여러 개의 header요소가 존재할 수 있다. 1) 사이트 맨 위쪽이나 왼쪽에 주로 삽입하며, 헤더 안에 태그를 사용해서 검색 창을 넣거나 태그를 사용해 사이트 메뉴를 넣는다. 2) 태그를 본문 중에 사용해서 제목을 표 시할 수도 있다. |
| <hgroup> | 제목과 부제목을 묶어주는 역할 |
| <nav> | HTML 문서 사이를 탐색할 수 있는 링크(link)의 집합(즉 메뉴)을 정의함 nav요소는 링크의 커다란 집합을 의미하지만, 문서 내의 모든 링크가 nav요소에 포함되는 것은 아니다 |
| <section> | HTML 문서에서 섹션(section) 부분을 정의함. 문서에서 콘텐츠의 주제 그룹이다. 태그나 태그와 비교해서 콘텐츠 영역을 구분짓는 용도. 서로 관계 있는 문서 를 분리하는 역할을 한다. 실제 콘텐츠가 들어 있는 태그를 포함 한다. |
| <article> | HTML 문서에서 독립적인 하나의 기사(article) 부분을 정의한다. 독립적인 콘텐츠이다. 블로그 글, 포럼 글, 뉴스 기사이나 웹사이트 의 내용, 사용자가 등록한 코멘트, 독립적인 웹 콘텐츠 항목이 여기에 해당된다. 내용이 각 기 독립적인 내용을 담는다. |
| <aside> | HTML 문서에서 페이지 부분 이외의 콘텐츠(content)를 정의한다. 본문 내용 외에 주변에 표시되는 기타 내용들을 나 타낸다. 블로그 등에서 왼쪽이나 오른쪽, 혹은 하단 에 표시되는 광고나 링크 같은 사이드 바를 표시할 때 사용한다. |
| <footer> | footer 요소는 HTML 문서나 섹션(section) 부분에 대한 푸터(footer)을 정의한다. 문서의 꼬리말, 저자, 저작권 정보를 표시한다. |
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Yoko's Kitchen</title>
<link rel="stylesheet" type="text/css" href="../css/JP.css">
</head>
<body>
<div class="wrapper">
<header>
<h1>Yoko's Kitchen</h1>
<nav>
<ul>
<li><a href="main.html" class="current">홈</a></li>
<li><a href="">교실</a></li>
<li><a href="">케이터링</a></li>
<li><a href="">소개</a></li>
<li><a href="">연락처</a></li>
</ul>
</nav>
</header>
<section class="courses">
<article class="main-articles">
<figure>
<img src="../예제문서_1/bok-choi.jpg" alt="Bok Choi" />
<figcaption>Bok Choi</figcaption>
</figure>
<hgroup>
<h2>일본의 채식주의자</h2>
<h3>런던에서의 5주 코스</h3>
</hgroup>
<p>5주간 전통적인 일본의 채식주의자 음식에 대해 소개하고 쌀과 국수 요리를 가르친다.</p>
</article>
<article class="main-articles">
<figure>
<img src="../예제문서_1/teriyaki.jpg" alt="Teriyaki sauce" />
<figcaption>Teriyaki Sauce</figcaption>
</figure>
<hgroup>
<h2>소스 마스터클래스</h2>
<h3>1일 워크샵</h3>
</hgroup>
<p>1일 집중 코스에서는 다양한 일본 요리에서 사용할 수 있는 가장 맛있는 소스를 만드는 방법을 살펴본다.</p>
</article>
</section>
<aside>
<section class="popular-recipes">
<h2>인기 요리법</h2>
<a href="yakitori.html">야키토리(Yakitori) - 구운 닭</a>
<a href="">츠쿠네(Tsukune) - 닭꼬치</a>
<a href="">오코노미야키(Okonomiyaki)- 해물 부침개</a>
<a href="">미즈타키(Mizutaki) - 영계백숙</a>
</section>
<section class="contact-details">
<h2>연락처</h2>
<p>Yoko's Kitchen<br />
6, Teheran-ro 14-gil, Gangnam-gu, <br />
Seoul, Republic of Korea</p>
</section>
</aside>
<footer>
Copyright © 1998-2022 KH Information Educational Institute
All Right Reserved.
Contact webmaster for more information. 1544-9970
</footer>
</div><!-- .wrapper -->
</body>
</html>
'Web > html5' 카테고리의 다른 글
| 로그인,회원가입 form 만들기 (0) | 2022.05.05 |
|---|---|
| HTML5 태그 (0) | 2022.04.19 |
| HTML (웹표준, 태그 구성, 규칙) (0) | 2022.04.19 |