W3C validation generating error

Question

W3C validation generating error

97 views Asked by WordCent At 23 November 2024 at 06:15

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?

Original Q&A

There are 2 answers

AudioBubble On 17 December 2016 at 07:26

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>

**aguertin** · Accepted Answer · 2016-12-17 07:20:14

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.

TechQA.

W3C validation generating error

There are 2 answers

Related Questions in HTML

Related Questions in W3C-VALIDATION

Popular Questions

Popular Tags

Trending Questions