228 private links
Similar to previous shaares I stored
- . If you look at 99% of all websites in the wild, everybody who worked on them seems to be allergic to semantics and shit. Headings are random levels, loosely based on font-size, Form Fields have no labels, links and buttons are divs.
- The whole industry doesn't understand semantics and shit.
So when I teach about HTML I always start with the elements that are obviously interactive. I show them the multitude of UX layers of a link.
s and layers of UX that are added to a well considered form. I show them what happens on a phone when you use an input with a default text type instead of the proper type of email.
See the example between a span with an onclick-event and a proper link: the proper link opens a specialised context menu on right-click.
Why "Semantic HTML" fails? There’s no clear UX feature to point at.
First we need to get people exited about HTML by showing all the free yet complex layers of UX you get when you use the interactive elements properly.
You need a good idea of what UX is before you can understand things like the option to nagivate through the headings on the page with a screen reader.
I didn't know the radio button has an "indeterminate state" :o
I am curious about HTML form validation with HTML and clever CSS.
In other words, talks about what HTML does, and much less about what it means in theory. Let’s talk about user experience, and let’s stop talking about semantics and shit.
Validating helps technical understanding as it contributes to awareness of the underlying specifications, and writing valid code is a sign of professionalism
HTML is complex:
- 111 elements
- Developers don't know the difference between HTML tags and elements (so this one begs the question how well developers understand HTML if they’re not sure about the difference between elements and tags)
- To reduce HTML payload is not to write HTML that can be left out without a document turning invalid.
Jens Oliver Meiert is writing a book about it.
Starting with raw HTML, then provides more features with JS
From scratch
The author provides a list of hosting too: https://web.pixelshannon.com/make/#:~:text=where%20can%20i%20publish%20my%20website%20for%20free%3F
A modern marquee
element
The type=number state is not appropriate for input that happens to only consist of numbers but isn't strictly speaking a number. For example, it would be inappropriate for credit card numbers or US postal codes. A simple way of determining whether to use type=number is to consider whether it would make sense for the input control to have a spinbox interface (e.g. with "up" and "down" arrows). Getting a credit card number wrong by 1 in the last digit isn't a minor mistake, it's as wrong as getting every digit incorrect. So it would not make sense for the user to select a credit card number using "up" and "down" buttons. When a spinbox interface is not appropriate, type=text is probably the right choice (possibly with an inputmode or pattern attribute).
inputmode="decimal"
or inputmode="number"
fit better for these cases.
New HTML features of 2025
I agree
An accessibility decision tree for the alt
attribute
Video elements can be responsive now. Here's how.
Sometimes ARIA is needed to convey informations such as a link pointing to the current page.
The example for form error is great too !
Everything needed to build a proper pagination in HTML
Use the translate="no"
on a tag (often a span) to avoid translations on specific words such as brands.
<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