Articles and resources in the HTML category. A full list of categories is also available.
A few weeks ago I read an article on CSS-Tricks about writing HTML the HTML way, not the XHTML way, and it has been bothering me a bit.
Boolean attributes in HTML are quirky, and it’s worth knowing how they work in case you end up setting one value and getting the opposite!
macOS 12.3 and iOS 15.4 landed yesterday, and with them came Safari 15.4 and some exciting new features. Here are the five that stood out to me.
I like to use invalid HTML and ARIA as a design constraint; a line I can’t step across. Sounds obvious, but in practice it’s not always that simple!
Links without an
You’d think that adding a back link to a web page would be straightforward. Well, it turn out that it’s not! Let’s have a look at three ways to do it.
A bug with link text colours in Safari’s HTML-only Dark Mode theme means we need a bit of extra code. Here’s how to patch things until it’s fixed.
When our CSS contains Dark Mode rules and the file fails to load, we’re left with plain old HTML. Luckily we can request Dark Mode in our markup!
Tables can be tricky to make work responsively; they can also be tricky to make accessible. Here’s a step by step guide to making your tables both!
Struck-through text isn’t read by screen readers. This is true of all text-level semantics, but it’s worth drawing attention to strikethough.
<b>, the distinction between
<del>is subtle, but it’s worth knowing.
So what on earth is a
<section>element actually for? The answer isn’t as obvious as you might have hoped, but it’s definitely straightforward.
Break tags are often misused. I’ll demo some markup patterns to avoid them, and reveal the one and only legitimate use case I can think of.
There’s a bug in Safari that adds an implicit role to
<address>which causes problems for screen readers. The good news is, a fix is very close!
The horizontal rule is pretty widely misunderstood and often abused. It’s not an HTML element I reach for very much, but it’s worth writing about.
What happens when starting an ordered list at 1 doesn’t make sense? HTML has an attribute that lets you start your count at any number!
When the order of a list matters, you might find yourself in a situation where you need to reverse the order. Fortunately, you can do that with HTML.
Some elements don’t look like the others; those are self-closing elements, which are just an opening tag with no content and no closing tag.
An HTML attribute lives on the opening tag of an element and gives that element powers it might not otherwise have had.
Adding dimensions to images in HTML is useful again! They’re a progressive enhancement to calculate the image’s aspect ratio and prevent jank.