From ad76e9b885c9b9692074cf5b8b880cb79f8a48e0 Mon Sep 17 00:00:00 2001 From: Aki Date: Sun, 25 Jul 2021 19:17:40 +0200 Subject: Initialized website as git repository --- how_to_write_a_minimal_html5_document.html | 142 +++++++++++++++++++++++++++++ 1 file changed, 142 insertions(+) create mode 100644 how_to_write_a_minimal_html5_document.html (limited to 'how_to_write_a_minimal_html5_document.html') diff --git a/how_to_write_a_minimal_html5_document.html b/how_to_write_a_minimal_html5_document.html new file mode 100644 index 0000000..6a70c3b --- /dev/null +++ b/how_to_write_a_minimal_html5_document.html @@ -0,0 +1,142 @@ + + + + + + + + + +How To Write a Minimal HTML5 Document + + + +
+

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: +

+
+ -- cgit v1.1