HTML

Collections

Explain the First 10 Lines of Twitter’s Source Code to Me
Tip - Use fetchpriority=high to load your LCP hero image sooner
So <HGROUP> Is Back In HTML 5, And Dumb As Ever!
Responsive Images 101, Part 4: Srcset Width Descriptors
- width of the image sources
Building the main navigation for a website
Table Like It's 2023
Two ways to safely break a long word in HTML
- <wbr>
- 
- CSS hyphens
Three attributes for better web forms
- inputmode, enterkeyhint, and autocomplete.
Jumping HTML tags. Another reason to validate your markup
HTMHell - A collection of bad practices in HTML, copied from real websites.
Modern HTML email (tables no longer required)
Can I Email
Be Careful Using ‘Menu’
Stop Using ‘Pop-up’
Effortlessly Support Next Gen Image Formats
- use the picture element
SSMPL : A Wishful Thinking HTML Replacement Proposal
A Blog Post With Every HTML Element
- <base>
PSA: Add dir="auto" to your inputs and textareas.
Build a Better Mobile Input
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#%3Cinput%3E_types
- https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode
- https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

<iframe
  credentialless
  allowfullscreen
  referrerpolicy="no-referrer"
  sandbox="allow-scripts allow-same-origin"
  allow="accelerometer 'none'; ambient-light-sensor 'none'; autoplay 'none'; battery 'none'; browsing-topics 'none'; camera 'none'; display-capture 'none'; domain-agent 'none'; document-domain 'none'; encrypted-media 'none'; execution-while-not-rendered 'none'; execution-while-out-of-viewport ''; gamepad 'none'; geolocation 'none'; gyroscope 'none'; hid 'none'; identity-credentials-get 'none'; idle-detection 'none'; local-fonts 'none'; magnetometer 'none'; microphone 'none'; midi 'none'; otp-credentials 'none'; payment 'none'; picture-in-picture 'none'; publickey-credentials-create 'none'; publickey-credentials-get 'none'; screen-wake-lock 'none'; serial 'none'; speaker-selection 'none'; usb 'none'; window-management 'none'; xr-spatial-tracking 'none'"
  ,
  csp="sandbox allow-scripts allow-same-origin;"
  width="560"
  height="315"
  src="https://www.youtube-nocookie.com/embed/jfKfPfyJRdk"
  title="lofi hip hop radio 📚 - beats to relax/study to"
  frameborder="0"
  loading="lazy"
></iframe>

State of HTML 2023
EntityCode
I’ve Been Doing Blockquotes Wrong
Clarifying the Relationship Between Popovers and Dialogs
- Popover is an umbrella term for any kind of on-demand popup.
- Dialog is one type of popover — a kind that creates a new window (or card) to contain some content.
  - Modal: A dialog with an overlay and focus trapping
  - Non-Modal: A dialog with neither an overlay nor focus trapping
  - Alert Dialog: A dialog that alerts screen readers when shown. It can be either modal or non-modal.

Amazing HTML5 Features That Just 3% of Developers Knows

datalist
<input type="file" accept=".png, .jpg">
details
meter
progress

Working with forms with vanilla JavaScript

... Form fields must have a name attribute to be included in the object. Otherwise, they’re skipped. The id property doesn’t count.

Those HTML Attributes You Never Use

The enterkeyhint Attribute For Virtual Keyboards
The title Attribute On Stylesheets
The cite Attribute For The <blockquote> And <q> Elements
Attributes For Custom Ordered Lists
- reversed, start, type, value
The download Attribute For The <a> Element
The decoding Attribute For The <img> Element
The loading Attribute For The <iframe> Element
The form Attribute For Form Fields
The cite And datetime Attributes For Deletions/Insertions
The label Attribute For The <optgroup> Element
The imagesizes And imagesrcset Attributes For Preloading Responsive Images
The crossorigin attribute which can apply to multiple elements, including <audio>, <img>, <link>, <script>, and <video>, providing support for cross-origin resource sharing (CORS);
The title attribute for <dfn> and <abbr>;
The new disablepictureinpicture attribute for the <video> element;
The integrity attribute for scripts, which helps the browser verify that the resource hasn’t been improperly manipulated;
The disabled attribute for the <fieldset> element, to easily disable multiple form elements simultaneously;
The multiple attribute for email and file inputs.

template

https://news.ycombinator.com/item?id=33089975

<template> is special, very different from display: none; and definitely has a few advantages:

The elements in it are parsed into a different document and are inert until cloned or adopted into the main document. Images don't load, scripts don't run, styles don't apply, etc. This is very important.
The content model validation is turned off, so a <template> can contain a <td>
Mutation observers and events are not fired for parsed content.
The <template> element itself can appear anywhere, including restricted content elements like <table>
Other HTML processing libraries generally know to ignore <template>, unlike other content just hidden with CSS.

This makes parsing faster and guaranteed to have no side effects, and conveys the correct semantics to the browser and tools.

Semantics

In addition - “template” also conveys correct semantics to the other developers working on the codebase. If I see an html at the bottom with “display: none” it’s very possible that the intended usage is to leave it there and set “display: block”, ie a modal. “display: none” doesn’t convey “clone me”, but “template” does.

Forms

Forms 101: More tags useful in forms - <fieldset>, <legend>

Inputs

How to Use Responsive HTML Video (...and Audio!)

<video>
  <source media="(min-width: 2000px)" src="large.webm" type="video/webm" />
  <source media="(min-width: 2000px)" src="large.mp4" type="video/mp4" />
  <source media="(min-width: 1000px)" src="medium.webm" type="video/webm" />
  <source media="(min-width: 1000px)" src="medium.mp4" type="video/mp4" />
  <source src="small.webm" type="video/webm" />
  <source src="small.mp4" type="video/mp4" />
</video>

Children