A place to cache linked articles (think custom and personal wayback machine)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.md 4.2KB

2 yıl önce
123456789101112131415161718192021222324252627282930313233343536373839
  1. title: (Why) Some HTML is "optional"
  2. url: https://remysharp.com/2019/09/12/why-some-html-is-optional
  3. hash_url: f761b745c18906fa98046badd51231c2
  4. <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>
  5. <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>
  6. <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">
  7. <div>
  8. <p><span class="label">READER DISCOUNT</span><strong>Save $50 on terminal.training</strong></p>
  9. <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>
  10. <p><strong><span class="like-link">$49 - only from this link</span></strong></p>
  11. </div></a>
  12. <h2>The easy answer</h2>
  13. <p>HTML has an amazing quality: it's super-dooper backwards compatible. It's why we have HTML5 and not XHTML2.</p>
  14. <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>
  15. <p>So if you ever find yourself asking <em>why</em>, the answer will nearly always lay in the past and original functionality.</p>
  16. <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>
  17. <h2>Performance and optimisation?</h2>
  18. <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>
  19. <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>
  20. <p>But, what exactly about this <code>&lt;p&gt;</code> tag?</p>
  21. <h2>Back to 1989</h2>
  22. <p>Pre-DOM, pre-browsers, the world's first browser was being written by Sir Tim Berners-Lee.</p>
  23. <p>There was no reference implementation and certainly no such thing as a parsing specification.</p>
  24. <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>
  25. <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>
  26. <p>In fact, Chris' earlier example of paragraph text should be reformatted to truly see how the paragraph was intended to be used:</p>
  27. <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>
  28. Paragraph one.
  29. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>P</span><span class="token punctuation">&gt;</span></span>
  30. Paragraph two.
  31. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>P</span><span class="token punctuation">&gt;</span></span>
  32. Paragraph three.
  33. </code></pre>
  34. <p>The paragraph tag (yes, in upper case) was intended to <em>separate</em> paragraphs, not wrap them.</p>
  35. <p>Which is why you don't need a closing tag, to support this original use and support existing documents around the web.</p>
  36. <p>Here's a photo I took of Kimberly's screen showing the source:</p>
  37. <p><img src="/images/p-tag.jpg" alt="paragraph formatting"></p>
  38. <p>Pretty geeky, and for some reason, I love these historical details.</p>