davidbgk
/
larlet-fr-david-cache

title: (Why) Some HTML is "optional"
url: https://remysharp.com/2019/09/12/why-some-html-is-optional
hash_url: f761b745c18906fa98046badd51231c2

<p>Chris Coyier <a href="https://css-tricks.com/some-html-is-optional/">blogged recently on <em>weird looking HTML</em></a>. It's a nice short post and I'd say it's worth knowing these optional features (potentially known as defaults). My favourite optional is <code>&lt;script&gt;</code> and not having to include the <code>type</code> attribute.</p>
<p>But Chris' first example is the most common, the optional closing <code>&lt;/p&gt;</code> tag. What (I think) is an interesting question is: <em>why?</em></p>
<a class="cta" rel="nofollow" href="https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG&amp;utm_source=blog&amp;utm_medium=banner&amp;utm_campaign=remysharp-discount"><img src="/images/terminal-600.jpg">
  <div>
    <p><span class="label">READER DISCOUNT</span><strong>Save $50 on terminal.training</strong></p>
    <p class="desc">I've published 38 videos for new developers, designers, UX, UI, product owners and anyone who needs to conquer the command line today.</p>
    <p><strong><span class="like-link">$49 - only from this link</span></strong></p>
  </div></a>
<h2>The easy answer</h2>
<p>HTML has an amazing quality: it's super-dooper backwards compatible. It's why we have HTML5 and not XHTML2.</p>
<p>This backward compatibility means that devices and browsers reaching all the way back to the very first browser are still able to render HTML (just about - the <em>first</em> makes a bit of mess of unknown elements but that's more of an exception).</p>
<p>So if you ever find yourself asking <em>why</em>, the answer will nearly always lay in the past and original functionality.</p>
<p>This same reasoning also explains why you'll never find a newly introduced element to go inside the <code>&lt;head&gt;</code> element - but I'll leave that for <span title="Remy hereby challenges Jeremy Keith">someone else</span> to blog about…</p>
<h2>Performance and optimisation?</h2>
<p>Without looking at modern day browsers' HTML parsing algorithms, I'm guessing the perf cost is incredibly minute. So minute that it makes no difference that we mortal users could experience.</p>
<p>Compression is really a moot point too, it's a micro optimisation that <em>may</em> save a byte or two, but because of how repeating sequences are compressed, a closing <code>&lt;/p&gt;</code> won't have an impact.</p>
<p>But, what exactly about this <code>&lt;p&gt;</code> tag?</p>
<h2>Back to 1989</h2>
<p>Pre-DOM, pre-browsers, the world's first browser was being written by Sir Tim Berners-Lee.</p>
<p>There was no reference implementation and certainly no such thing as a parsing specification.</p>
<p>The first browser, the <a href="https://worldwideweb.cern.ch">WorldWideWeb.app</a>, parsed HTML character by character applying styles as it went along. As opposed to today's methods whereby a document object model is built up, then rendered.</p>
<p>I happened to be lucky enough to be sat next to <a href="https://www.kimberlyblessing.com/">Kimberly Blessing</a> when they unearthed the parsing algorithm for the <code>&lt;p&gt;</code> tag.</p>
<p>In fact, Chris' earlier example of paragraph text should be reformatted to truly see how the paragraph was intended to be used:</p>
<pre><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>P</span><span class="token punctuation">&gt;</span></span>
Paragraph one.
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>P</span><span class="token punctuation">&gt;</span></span>
Paragraph two.
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>P</span><span class="token punctuation">&gt;</span></span>
Paragraph three.
</code></pre>
<p>The paragraph tag (yes, in upper case) was intended to <em>separate</em> paragraphs, not wrap them.</p>
<p>Which is why you don't need a closing tag, to support this original use and support existing documents around the web.</p>
<p>Here's a photo I took of Kimberly's screen showing the source:</p>
<p><img src="/images/p-tag.jpg" alt="paragraph formatting"></p>
<p>Pretty geeky, and for some reason, I love these historical details.</p>