diff options
| author | Aki <please@ignore.pl> | 2023-03-27 22:52:10 +0200 |
|---|---|---|
| committer | Aki <please@ignore.pl> | 2023-03-27 22:52:43 +0200 |
| commit | 3396757baa0ccb402fe895996fd09876181dd5ab (patch) | |
| tree | c53e0d0ca1939a389afa082464b38860fe6d59a8 /how_to_write_a_minimal_html5_document.html | |
| parent | 5942e371b38fd8ef50d1960eff76f48122eced58 (diff) | |
| download | ignore.pl-3396757baa0ccb402fe895996fd09876181dd5ab.zip ignore.pl-3396757baa0ccb402fe895996fd09876181dd5ab.tar.gz ignore.pl-3396757baa0ccb402fe895996fd09876181dd5ab.tar.bz2 | |
Renamed HTML5 "tutorial"
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, 0 insertions, 142 deletions
diff --git a/how_to_write_a_minimal_html5_document.html b/how_to_write_a_minimal_html5_document.html deleted file mode 100644 index 9db74be..0000000 --- a/how_to_write_a_minimal_html5_document.html +++ /dev/null @@ -1,142 +0,0 @@ -<!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="favicon.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> |