防止在html5网站上显示为“无标题”部分

我正在尝试使用 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>

防止在html5网站上显示为“无标题”部分

解决方法

相关文章