How To Write a Minimal HTML5 Document

Published on 2020-08-03 18:18:00+02:00

Yes, I know how it sounds to have both "HTML" and "minimal" in one sentence. I think it's possible to accomplish that and I'll show you how. Before we start, let's set some rules:

Sounds good. Keeping those rules in mind, the shortest document we can produce is:

<!doctype html>
<title>Hello</title>

In case of doubts consult W3's checker. You must insert the code yourself, as they don't support this kind of links.

html5 logo

Now then, that's not quite useful, but it clearly indicates that we can skip tags. We can skip a lot of tags and the document will remain valid. First of all, you can skip head and body elements entirely, as long as you keep the content in the document in a nice sequence and the division between the meta information and the actual body is easily deducible: 

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">

<title>Hello</title>

<h1>Hello</h1>
<p>Lorem ipsum dolor sit amet.

There are a few points of interests in this example:

<html lang="en">
html element can be omitted entirely but it's suggested to use its lang attribute to specify intended language of the document. Missing lang="en" is not an error; it's a warning, but the attribute is quite helpful for browsers, search engines and therefore users.
<meta charset="utf-8">
meta element with charset is not needed, but is suggested.
<p>Lorem...
Ending tag for p may be omitted in the usual cases.
</h1>
Ending tag for h1 (and other headings) must be present just like in case of title element.

The rule that applies to p also applies to e.g. li, dt or dd. Generally, if I'm not sure if I can omit the ending tag, I ask myself two questions:

Answering those is kind of tricky at the start but one gets used to it. I did, at least. If you are still unsure, you can refer directly to the standard.

Let's walk through a longer example, the comments are in-lined in its elements: 

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">

<title>Title must have an ending tag</title>

<article>
<h1>h1 must have one as well</h1>

<p>This paragraph is good as it is.
<p>Same goes for this one. In-line text styles must have end tags pretty
much <strong>always</strong>. But hey, it would be weird to
<em>not have them</em> there, right?</p>
<img src="image.png" alt="logo or something, dunno">
<p>Img element can be a child of a paragraph. If you want to make sure that
it is outside of p, then write end tag manually.
<p>Following pre element is considered a block, so you can skip ending tag.

<pre>
On the other hand pre MUST have ending tag.
</pre>

<p>We're cool here, as everything is closed so far. Let's list some stuff:

<ul>
<li>ul is the same as pre in context of ending tag for the p element.
<li>List elements may omit ending tags.
<li>Same applies to dt, dd that are used in dl
<li>dl and ol follow the same rules as pre and ul. Ending tag is needed.
</ul>

<table>
<tr><td>As    <td>you     <td>see
<tr><td>table <td>insides <td>are
<tr><td>cool  <td>without <td>end tags.
</table>

<p>But only insides. Table itself must have end tag.
Same goes for article element:

</article>

That's about it. In example above the deepest element in hierarchy was: html/article/table/tr/td. That's 5 visible levels. Of course, behind the scenes there are more including tbody and body, but that's acceptable in our case. As per requirements, the presented document is valid.

I think that adding some more personal restrictions can make the document more readable in plain text. Some users may appreciate it. Consider adding empty lines where it feels necessary, adding or skipping indention, and so on.

In case of problems refer to: