The lang attribute: browsers telling lies, telling sweet little lies

What issues built-in translation tools might cause.

My current HTML boilerplate

A modern basic structure of a HTML document with explanations.

The button cheat sheet

The right (and wrong) markup for your web buttons at a glance.

Creating custom Emmet snippets in VS Code

Automate repetitive tasks and improve your front-end workflow.

Comments first

Why not writing code and comments in reverse order?

Element diversity

Why we overuse the div element and neglect the other 111 HTML elements.

HTMHell special: tasty buttons

A collection of 18 different bad practices found on real websites.

Debugging HTML: Accessibility

How to debug accessibility features of HTML elements with DevTools.

Debugging HTML: Linting

Edge DevTools can highlight potential issues in your HTML.

HTMHell Advent Calendar 2021

An article, talk, or tool that focuses on HTML behind each door.

Please, stop disabling zoom

What looks like a trend has negative consequences for some users.

“It brings me joy when I remove the CSS on a site during an audit, and the page still looks great because it’s well structured.”

Parents counting children in CSS

We can use :has() to determine how many children a parent element has.

“We’re wrongfully downplaying the complexity of HTML due to the simplicity of its syntax.”

Buttons and the Baader–Meinhof phenomenon

Correct and wrong ways of labelling buttons.

HTMHell Advent Calendar 2022

24 articles from 24 authors in 24 days.

CSS Cascade Layers are useless*

*if you don’t understand the problems they solve.

The article element and screen readers

How common screen readers expose the HTML ‘article’ element.

CSS visually hidden links with 0 dimensions

Why you want to keep the 1px height/width in visually-hidden classes.

Pros and cons of using Shadow DOM and style encapsulation

How useful is the Shadow DOM for web components?

“The day I don’t find a div/span/img/strong/td/…-‘button’ during an accessibility audit is the day I retire.”

Web Components accessibility FAQ

A catalog of the most important questions and answers.

Totally remdom

How desktop and mobile browsers zoom rem/px-based text.

Removing CSS list styles without affecting semantic

A new way to deal with a special list behavior of Safari.

The CSS ‘scripting’ media feature

Detect whether scripting languages, such as JavaScript, are supported.

HTMHell Advent Calendar 2023

24 articles in 24 days, mainly on front-end development.

Container Style Queries

“They could significantly change the way we write CSS.”

Not all automated testing tools support Shadow DOM

One more reason not to rely on automated testing only.

HTMHell Advent Calendar 2024

24 articles in 24 days, mainly on front-end development.

Progress-indicating scroll-to-top button

A fancy two-in-one UI component in HTML/CSS.

Is the button focusable?

Guess which hidden button can still receive keyboard focus.

Custom properties in shorthand properties

Why you need to be cautious with this approach.

UA+

A different type of CSS reset style sheet.

Never lose a z-index battle again

How to set the highest possible z-index in CSS.

CSS Boilerplate

A default CSS structure for projects of any size.