<datalist> can be combined with more than raw text inputs!

About microdata:

Labelling things properly is still a powerful act, especially when it involves repetition and relationship-building.

What the post is missing is: how building these connections are useful? Ok it's great for AI models that are parsing the site...

Getting started with Microdata

The specification of microdata

A rating UI pattern with smileys: only built with HTML and css.

Useful for stat callouts, word definitions, product listing technical specs

• They are memorable
• They can be typed or said
• They looks nicer. They're aesthetic. They show care.
• They remove the middle-man: only the URL can be used!
• They are enough: using 36 characters with 4 character URLs give 1.679.616 unique combinations

Here’s how I do it: Save my HTML file as the URL name, with no extension. Instead of “hi.html”, I save it as “hi” in my public web root.

Then, assuming the Nginx web server, add this line to my http block: default_type text/html;

Enhancing an HTML page with microdata. These microdata can be used as CSS selectors.

How it helps the users

• search engine could show the microdata Introduction to structured data markup in Google Search
• can help AI...
• microdata conveys information in HTML: “HTML is still the most accessible format for almost every type of content”, the National Center on Disability and Access to Education’s Principles of Accessible Design in 2007

Whenever you want to add interactive elements inside your information bubble, it's not called tooltip, but toggletip.

Firstly, before we get started, it is always better to display clear, permanently visible information. So, if space permits, do not use tooltips.

There is a 
<button type="button" aria-describedby="toggletip" popovertarget="toggletip">
  secret
</button>
to accessible HTML!

<div popover id="toggletip">
  <div>a div is not a button ✨</div>
</div>

Another metadata tag parser tailored by Rob Knight.

It adds icon and colors definition.

A great TLDR

On single-purpose pages containing forms.

Such as login, signup, password reset or 2FA pages.

There are some cases to avoid such as a login form with the use of social logins (Google, GitHub, and the like) and you don't know which one they'll use don't add an autofocus.

There are many approaches.
One solution is to set the color-schema CSS property color-scheme: light dark; then use the light-dark function.

But did you know that you can also set the media attribute to conditionally load and apply CSS based on user preferences? Such as media="(prefers-color-scheme: light)"

This media attribute can also be set in JS too, in order to load the proper stylesheet.

Instead of an isOpen class, why not using aria-expanded="true" (except for <details)?

Why and caveats of aria-labelledby a tag in the node content.

There are good reasons to point aria-labelledby within an element. For example, to give an accessible name to a region based off of the heading within it.

A progressive enhancement with view-transition

<meta http-equiv="refresh" content="1"> for simple web pages.

The Nu HTML validator is recommended. There is also the html-validate for partial validation

• Select all non-summary children of a <dialog> with ::details-content
• appearance: base-select for <select> to customize it
• <dialog> can be closed with method="dialog" on a form.
• Popover is here too
• input type="checkbox" can now have a switch attribute. See the smashing magazine. It has very limited support currently.
• A <search> tag is available for 90% of the users

The author describes 3 states for search option buttons:

1. Disregarded in search results
2. must include it
3. must exclude it

There is three input radio buttons to implement the state.