W3C 验证生成错误

Question

Warning: Article lacks heading. Consider using h2-h6 elements to add identifying headings to all articles. From line 32, column 5; to line 32, column 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 个标签上构建我的模板，而代码没有放置标题的范围，因为那不是必需的。我该怎么办？

任何替代 HTML5 属性可以执行此操作 w/o 强制执行 h2-h6 元素？

Answer 1

答案就在你的问题中。我会引用你："I want to build my template on HTML5 tags and the code has no scope of putting up the headings because thats not required."

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

Answer 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>

W3C 验证生成错误

W3C validation generating error

html

w3c-validation