Is it valid to put h3 (or any heading) inside td tags?
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).
jeff
Updated on June 08, 2022Comments
-
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 over 10 yearsThanks for this descriptive answer.
-
unor over 10 yearsNote for HTML5: the content model of
th
is different than the one oftd
.th
has: "Flow content […] with no […] heading content descendants".