hgroup
태그는 웹페이지나 섹션의 제목을 그룹화하는 데 사용됩니다.
<hgroup>
<h1>Welcome to my WWF</h1>
<h2>For a living planet</h2>
</hgroup>
<p>The rest of the content...</p> 로그인 후 복사
header
header 요소는 안내 및 탐색 기능을 갖춘 보조 요소입니다. 일반적으로 헤더 요소에는 블록 제목(예: h1~h6 또는 hgroup 요소 태그)이 포함될 수 있지만 데이터 테이블, 검색 양식 또는 관련 로고 이미지와 같은 다른 콘텐츠도 포함될 수 있습니다.
<header>
<h1>The most important heading on this page</h1>
</header> 로그인 후 복사
동일한 페이지에서 각 콘텐츠 블록은 고유한
요소에는 일반적으로 제목 태그(h1~h6) 또는 hgroup이 포함됩니다. 또한 최신 W3C HTML5 사양 업데이트에 따라 데이터 테이블, 검색 양식 또는 관련 로고 이미지와 같은 다른 콘텐츠도 포함될 수 있으며 요소 태그도 사용할 수 있습니다.
바닥글
바닥글 요소는 직접 상위 콘텐츠 블록 또는 루트 블록의 끝으로 사용될 수 있습니다. 바닥글에는 일반적으로 작성자, 관련 읽기 링크, 저작권 정보 등 관련 블록에 대한 추가 정보가 포함됩니다.
<div id="footer">
<ul>
<li>copyright</li>
<li>sitemap</li>
<li>contact</li>
<li>to top</li>
</ul>
<div> 로그인 후 복사
<footer>
<ul>
<li>copyright</li>
<li>sitemap</li>
<li>contact</li>
<li>to top</li>
</ul>
</footer> 로그인 후 복사
동일한 페이지에서 여러 개의 요소를 사용할 수 있으며, 이는 전체 페이지의 바닥글 또는 콘텐츠 블록의 끝으로 사용할 수 있습니다.
주소
요소는 문서 작성자의 이름, 사이트 링크, 이메일 주소, 실제 주소, 전화번호 등을 포함하여 문서 내 연락처 정보를 표시하는 데 사용됩니다. 주소는 이메일과 같은 "주소" 개념을 표시하는 데만 사용되지 않습니다. 주소 또는 실제 주소이지만 문서를 작성한 사람과 관련된 다양한 연락처 정보를 포함해야 합니다.
The HTML5 Doctor is run by the following group of volunteers:
<address>
<a href="http://html5doctor.com/author/jacko">Jack Osborne</a>,
<a href="http://html5doctor.com/author/richc">Rich Clark</a>,
<a href="http://html5doctor.com/author/miker">Mike Robinson</a>,
</address> 로그인 후 복사
;time> 요소:
<footer>
<div class="vcard"> by
<address class="author">
<em class="fn"><a title="Posts by Jack Osborne" href="#">Jack Osborne</a></em>
</address> on
<time datetime="2009-11-04" class="published updated">November 4th, 2009</time>
</div>
</footer> 로그인 후 복사
<div class="vcard">
<p class="fn"><a class="url" href="#">Dr. Jack Osborne</a><p>
<p class="adr">
<span class="street-address">HTML5 Hospital</span>
<span class="region">Doctorville</span>
<span class="postal-code">Postal Code</span>
<span class="country-name">Great Britain</span>
</p>
<p class="tel">+44 (0)XXXX XXXXXX</p>
</div> 로그인 후 복사
nav 요소는 페이지 탐색으로 사용할 수 있는 링크 그룹입니다. 탐색 요소는 다른 페이지나 현재 페이지의 다른 부분으로 연결됩니다. 예를 들어 모든 링크 그룹을 요소에 넣을 필요는 없습니다. 이 경우에는 일반적으로 서비스 약관, 홈페이지, 저작권 설명 등을 포함한 링크 그룹이 있습니다. 요소 없이 요소를 사용하는 것이 가장 적합합니다.
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/blog/">Blog</a></li>
</ul>
</nav> 로그인 후 복사
<body>
<h1>The Wiki Center Of Exampland</h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/events">Current Events</a></li>
...more...
</ul>
</nav>
<article>
<header>
<h1> Demos in Exampland</h1>
<p>Written by A. N. Other.</p>
</header>
<nav>
<ul>
<li><a href="#public">Public demonstrations</a></li>
<li><a href="#destroy">Demolitions</a></li>
...more...
</ul>
</nav>
<div>
<section id="public">
<h1>Public demonstrations</h1>
<p> ...more...</p>
</section>
<section id="destroy">
<h1>Demolitions</h1>
<p>...more...</p>
</section>
...more...
</div>
<footer>
<p><a href="?edit">Edit</a> | <a href="?delete">Delete</a> | <a href="?Rename">Rename</a></p>
</footer>
</article>
<footer>
<p><small>© copyright 1998 Exampland Emperor</small></p>
</footer>
</body> 로그인 후 복사
以上就是HTML5学习笔记简明版（3）：新元素之hgroup,header,footer的内容，更多相关内容请关注PHP中文网（m.sbmmt.com）！
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
