HTML

How to author blockquotes

By default, do this:

<blockquote>
  <p>
    A common mistake that people make when trying to design something completely foolproof is to
    underestimate the ingenuity of complete fools.
  </p>
  <footer>
    &mdash;
    <cite
      >Douglas Adams,
      <a href="https://en.wikipedia.org/wiki/Mostly_Harmless">Mostly Harmless</a></cite
    >
  </footer>
</blockquote>

Credit: https://adrianroselli.com/2023/07/blockquotes-in-screen-readers.html

The section element

Credit: https://www.tempertemper.net/blog/when-and-how-to-use-the-section-element

Sighted users can see distinct areas of interest on the page. Oftentimes those areas have semantic HTML elements (e.g. header, nav, aside, main, article). But sometimes there are clear sectioned off parts of your site without a corresponding semantic element (this is probably more common in "app"-like sites).

To designate those sections for non-sighted users, use the section element.

Make sure it has a label. Ideally, there's a header or other element inside the section that can serve as the label via aria-labelledby. Otherwise an aria-label is fine.

Using images

Credit: https://www.joshwcomeau.com/performance/embracing-modern-image-formats/

Use webp formats. Google provides a tool cwebp for making them. Provide JPEG as fallbacks.

Use the picture element to provide different sources, allowing the browser to decide what to use.

<picture>
  <source srcset="/images/cereal-box.webp" type="image/webp" />
  <img src="/images/cereal-box.jpeg" type="image/jpeg" />
</picture>

Responsive images

There are different situations to which we want to adapt the actual image file we send to the browser.

• Pixel density: devices with a higher device pixel ratio should get higher-resolution images.
• Fluid layouts: the image should respond to the space it has on the page.
• Image formats: provide the smallest image format supported by the browser.

To handle pixel density, we can use a pixel density descriptor in the srcset of a picture or img element.

<img srcset="small.jpg 1x, large.jpg 2x" src="small.jpg" alt="..." />

To handle fluid layouts, we can replace the pixel density descriptor with a width descriptor. It should indicate the width, in pixels, of the image. If you have these images…

• large.jpg (1024 × 768 pixels)
• medium.jpg (640 × 480 pixels)
• small.jpg (320 × 240 pixels)

…then the srcset can use width descriptors for each of the image widths.

The sizes attribute indicates what the size of the image element will be. It can be given as a comma-separated list of media queries + CSS length. This is especially useful with width descriptors in srcset because then the browser has enough information to know which image to use. In this example, the image is rendered in two layout situations:

• full window width below 36rem
• 1/3 window width above 36rem in a grid of images 3 columns wide

<img
  srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"
  sizes="(min-width: 36rem) 33.3vw, 100vw"
  src="small.jpg"
  alt="..."
/>

The browser takes into account the device pixel ratio when calculating the image to use, so this covers that use case as well.

If you want to define a different srcset based on different media queries, then you can use the picture element along with multiple source elements. This is useful if you want to provide a cropped image in really small viewports, for example.

<picture>
  <source
    media="(min-width: 36em)"
    srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"
    sizes="33.3vw"
  />
  <source srcset="cropped-lg.jpg 2x, cropped-sm.jpg 1x" />
  <img src="small.jpg" alt="..." />
</picture>

We can also use the source element to switch file types.

<picture>
  <source type="image/webp" srcset="file.webp" />
  <source type="image/jp2" srcset="file.jp2" />
  <img type="image/vnd.ms-photo" src="file.jxr" alt="..." />
</picture>

To find the best strategy for all situations on all browsers, consider the following charts from Can I Use:

• https://caniuse.com/picture
• https://caniuse.com/srcset
• https://caniuse.com/webp

See also:

• https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/
• https://www.joshwcomeau.com/performance/embracing-modern-image-formats/
• https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset
• https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes
• https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
• https://developer.mozilla.org/en-US/docs/Web/API/HTMLSourceElement

A good way to do notifications

<aside aria-label="Notifications">
  <div role="status">
    <ul>
      <li class="notification">Someone has logged into your account.</li>
      <li class="notification">Oh right, that was you.</li>
    </ul>
  </div>
</aside>

Credit to Heydon: https://heydonworks.com/article/the-aside-element/

Sub-titles and sub-headings

Credit: https://www.tpgi.com/subheadings-subtitles-alternative-titles-and-taglines-in-html/

Use the hgroup element. The actual title goes in an h1-h6, other related text goes into <p> tags.

<hgroup>
  <h1>The title</h1>
  <p>A sub-title</p>
  <p>Published at some point in time</p>
</hgroup>