All*_*ual 21 navigation html5 nav semantics
我正在尝试使用html5切片元素和标题实现正确的切片,同时实现设计/布局,我的客户要求(包括某些限制).
总体布局将是这样的:
<body>
<header>
<nav class="breadcrumbs"><ol /></nav>
<h1>page title</h1>
<p>visual title</p>
<p>sponsor</p>
<nav class="main_navigation"><ul /></nav>
</header>
<div class="main_content">
<article><h2>Article title</h2></article>
<article><h2>Article title</h2></article>
<article><h2>Article title</h2></article>
<article><h2>Article title</h2></article>
</div>
<footer>Footer stuff<footer>
</body>
我现在关心的是,如果我使用html5大纲,我会获得痕迹导航和主导航显示为无标题的部分.按照分级标题结构,我不能在h2下面给他们标题,我自然不会"标题"他们并且用css隐藏标题来"标题"他们感觉不对.
什么是保持语义正确的最佳方法,确认seo标准并防止那些出现在无标题的部分？
显然,nav元素是无标题的,因为它们是分段元素.
如果必须在轮廓中将它们作为标题部分,则需要在其中添加标题.
在这种情况下,您可以执行以下操作...
<nav class="breadcrumbs">
<h2>Breadcrumb navigation</h2><ol />
</nav>
<h1>page title</h1>
<p>visual title</p>
<p>sponsor</p>
<nav class="main_navigation">
<h2>Main navigation</h2><ul />
</nav>
然后h2用css 隐藏s.
顺便说一句,你或许应该改变div,以section更加语义...这里
<section class="main_content">
<article><h2>Article title</h2></article>
<article><h2>Article title</h2></article>
<article><h2>Article title</h2></article>
<article><h2>Article title</h2></article>
</section>
小智 5
这是w3c的推荐方法 - 正如他们的edx课程中所提到的.
最佳实践1:为了不在屏幕上显示标题内容,Steve Faulkner在本文中描述了推荐的技术.不要在CSS样式表中使用display:none或visibility:hidden,因为在这种情况下,标题内容永远不会被屏幕阅读器发出声音,更常见的是辅助技术.
文章中的示例代码:
.offscreen
{
position: absolute;
clip: rect(1px 1px 1px 1px); /* for Internet Explorer */
clip: rect(1px, 1px, 1px, 1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
}
<div class="offscreen">This text is hidden.</div>