HTML Parser Insertion Modes and Table Context

A small piece of HTML can change what a visitor sees or how the browser understands a page. In this lesson, you will explore parser insertion modes and table context using a short example that you can inspect and change.

The Idea in Plain English

Browsers repair invalid table markup using special parser rules, including inserting a tbody and sometimes moving unexpected text outside the table (foster parenting).

You can test this using a small local HTML file. Change one part at a time and check the result in the browser before adding more code.

A Working Example

Read the sample once before copying it. Notice the element names and attribute values, then compare them with the explanation below.

<table>
    <caption>Scores</caption>
    <tbody>
        <tr>
            <th scope="row">Maya</th>
            <td>92</td>
        </tr>
    </tbody>
</table>

What Each Part Does

A table represents information arranged in related rows and columns.
The caption describes what the data table is about.
The tbody groups body rows in a table.

The Elements panel may contain tbody even when the HTML source leaves it out.

Keep the example small while learning. Once it behaves as expected, try it inside a larger page and make sure the URLs, files and surrounding HTML are correct.

Try It Yourself

Try this next: compare authored source against the DOM tree in DevTools focused on HTML Parser Insertion Modes and Table Context, including a working example and an incorrect example to correct. Then inspect the page and explain what changed.

Common Beginner Mistakes

Putting arbitrary paragraphs directly between tr children and assuming the DOM preserves that placement.
Changing several parts of the example at once, making it difficult to see which part caused a different result.
Choosing a tag only because its default appearance looks right, without checking whether it describes the content correctly.

Key Takeaways

Browsers repair invalid table markup using special parser rules, including inserting a tbody and sometimes moving unexpected text outside the table (foster parenting).
The Elements panel may contain tbody even when the HTML source leaves it out.
Test the markup in a browser, and check accessibility and real-world behavior where relevant.