W3C 验证生成错误 [重复]答案

【问题标题】：W3C validation generating error [duplicate]W3C 验证生成错误 [重复]
【发布时间】：2016-12-17 06:58:08
【问题描述】：

警告：文章缺少标题。考虑使用 h2-h6 元素添加识别所有文章的标题。从第 32 行第 5 列开始；到线 32，第 46 栏↩↩

以上警告由https://validator.w3.org/生成。

现在让我给你看一下这些行号的代码。

<article class="form-control relativePos">
        <ul class="formsectionTab">
            <li class="active"><a href="#services">1. Services</a></li>
            <li><a href="#time">2. Time</a></li>
            <li><a href="#details">3. Details</a></li>
            <li><a href="#payment">4. Payment</a></li>
            <li><a href="#done">5. Done</a></li>
        </ul>

代码所说的第 32 行正是这个 →

<article class="form-control relativePos">

我的 HTML 开发人员说只有两种方法可以消除这些警告 →

要么使用<div></div> 代替部分或文章，要么使用 h2-h6 元素。

但我的问题是我想在 HTML5 标记上构建我的模板，并且代码没有放置标题的范围，因为那不是必需的。我该怎么办？

任何可以在不强制 h2-h6 元素的情况下执行此操作的替代 HTML5 属性？

【问题讨论】：

只需使用div。浏览器对 article 没有什么特别的作用，用户使用它也没有从文档中获得任何额外的好处。

标签： html w3c-validation

【解决方案1】：

答案就在您的问题中。我会引用你的话：“我想在 HTML5 标记上构建我的模板，并且代码没有放置标题的范围，因为那不是必需的。”

这是软件行业最大的问题之一。它被称为Scope Creep。基本上，如果某些事情不在要求的范围内，除非绝对必要，否则您应该避免处理它。虽然我知道，有时候很难硬着头皮去。

【讨论】：

你有什么建议？我应该移动到 div 吗？如果是，那么一些元素将是 HTML5 和一些 div →这是否仍被视为语义？绝不我需要标题。请指教。谢谢！

【解决方案2】：

根据需要添加h1 - h6 元素
将h1 - h6 元素包裹在divs 中，其样式与您的其他文本相同
向h1 - h6 元素添加类以继承div 样式（ 应该与您的文本的其余部分相同）

效果？

h1 - h6 看起来与文本的其余部分完全一样，而不是看起来像标题元素

body {
  background: #111;
  color: #999;
  text-align: justify;
  text-justify: inter-word;
  max-width: 80%;
  margin: 10%
}
.uniform {
  display: inherit;
  text-align: inherit;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}
.mycoolstyle {
  color: red;
  font-size: 22px;
  font-weight: bold;
  display: inline;
}

<body>
  <div>
    <h1>This is a Header 1 with browser defaults</h1>
    <div class="mycoolstyle">
      <h1 class="uniform">This is a Header 1 with inhertied div style</h1>
    </div>
    <h2>This is a Header 2 with browser defaults</h2>
    <div class="mycoolstyle">
      <h2 class="uniform">This is a Header 2 with inhertied div style</h2>
    </div>
    <h3>This is a Header 3 with browser defaults</h3>
    <div class="mycoolstyle">
      <h3 class="uniform">This is a Header 3 with inhertied div style</h3>
    </div>
    <p>This is a paragraph with browser defaults
      <br>Lorem ipsum dolor sit amet, in eam simul nostrud definiebas, mea iusto placerat prodesset ei. Eum summo audiam ea. Vitae aperiri at duo. Vis atomorum partiendo id, nam ea noluisse platonem. Nec minimum consequat cu, pri in harum moderatius. Ferri
      aperiam forensibus an nam.</p>
    <div class="mycoolstyle">
      <p class="uniform">This is a paragraph with inhertied div style
        <br>Lorem ipsum dolor sit amet, in eam simul nostrud definiebas, mea iusto placerat prodesset ei. Eum summo audiam ea. Vitae aperiri at duo. Vis atomorum partiendo id, nam ea noluisse platonem. Nec minimum consequat cu, pri in harum moderatius. Ferri
        aperiam forensibus an nam.</p>
    </div>
  </div>
</body>

【讨论】：