A place to cache linked articles (think custom and personal wayback machine)
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

index.md 4.2KB

il y a 2 ans
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>