Your daily frequent11y newsletter, brought to you by @ChrisBAshton:

Divs are bad!

An article by Manuel Matuzović, which he openly admits is a clickbait title! Manuel concedes that the <div> is useful for additional elements for styling, for structuring content when no other suitable element exists, and for when you need custom landmarks. He then lists the issues with using <div> incorrectly.

Using a <div> inside a <details> element, for example, can break how the element is supposed to render in browsers, and might cause screen readers to not recognise the <summary> element properly:

<details>
  <div>
    <summary>Show info</summary>
    Hi, I'm the info!
  </div>
</details>

Manuel works through plenty of other common examples (such as <ul><li> markup) which should not have a <div> nested in between the elements. It’s quicker to say where it can be used, and that’s in definition lists. The following example is fine:

<dl>
  <div>
    <dt>Key:</dt>
    <dd>Value</dd>
  </div>
  <div>
    <dt>Key:</dt>
    <dd>Value</dd>
  </div>
</dl>

Manuel recommends installing Deque’s HTML validator bookmarklet to validate your web pages. It works on both server-rendered and client-rendered pages.

Prefer longer newsletters? You can subscribe to week11y, fortnight11y or even month11y updates! Every newsletter gets the same content; it is your choice to have short, regular emails or longer, less frequent ones. Curated with ♥ by developer @ChrisBAshton.