>  기사  >  웹 프론트엔드  >  html nav 태그의 기능과 사용법에 대한 자세한 설명

html nav 태그의 기능과 사용법에 대한 자세한 설명

黄舟
黄舟원래의
2017-06-29 14:19:458528검색

HTML5의 새로운 요소 태그 c787b9a589a3ece771e842a6176cf8e9는 navigation 속성이 있는 링크를 함께 나누는 데 사용되어 의미화 측면에서 코드 구조를 더욱 정확하게 만들고 스크린 리더와 같은 장치에 대한 더 나은 지원을 제공합니다.
오랫동안 우리는 HTML5에서 eb545d6e9e25f5c0174408f6286375ad 또는 9e490bea09a82f3ff6663081fb0e947b 형식의 코드를 사용하는 데 익숙했습니다. 탐색 목록은 c787b9a589a3ece771e842a6176cf8e9 태그에 배치됩니다.

<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>

W3C 정의 사양에 따르면:

nav 요소는 페이지 탐색으로 사용할 수 있는 링크 그룹입니다. 현재 페이지의 다른 부분. 예를 들어 모든 링크 그룹을 c787b9a589a3ece771e842a6176cf8e9 요소에 넣을 필요는 없습니다. 이 경우에는 일반적으로 서비스 약관, 홈페이지, 저작권 설명 등을 포함한 링크 그룹이 있습니다. c787b9a589a3ece771e842a6176cf8e9 요소가 필요 없이 c37f8231a37e88427e62669260f0074d 요소를 사용하는 것이 가장 적합합니다.

페이지에는 전체 페이지 또는 여러 부분에 대한 탐색으로 여러 개의 c787b9a589a3ece771e842a6176cf8e9 요소가 있을 수 있습니다. 다음은 W3C에서 제공한 코드 예입니다.

<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>

이 예에서는 e52a1c207e1704351a3fcb3bf605fbcd 태그 내에 배치할 수도 있습니다.

위 내용은 html nav 태그의 기능과 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.