我正在尝试使用
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 outliner,我得到了面包屑导航,主导航显示为无标题.
按照层次化的标题结构,我不能给他们h2以下的头条新闻,当然我也不会“标题”他们,并将css标题隐藏到“标题”中,他们觉得错误.
什么是保持语义正确的最佳方法,确认SEO标准,并阻止它们显示为无标题的部分？
解决方法
显然,导航元素是无标题的,因为它们是分段元素.
如果您必须将它们作为您的大纲中的标题部分,则需要在其中添加标题.
在这种情况下,您可以执行以下操作：
<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>
然后用css隐藏h2s.
BTW,你应该可以将div更改为更多语义…这里
<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>