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

Tejun Fowler
Tejun Fowler
794 Points
Posted by Tejun Fowler
Tejun Fowler
794 Points

validator w3c keeps saying my html <section> element needs to be changed to a <h3> ? <h6>

Here is the warning //****** Warning: Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections. From line 26, column 7; to line 26, column 15 r">↩ <section>↩ ******* //

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Tejun Fowler</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/tejun.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>Tejun Fowler</h1> <h2>Artist</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="myimage/bronze.jpg"> <img src="myimage/bronze.jpg" alt=""> <p>Bronze Titled, From Babylon to Baghdad</p> </a> </li> <li> <a href="myimage/bronzecloseup.jpg"> <img src="myimage/bronzecloseup.jpg" alt=""> <p>Bronze Titled, From Babylon to Baghdad</p> </a> </li> <li> <a href="myimage/horse.jpg"> <img src="myimage/horse.jpg" alt=""> <p>Horse Drawing</p> </a> </li> <li> <a href="myimage/dragon.jpg"> <img src="myimage/dragon.jpg" alt=""> <p>Dragon Drawing</p> </a> </li> <li> <a href="myimage/tejun.jpg"> <img src="myimage/tejun.jpg" alt=""> <p>Tejun</p> </a> </li> </ul> </section> <footer> <a href="https://twitter.com/TejunFowler"> <img src="img/twitter-wrap.png" alt="Facebook Logo" class="social-icon"></a> <a href="https://facebook.com/tejun.fowler"> <img src="img/facebook-wrap.png" alt="Twitter Logo" class="social-icon"></a> <p>© 2016 Tejun.</p> </footer> </div> </body> </html>

2 Answers

Billy Bellchambers
Billy Bellchambers
21,689 Points
Billy Bellchambers
Billy Bellchambers
21,689 Points

Hi Tejun,

I don't see anything wrong with your code.

I believe what that statement is saying is to qualify as valid HTML on the validator you've used every <section> element must contain at least one <h..> element as to content identifier on your page.

These are not essential and the code you've got should work fine without just bare in mind specific conditions required to pass validation like these, but does not mean your code is wrong.

But what the validator is after is something like below, note a couple of other missing elements I spotted when adding in the suggested <h..> element.

<!DOCTYPE html>  // couldnt see you doctype not sure if this was just cut off when copying
<head> // its also common practise to contain meta data, link, title in the head element was missing in you code
<meta charset="utf-8">
<title>Tejun Fowler</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/tejun.css">
<link rel="stylesheet" href="css/responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head> // close head tag
<body>   //you also seemed to be missing the <body> tags these should contain all your page contain inside.
<header>
  <a href="index.html" id="logo">
    <h1>Tejun Fowler</h1>
    <h2>Artist</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>
    <h3>This is what the validator wanted</h3>  //however this is not essential and will work without
    <ul id="gallery">
      <li>
        <a href="myimage/bronze.jpg">
          <img src="myimage/bronze.jpg" alt="">
          <p>Bronze Titled, From Babylon to Baghdad</p>
        </a>
      </li>
      <li>
        <a href="myimage/bronzecloseup.jpg">
          <img src="myimage/bronzecloseup.jpg" alt="">
          <p>Bronze Titled, From Babylon to Baghdad</p>
        </a>
      </li>
      <li>
        <a href="myimage/horse.jpg">
          <img src="myimage/horse.jpg" alt="">
          <p>Horse Drawing</p>
        </a>
      </li>
      <li>
        <a href="myimage/dragon.jpg">
          <img src="myimage/dragon.jpg" alt="">
          <p>Dragon Drawing</p>
        </a>
      </li>
      <li>
        <a href="myimage/tejun.jpg">
          <img src="myimage/tejun.jpg" alt="">
          <p>Tejun</p>
        </a>
      </li>
    </ul>
  </section>
  <footer>
    <a href="https://twitter.com/TejunFowler">
    <img src="img/twitter-wrap.png" alt="Facebook Logo" class="social-icon"></a>
    <a href="https://facebook.com/tejun.fowler">
    <img src="img/facebook-wrap.png" alt="Twitter Logo" class="social-icon"></a>
    <p>&copy; 2016 Tejun.</p>
  </footer>
 </div>
</body> //closing body tag
</html> //closing html tag

Hope this helps you out

Tejun Fowler
Tejun Fowler
794 Points
Tejun Fowler
Tejun Fowler
794 Points

Hey Thank you so much for taking the time to look. I wanted to make sure before I moved on.