<story><title>Next Gen Static Blogging</title><url>https://inoads.com/articles/2020-01-09-Next-Gen-Static-Blogging</url></story><parent_chain><item><author>susam</author><text>Note that closing &amp;lt;&amp;#x2F;p&amp;gt; tags are optional&lt;i&gt;†&lt;/i&gt;, so one can be an HTML purist and still write a decent HTML document with a relatively clean markup like this:&lt;p&gt;&lt;pre&gt;&lt;code&gt;    &amp;lt;!DOCTYPE html&amp;gt;
    &amp;lt;html lang=&amp;quot;en&amp;quot;&amp;gt;
    &amp;lt;title&amp;gt;Lorem Ipsum&amp;lt;&amp;#x2F;title&amp;gt;
    &amp;lt;h1&amp;gt;Lorem Ipsum&amp;lt;&amp;#x2F;h1&amp;gt;
    &amp;lt;p&amp;gt;
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Duis id maximus tortor. Sed nisi ante, fermentum vel nunc
    et, tincidunt sagittis magna. In ultrices commodo lacus, id
    tristique ipsum euismod laoreet.
    &amp;lt;p&amp;gt;
    Maecenas at neque posuere, aliquet erat at, vehicula est.
    Duis aliquet elit et arcu laoreet, id pulvinar eros pretium.
    Quisque consectetur, enim semper facilisis feugiat, velit
    sapien semper arcu, eu mollis libero est et odio.
    &amp;lt;p&amp;gt;
    Curabitur fringilla interdum ante vel ultricies. Mauris
    volutpat nisi sed turpis elementum elementum. Mauris nec
    eleifend lorem. Sed ac vulputate libero.
&lt;/code&gt;&lt;/pre&gt;
A valid HTML5 document does not require&lt;i&gt;†&lt;/i&gt; explicit &amp;lt;head&amp;gt;, &amp;lt;body&amp;gt;, or the closing &amp;lt;&amp;#x2F;p&amp;gt;, &amp;lt;&amp;#x2F;html&amp;gt; tags. See the spec for optional tags at &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;html.spec.whatwg.org&amp;#x2F;multipage&amp;#x2F;syntax.html#optional-tags&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;html.spec.whatwg.org&amp;#x2F;multipage&amp;#x2F;syntax.html#optional-...&lt;/a&gt; for more details. Similarly, the markup for lists and tables can be cleaned up too because the closing &amp;lt;&amp;#x2F;li&amp;gt;, &amp;lt;&amp;#x2F;tr&amp;gt;, &amp;lt;&amp;#x2F;th&amp;gt;, &amp;lt;&amp;#x2F;td&amp;gt; tags are optional&lt;i&gt;†&lt;/i&gt;.&lt;p&gt;Note that the opening &amp;lt;html&amp;gt; tag is optional&lt;i&gt;†&lt;/i&gt; too but I retained it in the above example to specify the lang attribute otherwise the W3 markup validator warns, &amp;quot;Consider adding a lang attribute to the html start tag to declare the language of this document.&amp;quot;&lt;p&gt;&lt;i&gt;† These tags are optional provided certain conditions are met. See the spec for full details. In practice, one rarely has to worry about these conditions.&lt;/i&gt;</text></item></parent_chain><comment><author>chrismorgan</author><text>And since we’re talking about optional things:&lt;p&gt;&lt;pre&gt;&lt;code&gt;  &amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;&amp;#x2F;style.css&amp;quot; &amp;#x2F;&amp;gt;
  &amp;lt;meta name=&amp;quot;viewport&amp;quot; content=&amp;quot;initial-scale = 1.0,maximum-scale = 1.0&amp;quot; &amp;#x2F;&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
Trailing slashes on HTML tags are useless. They’re &lt;i&gt;allowed&lt;/i&gt; on void elements, for XML compatibility, but are by definition simply ignored. I recommend against including them, because they’re simple visual noise, and misleading because they don’t actually close tags—you can only use them on on elements that are defined as having no children.&lt;p&gt;(Note that I say &lt;i&gt;HTML&lt;/i&gt; tags; on foreign elements—meaning inline SVG and MathML—trailing slashes &lt;i&gt;do&lt;/i&gt; make tags self-closing, XML-style.)&lt;p&gt;Also since I’m writing, that viewport declaration is wonky. It should have device-width, and it should not have maximum-scale which is user-unfriendly.&lt;p&gt;All up:&lt;p&gt;&lt;pre&gt;&lt;code&gt;  &amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;&amp;#x2F;style.css&amp;quot;&amp;gt;
  &amp;lt;meta name=&amp;quot;viewport&amp;quot; content=&amp;quot;device-width,initial-scale=1&amp;quot;&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
