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:
- Document syntax must be valid. From the very beginning to the very end of it - all valid HTML5.
- Element hierarchy should be shallow and not exceed 5 levels. This only includes what is written and not how browser
interprets it.
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.
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:
- "Is this element a part of some sequential or well-defined data structure?"
- "Could the next element be a child of this element?"
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: