Wine Festival Schedule Project: Showing 3 Similar Errors In Validator.W3.org(Debugging the code)

Hello,
I just finished the wine festival schedule project and I have taken it upon myself to regularly check for code errors using validator.w3.org and there are three similar errors that just don’t seem to be going away which are h1 and h2 must not appear as a descendant of the th element.


I even used the inspect code to view the html code for the page of the solution, I copied it and tested that and I got the same thing. I am not sure if this type of error should be ignored or if it can be fixed and how to fix it.
This is my code below and the error is from the h1 and h2s inside the table element.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Aguillar Family Wine Festival</title>
  </head>
  <body>
   <table>
     <thead>
       <tr>
         <th colspan="2">
           <h1>Wine Festival Schedule</h1>
         </th>
       </tr>
       <tr>
         <th>
           <h2>Time</h2>
         </th>
         <th>
           <h2>Event</h2>
         </th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td class="left"><h3>12:00 PM</h3></td>
         <td><h3>Welcome Reception</h3></td>
       </tr>
       <tr>
         <td class="left"><h3>01:00 PM</h3></td>
         <td><h3>Stortelling & Tasting</h3></td>
       </tr>
       <tr>
         <td class="left"><h3>02:00 PM</h3></td>
         <td><h3>Wine Luncheon</h3></td>
       </tr>
       <tr>
         <td class="left"><h3>03:00 PM</h3></td>
         <td><h3>Aguillar Family Wines</h3></td>
       </tr>
       <tr>
         <td class="left"><h3>04:00 PM</h3></td>
         <td><h3>Wine & Cheese Tasting</h3></td>
       </tr>
     </tbody>
   </table>
  </body>
</html>

This is the link to the project
https://bit.ly/3gUP1H1

Hi @aj4short, this is weird, I don’t think you should be having these errors…Is your code working though ?

Yes, the code is working fine. I am not entirely sure what is going on

Well as long as it working and not creating any issues, it’s ok.

Ok thanks
That’s good to know as I spent a lot of time just trying to get this fixed and wasn’t able to.

1 Like

This is not always true. Just because something works does not mean it is a good idea. Most browsers can catch errors in code and alter it to render it, but this means different browsers may render differently or not at all. The standard exists so that there is something all will do the same.

Taking a look at the documentation, you will see:

Permitted content: Flow content, but with no header, footer, sectioning content, or heading content descendants.

Which explains your error.

1 Like

You’re right, thanks for clarifying this subject matter. I did the Wine Festival project too in the Front-End Engineer career path and just followed the steps and the result was there so, I never really double checked the markup.

1 Like

Does that mean we are not supposed to use the h1 and h2 tags when making use of the th tag? because I just tried doing that and it showed no error after the check but the display output was no longer the same as the solution of the project.
h1
This was without using the h1 and h2 tags as descendants of the th tag
h12
This was with using the h1 and h2 tags as descendants of the th tag as was instructed in the project’s instructions

Perplexing.

A couple solutions I can think of, are

  1. The course could be outdated assuming the solution uses headers, if so I could submit as a bug/quality report.

  2. If Codecademy didn’t use headers, chances are they are using styling to the larger scale font.

1 Like

Ok, thanks.
I guess that might be the case