And for completeness, &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;html.spec.whatwg.org&amp;#x2F;multipage&amp;#x2F;syntax.html#elements-2&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;html.spec.whatwg.org&amp;#x2F;multipage&amp;#x2F;syntax.html#elements-...&lt;/a&gt; defines void and foreign elements.</text></comment>
<story><title>Next Gen Static Blogging</title><url>https://inoads.com/articles/2020-01-09-Next-Gen-Static-Blogging</url></story><parent_chain><item><author>susam</author><text>Note that closing &amp;lt;&amp;#x2F;p&amp;gt; tags are optional&lt;i&gt;†&lt;/i&gt;, so one can be an HTML purist and still write a decent HTML document with a relatively clean markup like this:&lt;p&gt;&lt;pre&gt;&lt;code&gt;    &amp;lt;!DOCTYPE html&amp;gt;
    &amp;lt;html lang=&amp;quot;en&amp;quot;&amp;gt;
    &amp;lt;title&amp;gt;Lorem Ipsum&amp;lt;&amp;#x2F;title&amp;gt;
    &amp;lt;h1&amp;gt;Lorem Ipsum&amp;lt;&amp;#x2F;h1&amp;gt;
    &amp;lt;p&amp;gt;
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Duis id maximus tortor. Sed nisi ante, fermentum vel nunc
    et, tincidunt sagittis magna. In ultrices commodo lacus, id
    tristique ipsum euismod laoreet.
    &amp;lt;p&amp;gt;
    Maecenas at neque posuere, aliquet erat at, vehicula est.
    Duis aliquet elit et arcu laoreet, id pulvinar eros pretium.
    Quisque consectetur, enim semper facilisis feugiat, velit
    sapien semper arcu, eu mollis libero est et odio.
    &amp;lt;p&amp;gt;
    Curabitur fringilla interdum ante vel ultricies. Mauris
    volutpat nisi sed turpis elementum elementum. Mauris nec
    eleifend lorem. Sed ac vulputate libero.
&lt;/code&gt;&lt;/pre&gt;
A valid HTML5 document does not require&lt;i&gt;†&lt;/i&gt; explicit &amp;lt;head&amp;gt;, &amp;lt;body&amp;gt;, or the closing &amp;lt;&amp;#x2F;p&amp;gt;, &amp;lt;&amp;#x2F;html&amp;gt; tags. See the spec for optional tags at &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;html.spec.whatwg.org&amp;#x2F;multipage&amp;#x2F;syntax.html#optional-tags&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;html.spec.whatwg.org&amp;#x2F;multipage&amp;#x2F;syntax.html#optional-...&lt;/a&gt; for more details. Similarly, the markup for lists and tables can be cleaned up too because the closing &amp;lt;&amp;#x2F;li&amp;gt;, &amp;lt;&amp;#x2F;tr&amp;gt;, &amp;lt;&amp;#x2F;th&amp;gt;, &amp;lt;&amp;#x2F;td&amp;gt; tags are optional&lt;i&gt;†&lt;/i&gt;.&lt;p&gt;Note that the opening &amp;lt;html&amp;gt; tag is optional&lt;i&gt;†&lt;/i&gt; too but I retained it in the above example to specify the lang attribute otherwise the W3 markup validator warns, &amp;quot;Consider adding a lang attribute to the html start tag to declare the language of this document.&amp;quot;&lt;p&gt;&lt;i&gt;† These tags are optional provided certain conditions are met. See the spec for full details. In practice, one rarely has to worry about these conditions.&lt;/i&gt;</text></item></parent_chain><comment><author>cwackerfuss</author><text>Frontend developer here --&lt;p&gt;Although you could omit the closing tags, I don&amp;#x27;t see the benefit of doing so. If you know HTML, nesting is fundamental and not explicitly closing dom nodes would lead to confusion. You would also need to concern yourself with the &amp;quot;certain conditions&amp;quot; that must be met for it to work. Consistency and clarity over brevity!</text></comment>