Minimum HTML

13.10.2016

Did you know that you don’t (usually) need to open your <html> or close <li>, <td> and some other tags, and still have valid markup? See how minimalistic the HTML can be and become a radical byte-saver!

Document template

Look how much shorter this template is than your typical “boilerplate”. In this example, we benefit from <p> elements being optional to close (though it’s not always like that - the safest is to no-close <p> in neighbourhood of other paragraphs). The opening <html> tag is not even required if only there’s no HTML comment as the first thing inside it, and there’s a similar story with <head> and <body> tags!

1
2
3
4
5 <!doctype html>
<meta charset="utf-8">
<title>Minimum HTML</title>
<p>I'm a paragraph.
<p>End of body, now.

Table template

In practice, every inner element of <table> is optional to close. It looks a bit cleaner to me than full markup, at least in this simple example. Notice that between lines 5-6 we skipped two nested tags at once - <tr> and <thead> - and it’s still OK.

1
2
3
4
5
6
7
8
9
10
11
12
13 <table>
  <thead>
    <tr>
      <th>Name
      <th>Surname
  <tbody>
    <tr>
      <td>John
      <td>Smith
    <tr>
      <td>Jane
      <td>Kowalski
</table>

Select template

1
2
3
4
5
6
7
8 <select>
  <optgroup label="Cars">
    <option>Noble
    <option>Ultima
  <optgroup label="Motorcycles">
    <option>Triumph
    <option>Ducati
</select>

List template

1
2
3
4
5 <ol>
  <li>Veni
  <li>Vidi
  <li>Vici
</ol>

The pains

In all its simplicity, minimum HTML may become invalid, especially in generated templates. There are specific rules for omitting i.e. </p> or <body>, and if you can’t predict what goes into your template - don’t do it! The minimum version will still be fine for static, fully-controlled source.

You also may have hard time with your editor - the software doesn’t appreciate this style of coding. The screenshot below shows how Atom auto-indents the list without closing tags.