1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
|
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="aki">
<meta name="tags" content="tutorial, template, minimal, valid, html5, web page, document">
<link rel="icon" type="image/png" href="cylo.png">
<link rel="stylesheet" type="text/css" href="style.css">
<title>How To Write a Minimal HTML5 Document</title>
<nav><p><a href="https://ignore.pl">ignore.pl</a></p></nav>
<article>
<h1>How To Write a Minimal HTML5 Document</h1>
<p class="subtitle">Published on 2020-08-03 18:18:00+02:00
<p>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:</p>
<ul>
<li>Document syntax must be valid. From the very beginning to the very end of it - all valid HTML5.
<li>Element hierarchy should be shallow and not exceed 5 levels. This only includes what is written and not how browser
interprets it.
</ul>
<p>Sounds good. Keeping those rules in mind, the shortest document we can produce is:</p>
<pre>
<!doctype html>
<title>Hello</title>
</pre>
<p>In case of doubts consult <a href="https://validator.w3.org/nu/">W3's checker</a>. You must insert the code yourself,
as they don't support this kind of links.</p>
<img src="how_to_write_a_minimal_html5_document-1.png" alt="html5 logo">
<p>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 <code>head</code> and <code>body</code> 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:
<pre>
<!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.
</pre>
<p>There are a few points of interests in this example:
<dl>
<dt><code><html lang="en"></code>
<dd><code>html</code> element can be omitted entirely but it's suggested to use its <code>lang</code> attribute to
specify intended language of the document. Missing <code>lang="en"</code> is not an error; it's a warning, but the
attribute is quite helpful for browsers, search engines and therefore users.
<dt><code><meta charset="utf-8"></code>
<dd><code>meta</code> element with <code>charset</code> is not needed, but is suggested.
<dt><code><p>Lorem...</code>
<dd>Ending tag for <code>p</code> may be omitted in the usual cases.
<dt><code></h1></code>
<dd>Ending tag for <code>h1</code> (and other headings) must be present just like in case of <code>title</code> element.
</dl>
<p>The rule that applies to <code>p</code> also applies to e.g. <code>li</code>, <code>dt</code> or <code>dd</code>.
Generally, if I'm not sure if I can omit the ending tag, I ask myself two questions:
<ul>
<li>"Is this element a part of some sequential or well-defined data structure?"
<li>"Could the next element be a child of this element?"
</ul>
<p>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 <a href="https://html.spec.whatwg.org/multipage/syntax.html#optional-tags">the standard</a>.
<p>Let's walk through a longer example, the comments are in-lined in its elements:
<pre>
<!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>
</pre>
<p>That's about it. In example above the deepest element in hierarchy was:
<code>html</code>/<code>article</code>/<code>table</code>/<code>tr</code>/<code>td</code>.
That's 5 visible levels. Of course, behind the scenes there are more including <code>tbody</code> and <code>body</code>,
but that's acceptable in our case. As per requirements, the presented document is valid.
<p>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.
<p>In case of problems refer to:
<ul>
<li><a href="https://html.spec.whatwg.org/multipage/syntax.html#optional-tags">HTML standard</a>
<li><a href="https://developer.mozilla.org/pl/">MDN web docs</a>
<li><a href="https://validator.w3.org/nu/">W3 nu HTML checker</a>
</ul>
</article>
<script src="https://stats.ignore.pl/track.js"></script>
|
