Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Alan Albrecht
Alan Albrecht
3,105 Points
Posted by Alan Albrecht
Alan Albrecht
3,105 Points

W3C Validation error Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.

I followed Nicks videos, checked my code against his and yet I still cant resolve this error. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Alan Albrecht | Developer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='https://fonts.googleapis.com/css?family=Roboto:700italic,700,500%7COswald:400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
      <h1>Alan XXXX</h1>
      <h2>Developer</h2>
        </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
</header>
    <div id="wrapper">
  <section>
    <ul id="gallery">
      <li>
        <a href="img/numbers-01.jpg">
          <img src="img/numbers-01.jpg" alt="">
          <p>Experimentation with color and texture.</p></a>
      </li>
      <li>
        <a href="img/numbers-02.jpg">
          <img src="img/numbers-02.jpg" alt="">
          <p>Playing with blending modes in Photoshop.</p></a>
      </li>
      <li>
        <a href="img/numbers-06.jpg">
          <img src="img/numbers-06.jpg" alt="">
          <p>Trying to create an 80's style glows.</p></a>
      </li>
      <li>
        <a href="img/numbers-09.jpg">
          <img src="img/numbers-09.jpg" alt="">
          <p>Drips created using Photoshop brushes.</p></a>
      </li>
      <li>
        <a href="img/numbers-12.jpg">
          <img src="img/numbers-12.jpg" alt="">
          <p>Creating shapes using repitition.</p></a>
      </li>
    </ul>
  </section>
  <footer>
    <a href="http://twitter.com/Alan_BKK"><img src="img/twitter-wrap.jpg" alt="Twitter Logo" class="social-icon"></a>
    <a href="http://www.facebook.com/alan.XXX.3"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
    <a href="http://www.instagram.com/khunalan75/?hl=en"><img src="img/instagram-wrap.jpg" alt="Instagram Logo" class="social-icon"></a>
    <a href="https://th.linkedin.com/in/XXX"><img src="img/linkedin-wrap.png" alt="LinkedIn Logo" class="social-icon"></a>
    <p>&copy; 2016 Alan XXXXXX</p>
  </footer>
      </div>
  </body>
</html>

2 Answers

srikarvedantam
srikarvedantam
8,369 Points
srikarvedantam
srikarvedantam
8,369 Points

You should add a heading to the <section> you defined. As per HTML 5.1 Specification, "Each section should be identified, typically by including a heading (h1-h6 element)as a child of the section element." So, just drop in the line <h3>Gallery</h3> right after the opening <section> and this warning will go away.

Although this is meant to help Screen readers, imagine if you are reading a newspaper and came across a section in it, won't you expect to it to have and read its heading before going through its content?

Alan Albrecht
Alan Albrecht
3,105 Points
Alan Albrecht
Alan Albrecht
3,105 Points

So then does this mean that Team Treehouse is teaching us to write incorrect code? Nick Petit seems to have been able to validate his code. What if you really do not want a header then would it be better to wrap the code in a <div> tag vice a <section> tag?

thank you Srikar for your response I appreciate it.