diff options
| author | Aki <please@ignore.pl> | 2021-07-25 19:17:40 +0200 |
|---|---|---|
| committer | Aki <please@ignore.pl> | 2021-07-25 19:17:40 +0200 |
| commit | ad76e9b885c9b9692074cf5b8b880cb79f8a48e0 (patch) | |
| tree | 603ebe1a1dbcd9251c84c1c954b7b4dc5b986cc3 /how_to_write_a_minimal_html5_document.html | |
| download | ignore.pl-ad76e9b885c9b9692074cf5b8b880cb79f8a48e0.zip ignore.pl-ad76e9b885c9b9692074cf5b8b880cb79f8a48e0.tar.gz ignore.pl-ad76e9b885c9b9692074cf5b8b880cb79f8a48e0.tar.bz2 | |
Initialized website as git repository
Diffstat (limited to 'how_to_write_a_minimal_html5_document.html')
| -rw-r--r-- | how_to_write_a_minimal_html5_document.html | 142 |
1 files changed, 142 insertions, 0 deletions
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 @@ +<!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> |