0

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

The above warning is generated by https://validator.w3.org/.

Now let me show you the code of those line numbers.

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

Precisely the Line#32 that code is talking about is this →

<article class="form-control relativePos">

My HTML developer is saying there are only 2 ways to get rid of these warnings →

Either use <div></div> in place of section or article or use h2-h6 elements.

But my problem is I want to build my template on HTML5 tags and the code has no scope of putting up the headings because thats not required. what should I do?

Any alternative HTML5 attributes that can do this w/o enforcing the h2-h6 elements?

unor
  • 92,415
  • 26
  • 211
  • 360
WordCent
  • 725
  • 3
  • 18

2 Answers2

0

The answer is in your question. I will quote you: "I want to build my template on HTML5 tags and the code has no scope of putting up the headings because thats not required."

This is one of the biggest problems in the software industry. It's called Scope Creep. Basically, if something is not within the scope of requirements, you should avoid dealing with it unless absolutely necessary. Sometimes it's hard to bite the bullet though I know.

aguertin
  • 496
  • 4
  • 18
  • what do you suggest? should I move to div?If yes then some elements will be HTML5 and some div → would this be still considered semantic? By No means I need headings. Please advise. Thanks! – WordCent Dec 17 '16 at 07:29
0
  • Add h1 - h6 elements as much as you want
  • Wrap those h1 - h6 elements in divs styled the same as your other text
  • Add classes to the h1 - h6 elements to inherit the div style (which should be the same as the rest of your text)

Effect?

h1 - h6 that look exactly like the rest of your text instead of looking like heading elements

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>
Community
  • 1
  • 1