Html: Allow main inside td

[iane87]

Html5 gives validation error when main is nested inside a td. If the main content of my page is split from the rest of the page with table cells the only way to properly identify the main section is to put it inside a td which gives a validation error. Example below:

           <table>
                <tr>
                    <td><nav></nav></td>
                    <td><main></main></td>
                </tr>
                <tr>
                    <td></td>
                    <td><footer></footer></td>
                </tr>
            </table>

According to the specs it is invalid but I hope you will agree that should be changed for compatibility or add a pointer like below that just points to any element with matching id.

<main content="MainContent"></main>

Will not be able to add main tags to old sites without redoing the layout of the site even though the related html5 tags validate fine inside the tables. While I know there are newer ways to do this I was not trying to redo the existing layout.

A hierarchically correct main element is one whose ancestor elements are limited to html, body, div, form without an accessible name, and autonomous custom elements. Each main element must be a hierarchically correct main element.

https://html.spec.whatwg.org/#hierarchically-correct-main-element

[tabatkins]

Your example appears to show tables being abused for layout, rather than being used to display tabular data, so the HTML spec marking this as non-conforming seems completely reasonable.

[iane87]

It seems a little inconsistent that it is only throwing the error on main then. If table layout is abused for all elements except main it validates perfectly. I'd expect it to be all or nothing. Example:

<table>
                <tr>
                    <td><header></header></td>
        </tr>
        <tr>
                    <td><nav></nav></td>
        </tr>
</table>
<main></main>
<table>
        <tr>
                    <td><aside></aside></td>
                    <td><footer></footer></td>
            </tr>
</table>

[scottaohara]

there may be instances (though likely few) where those other elements could make sense within table cells, depending on the content they represent.

A <main> wouldn't belong within a correctly used <table> (which your example is not), as a single cell wouldn't represent the primary content of the document.

If you're trying to mitigate validation errors though, using a table for layout purposes should be your primary concern. If you truly cannot change the underlying structure, then your first order of business would be to negate the exposed semantics of the table (add a role=presentation to the <table>). You could then add a <div role=main> within the necessary cell to achieve what you're asking for here.