Is it valid to put h3 (or any heading) inside td tags?

10,867

Solution 1

thead is not h3, if you use h3 inside td element, it is absolutely fine, but if you use h3 as a direct child to tr is invalid.

Inorder to use thead you can use it like this

<table>
   <thead>
      <tr>
         <th>This is table head and not h3</th>
      </tr>
   </thead>
   <tfoot>
      <tr>
         <td>Foot Cell</td>
      </tr>
   </tfoot>
   <tbody>
       <tr>
          <td>
             <h3>It's completely valid to put your h3 here</h3>
             Table cell
             <p>You can also use p tag here
           </td>
       </tr>
   </tbody>
</table>

But if you do it something like this, is invalid

<table>
   <tr>
      <h3>It's invalid</h3>
      <td>This is a cell</td>
   </tr>
</table>

You can always check here whether your markup is valid or not.

Solution 2

No elements can appear inside a tag. Inside a td element, i.e. between the <td> tag and the corresponding (possibly implicit) </td> tag, the content model is “flow content”. This effectively means anything that may appear inside the document body in general. So syntactically, h3 is allowed.

The content model of th is the same as that of td in HTML4, but in HTML5 CR, it is more limited and excludes heading elements, among other things.

The content model of the tr element (table row) allows only th and td children, so nothing else may appear directly inside it, only as wrapped in th or td.

These are the syntax rules and they do not imply that all content would be meaningful. In particular, a heading element inside th would be rather anomalous (what would it be a heading for? the th markup itself means a header cell), whereas in a td cell it could make perfect sense (e.g., in a table that compares two texts piecewise side by side).

Share:
10,867
jeff
Author by

jeff

Updated on June 08, 2022

Comments

  • jeff
    jeff almost 2 years

    The question is asked for TH tags, but I couldn't find one for TD tags.

    Can I put headings inside <td> tags?

  • jeff
    jeff over 10 years
    Thanks for this descriptive answer.
  • unor
    unor over 10 years
    Note for HTML5: the content model of th is different than the one of td. th has: "Flow content […] with no […] heading content descendants".