Did you know that you don’t (usually) need to open your
<html> or close
<td> and some other tags, and still have valid markup? See how minimalistic the HTML can be and become a radical byte-saver!
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
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.
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 -
<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>
1 2 3 4 5 6 7 8 <select> <optgroup label="Cars"> <option>Noble <option>Ultima <optgroup label="Motorcycles"> <option>Triumph <option>Ducati </select>
1 2 3 4 5 <ol> <li>Veni <li>Vidi <li>Vici </ol>
In all its simplicity, minimum HTML may become invalid, especially in generated templates. There are specific rules for omitting i.e.
<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.
- https://developer.mozilla.org/pl/docs/Web/HTML/Element/body - MDN article explaining rules for omitting opening
- http://webdesign.about.com/od/htmltags/qt/optional-html-end-tags-when-to-include-them.htm - article listing all HTML tags that are optional to close, and discussing pros and cons of “being smart” with optional tags
- http://stackoverflow.com/questions/3008593/html-include-or-exclude-optional-closing-tags - SO topic about the practice of including optional closing tags in HTML