Background
There are a lot of instances defined in the HTML spec where end tags can be omitted while still maintaining valid markup.
Some examples:
An li element’s end tag may be omitted if the li element is immediately followed by another li element or if there is no more content in the parent element.
A p element’s end tag may be omitted if the p element is immediately followed by an address, article, aside, blockquote, details, div, dl, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, main, nav, ol, p, pre, section, table, or ul element, or if there is no more content in the parent element and the parent element is an HTML element that is not an a, audio, del, ins, map, noscript, or video element, or an autonomous custom element.
You can see all of them over at https://www.w3.org/TR/html5/syntax.html#optional-tags
Utilizing these rules, I think it may be possible to reduce the amount of html needed to be initially downloaded by the user for serverside rendering.
Depending on what's being rendered, there could be a significant decrease in html size. Here's an example I pulled from the W3C of a table element utilizing these rules. The difference is 464 bytes compared to 629 – about a 26% decrease in size.
<table>
<caption>37547 TEE Electric Powered Rail Car Train Functions (Abbreviated)
<colgroup><col><col><col>
<thead>
<tr>
<th>Function
<th>Control Unit
<th>Central Station
<tbody>
<tr>
<td>Headlights
<td>✔
<td>✔
<tr>
<td>Interior Lights
<td>✔
<td>✔
<tr>
<td>Electric locomotive operating sounds
<td>✔
<td>✔
<tr>
<td>Engineer’s cab lighting
<td>
<td>✔
<tr>
<td>Station Announcements - Swiss
<td>
<td>✔
</table>
Caveats
- Even though these rules are in the spec, they still feel like quirks to me. There probably are some browser-to-browser differences in how these are handled.
- Should this even be handled by React? I could see a babel plugin or something like that being a good fit for an optimization like this too.
Possible roadmap
Background
There are a lot of instances defined in the HTML spec where end tags can be omitted while still maintaining valid markup.
Some examples:
You can see all of them over at https://www.w3.org/TR/html5/syntax.html#optional-tags
Utilizing these rules, I think it may be possible to reduce the amount of html needed to be initially downloaded by the user for serverside rendering.
Depending on what's being rendered, there could be a significant decrease in html size. Here's an example I pulled from the W3C of a table element utilizing these rules. The difference is 464 bytes compared to 629 – about a 26% decrease in size.
Caveats
Possible roadmap