我正在尝试使用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隐藏标题来给他们“标题”感觉是错误的。
最好的方法是保持语义正确,确认搜索引擎优化标准,并防止这些显示为无标题的部分?
发布于 2011-08-25 21:41:38
显然,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>
然后用css隐藏h2
。
顺便说一句,您可能应该将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>
发布于 2013-04-16 11:16:46
您不必将自己限制为整个页面上只有一个h1,您可以使用任意多的use。Header由分段元素划分,每个分段可以有其自己的层次结构,从h1开始向下。如果需要,您甚至可以在每个节中使用多个h1s,这些节嵌套在节中,每个节都有自己的独立结构。这完全取决于你想要如何构建你的页面/大纲。
此外,假设您在示例中只使用了3个级别,您可以很容易地将文章压缩到h3或h4以适应nav标题。拥有一个标题(隐藏的或其他的)确实是给你的分段元素添加语义标题的正确方式。
http://html5doctor.com/outlines/ http://www.456bereastreet.com/archive/201103/html5_sectioning_elements_headings_and_document_outlines/
https://stackoverflow.com/questions/7191348
复制相似问题