Full Width [alt+shift+f] Shortcuts [alt+shift+k]
Sign Up [alt+shift+s] Log In [alt+shift+l]
Articles [alt+h] Reading List [alt+r] [alt+s]

HTMHell

Visit Blog

Sort By

Popular [alt+1] Recent [alt+2]

Change View

List View [alt+w] Expanded [alt+e]
HTMHell
datalists are more powerful than you think by Alexis Degryse I think we all know the <datalist> element (and if you don’t, it’s ok). It holds a...
a month ago
47

datalists are more powerful than you think

from HTMHell [alt+shift+b] in programming

a month ago
by Alexis Degryse I think we all know the <datalist> element (and if you don’t, it’s ok). It holds a list of <option> elements, offering suggested choices for its associated input field. It’s not an alternative for the <select> element. A field associated to a <datalist> can...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
Boost website speed with prefetching and the Speculation Rules API by Schepp Everybody loves fast websites, and everyone despises slow ones even more. Site speed...
a month ago
51

Boost website speed with prefetching and the Speculation Rules API

from HTMHell [alt+shift+b] in programming

a month ago
by Schepp Everybody loves fast websites, and everyone despises slow ones even more. Site speed significantly contributes to the overall user experience (UX), determining whether it feels positive or negative. To ensure the fastest possible page load times, it’s crucial to design...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
Misleading Icons: Icon-Only-Buttons and Their Impact on Screen Readers by Alexander Muzenhardt Introduction Imagine you’re tasked with building a cool new feature for a...
a month ago
40

Misleading Icons: Icon-Only-Buttons and Their Impact on Screen Readers

from HTMHell [alt+shift+b] in programming

a month ago
by Alexander Muzenhardt Introduction Imagine you’re tasked with building a cool new feature for a product. You dive into the work with full energy, and just before the deadline, you manage to finish it. Everyone loves your work, and the feature is set to go live the next...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
The underrated &lt;dl&gt; element by David Luhr The Description List (<dl>) element is useful for many common visual design patterns,...
a month ago
43

The underrated &lt;dl&gt; element

from HTMHell [alt+shift+b] in programming

a month ago
by David Luhr The Description List (<dl>) element is useful for many common visual design patterns, but is unfortunately underutilized. It was originally intended to group terms with their definitions, but it's also a great fit for other content that has a key/value structure,...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
Preloading fonts for web performance with link rel=”preload” by Alistair Shepherd Web performance is incredibly important. If you were here for the advent...
a month ago
36

Preloading fonts for web performance with link rel=”preload”

from HTMHell [alt+shift+b] in programming

a month ago
by Alistair Shepherd Web performance is incredibly important. If you were here for the advent calendar last year you may have already read many of my thoughts on the subject. If not, read Getting started with Web Performance when you’re done here! This year I’m back for more web...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
The search input: They almost got it right by Steve Frenzel This example is a classic - in a bad way - and can cause quite some confusion for...
2 months ago
41

The search input: They almost got it right

from HTMHell [alt+shift+b] in programming

2 months ago
by Steve Frenzel This example is a classic - in a bad way - and can cause quite some confusion for users of assistive technology (AT). But it's also very easy to fix! It's the <input> element missing its dear friend, the <label>... 😭 Bad code <input placeholder="Search" /> It's...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
The devil is in the &lt;details&gt; by J. Pedro Ribeiro Not too long ago, building an accordion component would require you to use a...
2 months ago
39

The devil is in the &lt;details&gt;

from HTMHell [alt+shift+b] in programming

2 months ago
by J. Pedro Ribeiro Not too long ago, building an accordion component would require you to use a combination of JavaScript and CSS. If you've been around for as long as I have, you might have used a library like jQuery or Mootools. "vanilla", your code would look something like...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
PSA: Stop using the title attribute as tooltip! by Daniela Kubesch It's almost 2025, so it's time to stop using the title attribute everywhere....
2 months ago
41

PSA: Stop using the title attribute as tooltip!

from HTMHell [alt+shift+b] in programming

2 months ago
by Daniela Kubesch It's almost 2025, so it's time to stop using the title attribute everywhere. Images, text, buttons, ... you name it, devs really like to put it on any element in sight. Most of the time, people actually want to create a tooltip. You know, that little bubble of...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
Grouping form fields by Matthias Kittsteiner When I first stumbled upon fieldset and legend, I didn’t know much about...
2 months ago
38

Grouping form fields

from HTMHell [alt+shift+b] in programming

2 months ago
by Matthias Kittsteiner When I first stumbled upon fieldset and legend, I didn’t know much about HTML and especially not about accessibility. Everything I noticed was the special way a legend is displayed inside a fieldset – or rather: alongside the border of a fieldset. Fast...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
My favourite colour is Chuck Norris red by Declan Chidlow Setting the colour of text on a webpage is usually a simple affair involving...
2 months ago
42

My favourite colour is Chuck Norris red

from HTMHell [alt+shift+b] in programming

2 months ago
by Declan Chidlow Setting the colour of text on a webpage is usually a simple affair involving whipping it out the good ol' CSS color property. But this is HTMHell, dammit. None of that wishy-washy CSS nonsense here. No siree. We use HTML as the good lord intended and shalln't...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
Getting Oriented with HTML Video by Scott Jehl A couple years back, I was in a window seat on a flight from Amsterdam to New York....
2 months ago
46

Getting Oriented with HTML Video

from HTMHell [alt+shift+b] in programming

2 months ago
by Scott Jehl A couple years back, I was in a window seat on a flight from Amsterdam to New York. The weather was gray and drizzly as the plane took off, but as it punched through the clouds a very different scene revealed itself. Out my window, it looked like a Maxfield Parrish...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
Microdata for books by Alan Dalton Dive into marking up books Books are the best Christmas presents, especially for us...
2 months ago
44

Microdata for books

from HTMHell [alt+shift+b] in programming

2 months ago
by Alan Dalton Dive into marking up books Books are the best Christmas presents, especially for us web geeks. (I hope you’ll find a Web Accessibility Cookbook in your Christmas stocking, gentle reader.) Unfortunately, A Book Apart closed this year. Fortunately, the authors...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
An HTML structure for a tab component by Marco Bretschneider Can you remember the day you first learnt about ARIA? Maybe the first fact...
2 months ago
58

An HTML structure for a tab component

from HTMHell [alt+shift+b] in programming

2 months ago
by Marco Bretschneider Can you remember the day you first learnt about ARIA? Maybe the first fact you learnt about ARIA was the first rule “Don't use ARIA, use native HTML instead“ - and so did I. As someone who has been able to speak native HTML for many years, I always thought...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
You don’t need the isOpen class by Maureen Holland Don’t get me wrong. You can keep it if you like it. But you don’t need it. A...
2 months ago
36

You don’t need the isOpen class

from HTMHell [alt+shift+b] in programming

2 months ago
by Maureen Holland Don’t get me wrong. You can keep it if you like it. But you don’t need it. A class selector can allow us to visually show or hide content for disclosure widgets, like a custom select component or dropdown navigation menu. But a disclosure widget is made of two...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
The Gift You Do NOT Want: A Div in a Button's Clothing by Corina Murg With the right CSS makeup and a click event, almost anything can pretend to be a...
2 months ago
53

The Gift You Do NOT Want: A Div in a Button's Clothing

from HTMHell [alt+shift+b] in programming

2 months ago
by Corina Murg With the right CSS makeup and a click event, almost anything can pretend to be a button. In accessibility work, we spot these fakes and fix them, but teaching others why and how to do it is just as important. It’s not just about correcting a single mistake; it’s...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
Page by Page: How Pagination Makes the Web Accessible by Kristin Rohleder Imagine you’re reading a book that seems perfect for cozy winter evenings. But...
2 months ago
48

Page by Page: How Pagination Makes the Web Accessible

from HTMHell [alt+shift+b] in programming

2 months ago
by Kristin Rohleder Imagine you’re reading a book that seems perfect for cozy winter evenings. But as soon as you turn the page, you suddenly find yourself somewhere else, rather than on the next page of the story. Now, you have to painstakingly search through the book to find...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
Improving User Experience for Multilingual Web Browsing by Anastasiia Batarei Today, I’d like to talk about the experience of browsing websites where...
2 months ago
56

Improving User Experience for Multilingual Web Browsing

from HTMHell [alt+shift+b] in programming

2 months ago
by Anastasiia Batarei Today, I’d like to talk about the experience of browsing websites where content is fully or partially in a language different from the user’s native one. This situation is common for users navigating government portals or local service providers in a country...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
HTML and CSS I didn't even know about before I started creating content in Japanese by Julia Undeutsch Since I started to create content in Japanese, I also wanted to learn about...
2 months ago
43

HTML and CSS I didn't even know about before I started creating content in Japanese

from HTMHell [alt+shift+b] in programming

2 months ago
by Julia Undeutsch Since I started to create content in Japanese, I also wanted to learn about traditional setups, like having Japanese text flow from top to bottom, right to left, like you’d see in newspapers or novels. That's when I discovered CSS properties like writing-mode:...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
Makeshift hot reload by Evan Hahn In short: put <meta http-equiv="refresh" content="1"> in your <head> element to refresh...
2 months ago
34

Makeshift hot reload

from HTMHell [alt+shift+b] in programming

2 months ago
by Evan Hahn In short: put <meta http-equiv="refresh" content="1"> in your <head> element to refresh your page every second. This is a makeshift "hot reload" for development. It's not perfect, but it can be a quick solution! Hot reloading automatically reloads parts of your page...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
Submit to the Quirks of HTML by Felix Hessenberger It was on a cold February evening. I had been working on a client project,...
2 months ago
55

Submit to the Quirks of HTML

from HTMHell [alt+shift+b] in programming

2 months ago
by Felix Hessenberger It was on a cold February evening. I had been working on a client project, building an order item list—nothing out of the ordinary. To adjust an item’s quantity, the user would open a popup form with a single input field, type a number, and hit...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
Native HTML light and dark color scheme switching by Vadim Makeev It’s getting dark early in Berlin in the winter. It’s not even close to evening, but...
2 months ago
55

Native HTML light and dark color scheme switching

from HTMHell [alt+shift+b] in programming

2 months ago
by Vadim Makeev It’s getting dark early in Berlin in the winter. It’s not even close to evening, but my OS and all apps have already switched to dark mode. Well, not all of them, unfortunately. And that’s the thing: dark mode has become a quality-of-life feature for many users,...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
Past HTML, Future HTML? by Jens Oliver Meiert Consider the following HTML document: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML...
2 months ago
53

Past HTML, Future HTML?

from HTMHell [alt+shift+b] in programming

2 months ago
by Jens Oliver Meiert Consider the following HTML document: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 1996-01//EN"> <html> <head> <title></title> </head> <body> <p class="Author"> <h1></h1> <P> <P> <H2></H2> <P> <UL> <LI> <LI> ...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
HTMHAIL by Léonie Watson Almost, but not quite, entirely unlike... Can you give me the HTML for an...
2 months ago
44

HTMHAIL

from HTMHell [alt+shift+b] in programming

2 months ago
by Léonie Watson Almost, but not quite, entirely unlike... Can you give me the HTML for an accessible button please? It was a simple enough question. Or it would have been, had I been asking another person. As it was, I was asking ChatGPT, and so of course there was nothing...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
aria-labelledby = self by Weston Thayer An accessible name is how UI components are identified to assistive tech. Having a...
2 months ago
45

aria-labelledby = self

from HTMHell [alt+shift+b] in programming

2 months ago
by Weston Thayer An accessible name is how UI components are identified to assistive tech. Having a good accessible name is important. If not, negative effects may include screen reader users missing out on vital information, voice control users struggling to interact, and any...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
Forced Colors Mode Futility by Matthias Zöchling figure{margin-bottom:2.4rem}figure img{aspect-ratio:4;border: 6px solid...
2 months ago
40

Forced Colors Mode Futility

from HTMHell [alt+shift+b] in programming

2 months ago
by Matthias Zöchling figure{margin-bottom:2.4rem}figure img{aspect-ratio:4;border: 6px solid #000}figcaption,sup,.highlight,section:has(#resources) span,section:has(#fns)...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
Control the Viewport Resize Behavior on mobile with `interactive-widget` by Bramus figcaption { font-size: 0.8em; text-align: center; } Viewports units on...
2 months ago
36

Control the Viewport Resize Behavior on mobile with `interactive-widget`

from HTMHell [alt+shift+b] in programming

2 months ago
by Bramus figcaption { font-size: 0.8em; text-align: center; } Viewports units on mobile have been a problem for a long time. Using 100vh is most likely not exactly what you initially expected it to be. To fix this, the CSS Working Group came up with more units over...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
Smooth Multi-Page Experiences with Just a Few Lines of CSS by John Allsopp A single line of CSS can enable slick multi-page transitions for web applications...
2 months ago
41

Smooth Multi-Page Experiences with Just a Few Lines of CSS

from HTMHell [alt+shift+b] in programming

2 months ago
by John Allsopp A single line of CSS can enable slick multi-page transitions for web applications (and web sites for those who maintain there's a difference), opening up new possibilities for web app architectures, and website experiences. So let’s take a look at View...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
Starting off right: Where autofocus shines by Kilian Valkhof Focus is where the user is on your website. It's what makes it possible to...
2 months ago
45

Starting off right: Where autofocus shines

from HTMHell [alt+shift+b] in programming

2 months ago
by Kilian Valkhof Focus is where the user is on your website. It's what makes it possible to navigate your site with the keyboard or other assistive technologies, and it's how a browser knows which form element you're typing in. It's vital to get right if you want to build good...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
A link on a logo in the header, what should the alt-text be? by Rian Rietveld It's a common pattern to use a logo in the header as a link to the homepage. Fun...
2 months ago
45

A link on a logo in the header, what should the alt-text be?

from HTMHell [alt+shift+b] in programming

2 months ago
by Rian Rietveld It's a common pattern to use a logo in the header as a link to the homepage. Fun fact: the alt text of the image inside a link, will be added to the link text. The problem with linking a logo is that it serves 2 purposes: a logo, that tells you which site you are...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
#34 a button is not a link Bad code <button type="button" onclick="window.open('https://example.com/other-page')">Link target...
2 months ago
37

#34 a button is not a link

from HTMHell [alt+shift+b] in programming

2 months ago
Bad code <button type="button" onclick="window.open('https://example.com/other-page')">Link target description</button> Issues and how to fix them A button opening a link will be unexpected behavior for screen reader users. No matter how it is styled. Links disguised as buttons...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
#33 make me one (input) with everything The good intentions were there but in the HTML and Accessibility world, less is sometimes more. Bad...
5 months ago
54

#33 make me one (input) with everything

from HTMHell [alt+shift+b] in programming

5 months ago
The good intentions were there but in the HTML and Accessibility world, less is sometimes more. Bad code <label for="textinput">First name</label> <input type="text" id="textinput" aria-label="First name" placeholder="First name" title="First name"> Issues and how to fix them The...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
Never underestimate HTML by Lara Aigmüller “HTML is easy.”, “Frontend development is easier than backend development.”,...
a year ago
12

Never underestimate HTML

from HTMHell [alt+shift+b] in programming

a year ago
by Lara Aigmüller “HTML is easy.”, “Frontend development is easier than backend development.”, “Updating the UI should be a simple task once the backend is ready.”—these and other similar statements reached my ears time and again during my career as a web developer. Very often,...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
The devil is in the details: a look into a disclosure widget markup by Cristian Diaz Disclosure widgets are one of the most common component patterns you can find on...
a year ago
13

The devil is in the details: a look into a disclosure widget markup

from HTMHell [alt+shift+b] in programming

a year ago
by Cristian Diaz Disclosure widgets are one of the most common component patterns you can find on the web. It consists of a button that can hide or show information when you click it. It's also one of the straightforward components to make from a technical standpoint. Just a...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
ARIA Live Regions by Andrea de Souza ARIA stands for Accessible Rich Internet Applications. It is a set of roles and...
a year ago
15

ARIA Live Regions

from HTMHell [alt+shift+b] in programming

a year ago
by Andrea de Souza ARIA stands for Accessible Rich Internet Applications. It is a set of roles and attributes that makes web page elements accessible to users who require assistive technology, like screen readers, when native HTML alone is not enough. One of these sets of roles...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
The Implied Web by Halvor William Sanden People don’t need call-to-action buttons. Interface elements made to get...
a year ago
15

The Implied Web

from HTMHell [alt+shift+b] in programming

a year ago
by Halvor William Sanden People don’t need call-to-action buttons. Interface elements made to get attention and herd people towards clicks increase cognitive effort because they obscure themselves and reduce interfaces to clickable surfaces. The implied web is based on the idea...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
Design pattern for custom tooltips by Jan Hellbusch Should we use tooltips to convey information? Hints and descriptions are often...
a year ago
13

Design pattern for custom tooltips

from HTMHell [alt+shift+b] in programming

a year ago
by Jan Hellbusch Should we use tooltips to convey information? Hints and descriptions are often included on web pages through tooltips – but not everyone has access to them. A tooltip is a short text that usually appears as a popup when a user hovers a mouse pointer over an...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
Boosting testing efficiency: how semantic HTML transforms End-to-End testing by Stefania Mellai Semantic and accessible HTML serves as a powerful tool, enhancing not only human...
a year ago
12

Boosting testing efficiency: how semantic HTML transforms End-to-End testing

from HTMHell [alt+shift+b] in programming

a year ago
by Stefania Mellai Semantic and accessible HTML serves as a powerful tool, enhancing not only human interaction but also the efficiency of software systems. For instance, when users fill out forms with clear labels and accessible input fields, this reduces errors and ensures...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
The road to HTMHell is paved with semantics by Vadim Makeev HTML semantics is a nice idea, but does it really make a difference? There’s a huge...
a year ago
36

The road to HTMHell is paved with semantics

from HTMHell [alt+shift+b] in programming

a year ago
by Vadim Makeev HTML semantics is a nice idea, but does it really make a difference? There’s a huge gap between HTML spec’s good intentions and what browsers and screen readers are willing to implement. Writing semantic markup only because the good spec is a spec, and it is good,...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
Revisiting Fundamentals - Semantic lists for Improved Accessibility by Winnie Bosibori Lists are one of the fundamental semantic HTML configurations that, when...
a year ago
18

Revisiting Fundamentals - Semantic lists for Improved Accessibility

from HTMHell [alt+shift+b] in programming

a year ago
by Winnie Bosibori Lists are one of the fundamental semantic HTML configurations that, when implemented appropriately can enhance accessibility. HTML Lists Refresher Whenever I visit any website, I have formed the habit of checking for any accessibility issues and delving deeper...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
Swallowing camels by Ida Franceen I don't like how the screen reader pronounces these numbers and I've been...
a year ago
13

Swallowing camels

from HTMHell [alt+shift+b] in programming

a year ago
by Ida Franceen I don't like how the screen reader pronounces these numbers and I've been experimenting with different kinds of markup to get it to read better, like injecting spans to force it to make proper pauses… Reflecting on my tendency to obsess over small, but maybe not...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
The Ghosts of Markup Past by Thomas A. Powell As a well-seasoned web developer, a clear euphemism for my age, I reminisce...
a year ago
12

The Ghosts of Markup Past

from HTMHell [alt+shift+b] in programming

a year ago
by Thomas A. Powell As a well-seasoned web developer, a clear euphemism for my age, I reminisce about the early days of markup through the haze of strong emotional glasses. I see the past from an extreme nostalgic fondness for the simplicity of the time when a basic text editor...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
Getting started with Web Performance 🚀 by Alistair Shepherd Carefully observing websites in the wild As the murderous...
a year ago
33

Getting started with Web Performance 🚀

from HTMHell [alt+shift+b] in programming

a year ago
by Alistair Shepherd Carefully observing websites in the wild As the murderous tortoises start to converge on Ryūji’s hideout, they pull out their phone. It’s a cheap, older device but it’s survived the toils of the tortoise-ageddon well so far. Thankfully...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
HTML: The Bad Parts by Mayank You've probably heard statements along the lines of "HTML is already accessible by...
a year ago
34

HTML: The Bad Parts

from HTMHell [alt+shift+b] in programming

a year ago
by Mayank You've probably heard statements along the lines of "HTML is already accessible by default" or "You don't need to reinvent this perfectly fine HTML control". I consider these to be more of general claims rather than universal truths. It's extremely important for web...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
Test-driven HTML and accessibility by David Luhr When I started writing unit tests and following a test-driven development (TDD)...
a year ago
35

Test-driven HTML and accessibility

from HTMHell [alt+shift+b] in programming

a year ago
by David Luhr When I started writing unit tests and following a test-driven development (TDD) workflow, I was stoked with the immediate feedback and confidence I gained in every line of JavaScript I wrote. TDD improved my software design with simpler, more predictable code. It...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
The hidden attribute in HTML by Ahmad El-Alfy The hidden attribute allows us to hide HTML elements from the page. When it was...
a year ago
71

The hidden attribute in HTML

from HTMHell [alt+shift+b] in programming

a year ago
by Ahmad El-Alfy The hidden attribute allows us to hide HTML elements from the page. When it was introduced, it worked in a very simple way: it set the CSS display property to none. Many people voiced concerns because here we are, mixing styles with markup again. To be fair, this...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
Template for accessibility guidelines by Steve Frenzel Foreword This template is opinionated and intended as a starting point for those...
a year ago
12

Template for accessibility guidelines

from HTMHell [alt+shift+b] in programming

a year ago
by Steve Frenzel Foreword This template is opinionated and intended as a starting point for those who want to define how accessibility is dealt with in their company. It does not matter whether your title is developer, designer, project manager or something else. I created it...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
What the slot? by Egor Kloos (aka dutchcelt) Web Components. The discussion seems to pop up more than it used...
a year ago
18

What the slot?

from HTMHell [alt+shift+b] in programming

a year ago
by Egor Kloos (aka dutchcelt) Web Components. The discussion seems to pop up more than it used to. Web Components Will Outlive Your JavaScript Framework HTML Web Components: An Example Material web components 1.0 release HTML Web Components are Just JavaScript? Web Components...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
The hidden depths of the input element by Phil Nash The <input> element is the most fascinating element in HTML. Most elements behave the...
a year ago
13

The hidden depths of the input element

from HTMHell [alt+shift+b] in programming

a year ago
by Phil Nash The <input> element is the most fascinating element in HTML. Most elements behave the same way regardless of their attributes, the type attribute of the <input> element can take 1 of 22 different values that gives it not only different behaviour, but a different...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
Security Headers using &lt;meta&gt; by Saptak S Various HTTP headers are sent between the user and the server of a website in the...
a year ago
18

Security Headers using &lt;meta&gt;

from HTMHell [alt+shift+b] in programming

a year ago
by Saptak S Various HTTP headers are sent between the user and the server of a website in the request-response cycle. Some of these HTTP response headers sent by the server to the browser help enhance the security and privacy of the website's users. These sets of headers are...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
Web Components FTW! by Chris Ferdinandi Web Components are a collection of technologies that you can use to create...
a year ago
31

Web Components FTW!

from HTMHell [alt+shift+b] in programming

a year ago
by Chris Ferdinandi Web Components are a collection of technologies that you can use to create reusable custom elements, with built-in interactivity, automatically scoped (or encapsulated) from the rest of your code. They have a wide range of features and functionality (some...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
The Hellish History of HTML: An incomplete and personal account by Jason Cranford Teague Timeline of HTML from 1990–2024 Note: HTML standards are developed...
a year ago
22

The Hellish History of HTML: An incomplete and personal account

from HTMHell [alt+shift+b] in programming

a year ago
by Jason Cranford Teague Timeline of HTML from 1990–2024 Note: HTML standards are developed first in browsers, so the version might have already became the de facto standard before the official standard document is released. The story so far: In the beginning Tim...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
Back to Basics: 5 HTML attributes for improved accessibility and user experience by Daniela Kubesch In the fast-paced world of web development, it's easy to get caught up in the...
a year ago
13

Back to Basics: 5 HTML attributes for improved accessibility and user experience

from HTMHell [alt+shift+b] in programming

a year ago
by Daniela Kubesch In the fast-paced world of web development, it's easy to get caught up in the latest frameworks, libraries and cutting-edge technologies. But sometimes, the most impactful improvements come from revisiting the fundamentals. In this blog post, I'll guide you...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
The Form Attribute - Enhancing Form Layout Flexibility by Alexander Muzenhardt Consider a scenario where you have a login form containing two input fields...
a year ago
15

The Form Attribute - Enhancing Form Layout Flexibility

from HTMHell [alt+shift+b] in programming

a year ago
by Alexander Muzenhardt Consider a scenario where you have a login form containing two input fields with corresponding labels, alongside a submit and a reset button. If you submit the form, the action of the form gets triggered, and you can work with the formData. The layout...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
You don't need JavaScript for that by Kilian Valkhof Hello, my dear friend of RSS! This post contains interactive demos. You may want...
a year ago
12

You don't need JavaScript for that

from HTMHell [alt+shift+b] in programming

a year ago
by Kilian Valkhof Hello, my dear friend of RSS! This post contains interactive demos. You may want to read it on the website. Please don't feel antagonised by the title of this article. I don't hate JavaScript, I love it. I write bucketloads of it every single day. But I also...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
The UX of HTML by Vasilis van Gemert Recently when I gave a coding assignment — an art directed web page about a...
a year ago
17

The UX of HTML

from HTMHell [alt+shift+b] in programming

a year ago
by Vasilis van Gemert Recently when I gave a coding assignment — an art directed web page about a font — a student asked: does it have to be semantic and shit? The whole class looked up, curious about the answer — please let it be no! I answered that no, it doesn’t have to be...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
Preventing form submission with zero Javascript Want to trigger an action? Use a button element. They’re great. Want to also prevent form submission...
over a year ago
13

Preventing form submission with zero Javascript

from HTMHell [alt+shift+b] in programming

over a year ago
Want to trigger an action? Use a button element. They’re great. Want to also prevent form submission when someone clicks that button? Put down the JavaScript, friend. I have a better suggestion: <button type="button"> Button action goes here </button> And that’s it! No ...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
Enforcing better HTML markup with Eleventy While what we mean is usually very clear to us, others may decode our messages differently from what...
over a year ago
14

Enforcing better HTML markup with Eleventy

from HTMHell [alt+shift+b] in programming

over a year ago
While what we mean is usually very clear to us, others may decode our messages differently from what we intended. This is especially true on the web, where there are many ways to consume content. The language, browser type, device model, using a screen reader, navigating with or...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
What is the Difference Between Alternative Text, Long Description, and Caption? When it comes to adding images on the web, you need to consider how to make them accessible and...
over a year ago
14

What is the Difference Between Alternative Text, Long Description, and Caption?

from HTMHell [alt+shift+b] in programming

over a year ago
When it comes to adding images on the web, you need to consider how to make them accessible and understandable to everyone. Which means you need to include text alternatives to describe the image information or function. Three options are: Alternative Text Long...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
A Theory of Web Relativity The rel attribute has the potential to take the Internet to the next level… and yet, we usually...
over a year ago
14

A Theory of Web Relativity

from HTMHell [alt+shift+b] in programming

over a year ago
The rel attribute has the potential to take the Internet to the next level… and yet, we usually forget about it. Imagine a city where people guided themselves by the landmarks and the stores, where there were no directional signs, and where streets and neighborhoods had no names....
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
Common nesting issues in HTML HTML is such a lovely language. Browsers will almost always display something for you, no matter...
over a year ago
21

Common nesting issues in HTML

from HTMHell [alt+shift+b] in programming

over a year ago
HTML is such a lovely language. Browsers will almost always display something for you, no matter what you put in the HTML document. Heck, you could omit all tags, and it will still work. That’s all nice, but as web professionals, we should aim to write valid code. But even...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
Do you know color-scheme? Do you know of color-scheme yet? If not, I bet you still think you do. It will certainly look...
over a year ago
17

Do you know color-scheme?

from HTMHell [alt+shift+b] in programming

over a year ago
Do you know of color-scheme yet? If not, I bet you still think you do. It will certainly look familiar, as prefers-color-scheme has been around for longer and is clearly related. You're in good company if it's new to you - the State of CSS 2022 results just came in, and 73% of...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
Mini-guide to add an image Adding an image with HTML is pretty easy, it’s just a simple tag, after all, right? <img...
over a year ago
19

Mini-guide to add an image

from HTMHell [alt+shift+b] in programming

over a year ago
Adding an image with HTML is pretty easy, it’s just a simple tag, after all, right? <img src="path/to/image.jpg" /> But when you start taking into consideration topics such as performance, screen sizes, accessibility, pixel density, or user preferences, you might ask yourself at...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
Modern HTML as a foundation for progressive enhancement Reading HTMHell, you might be aware that progressive enhancement is a thing. To sum things up, it's...
over a year ago
14

Modern HTML as a foundation for progressive enhancement

from HTMHell [alt+shift+b] in programming

over a year ago
Reading HTMHell, you might be aware that progressive enhancement is a thing. To sum things up, it's a way to make sure anyone gets a viable version of your page whatever is their context — slow bandwitdh, oldish browser, etc. — but also making the said page more resilient (e.g....
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
5 HTML elements, And a partridge in a despair tree HTML is a beautiful programming language. It comes with many out-of-the-box accessibility...
over a year ago
14

5 HTML elements, And a partridge in a despair tree

from HTMHell [alt+shift+b] in programming

over a year ago
HTML is a beautiful programming language. It comes with many out-of-the-box accessibility benefits—it conveys semantic meaning to assistive technology, enabling people to consume content and complete often important journeys that they may not be able to do outside of the web. So...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
Get that marquee ✨AeStHeTiC✨ With the current Y2K fashion trend and JLo being back together with Ben Affleck, the 2000s are...
over a year ago
13

Get that marquee ✨AeStHeTiC✨

from HTMHell [alt+shift+b] in programming

over a year ago
With the current Y2K fashion trend and JLo being back together with Ben Affleck, the 2000s are having a revival this year. Many brands are jumping onto the boat by creating websites with an “old-school” vibe. SEPRONIC WORLD by Thea Wood on Behance The marquee element is an old...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
Table Like It's 2023 In this article: Hello, Website Builders! A little history What is a table? Who benefits from...
over a year ago
16

Table Like It's 2023

from HTMHell [alt+shift+b] in programming

over a year ago
In this article: Hello, Website Builders! A little history What is a table? Who benefits from tables? What does a table look like? What does a table sound and feel like? (Re)learning tables (1994 - 2022) WCAG levels unlocked When tables get complicated Go forth, and make good...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
One day we'll have a fully customisable select Today, I want to look at a proposed HTML feature that may end up replacing a lot of <div>s-based...
over a year ago
15

One day we'll have a fully customisable select

from HTMHell [alt+shift+b] in programming

over a year ago
Today, I want to look at a proposed HTML feature that may end up replacing a lot of <div>s-based custom input components: <selectmenu>. CSS is awesome I realise this calendar is about HTML. And I'll get to that. But first, let me start with CSS. CSS is fantastic, because it has...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
DOM Clobbering Motivation When thinking of HTML-related security bugs, people often think of script injection...
over a year ago
12

DOM Clobbering

from HTMHell [alt+shift+b] in programming

over a year ago
Motivation When thinking of HTML-related security bugs, people often think of script injection attacks, which is also known as Cross-Site Scripting (XSS). If an attacker is able to submit, modify or store content on your web page, they might include evil JavaScript code to modify...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
There can be only one: Options for building “choose one” fields When it comes to building out forms, it sometimes seems like there are at once both too few field...
over a year ago
16

There can be only one: Options for building “choose one” fields

from HTMHell [alt+shift+b] in programming

over a year ago
When it comes to building out forms, it sometimes seems like there are at once both too few field types and too many. This is especially true when it comes to having users choose an option from a pre-defined list, also known as “choose one” fields. This article will take you on a...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
Dear developer, your assumptions are wrong As developers, validation of user input is one of the first things we are taught. So, for example,...
over a year ago
13

Dear developer, your assumptions are wrong

from HTMHell [alt+shift+b] in programming

over a year ago
As developers, validation of user input is one of the first things we are taught. So, for example, we may think it would be a good idea to put some restrictions in an input field for a name: <label for="name">First name:</label> <input type="text" minlength="3" maxlength="20"...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
You don't need HTML! While browsing Mastodon late one night, I came across this excellent blog post called HTML is all...
over a year ago
14

You don't need HTML!

from HTMHell [alt+shift+b] in programming

over a year ago
While browsing Mastodon late one night, I came across this excellent blog post called HTML is all you need to make a website. It describes a few websites which are pure HTML. No CSS and no JS. And I thought… do you even need HTML to make a website? A few hours later, I launched...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
Improving SEO without knowing where to start Summary Introduction What is SEO ? Web quality with Opquast SEO-related Opquast...
over a year ago
15

Improving SEO without knowing where to start

from HTMHell [alt+shift+b] in programming

over a year ago
Summary Introduction What is SEO ? Web quality with Opquast SEO-related Opquast rules Conclusion Introduction ↑ Colleagues sometimes ask me: “Hey Alex, I would like to learn a bit about search engine optimisation (SEO) but I don't really know where to start. Do you have tips for...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
Meaningful labels using ARIA – or not. If I had a dollar for every time I've had to tell someone to remove an aria-label from an...
over a year ago
16

Meaningful labels using ARIA – or not.

from HTMHell [alt+shift+b] in programming

over a year ago
If I had a dollar for every time I've had to tell someone to remove an aria-label from an interactive control that has actual visible text, I could have bought Twitter! As a former developer and current accessibility consultant, it is my sincere hope that by reading this article,...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
Adding Complementary Performance Data to Your Site Getting performance data from real users can transform assumptions about how a user experiences a...
over a year ago
14

Adding Complementary Performance Data to Your Site

from HTMHell [alt+shift+b] in programming

over a year ago
Getting performance data from real users can transform assumptions about how a user experiences a site into objective, actionable information. In the last two years, there has been increased awareness of web performance thanks to Google's Core Web Vitals (CWV) metrics. These...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
Reading the meter The <meter> element is a little known and rarely used semantic element. It's a non-interactive form...
over a year ago
13

Reading the meter

from HTMHell [alt+shift+b] in programming

over a year ago
The <meter> element is a little known and rarely used semantic element. It's a non-interactive form element that renders as a partially filled horizontal bar. Browsers provide user-agent styles, but the <meter> element can also be styled. <meter min="10" max="200"...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
Landmarks and where to put them Heading elements (h1 through to h6) are used to give structure to the content of your page. They're...
over a year ago
14

Landmarks and where to put them

from HTMHell [alt+shift+b] in programming

over a year ago
Heading elements (h1 through to h6) are used to give structure to the content of your page. They're important for SEO, make your pages more readable and, of course, also help people that use assistive technologies navigate through your page. Somewhat less known are landmark...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
Using SRI to protect from malicious JavaScript At some point of developing a website, there might come a time where we need to progressively...
over a year ago
13

Using SRI to protect from malicious JavaScript

from HTMHell [alt+shift+b] in programming

over a year ago
At some point of developing a website, there might come a time where we need to progressively enhance using JavaScript. There are few different options of how you add JavaScript. Firstly, we can write our own script using vanilla JS only, and self host the JavaScript file....
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
You Don't Need ARIA For That In web development, writing semantic HTML is important for accessibility, and also provides some...
over a year ago
16

You Don't Need ARIA For That

from HTMHell [alt+shift+b] in programming

over a year ago
In web development, writing semantic HTML is important for accessibility, and also provides some nice side effects such as supporting browser "reader" modes, SEO, graceful degradation, and exporting. Implementing semantic HTML will also greatly reduce the need for ARIA...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
How to transfigure wireframes into HTML Soon enough in your career as a web developer, you encounter the situation where a designer hands...
over a year ago
16

How to transfigure wireframes into HTML

from HTMHell [alt+shift+b] in programming

over a year ago
Soon enough in your career as a web developer, you encounter the situation where a designer hands over a wonderful web design in all its large-screen glory. Your mission now is to transform it into code to present a prototype as soon as possible, starting with nothing but an...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
#32 almost a proper close button Bad code <button display="flex" role="button"> <svg role="img" viewBox="0 0 13 13"...
over a year ago
15

#32 almost a proper close button

from HTMHell [alt+shift+b] in programming

over a year ago
Bad code <button display="flex" role="button"> <svg role="img" viewBox="0 0 13 13" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="15px" width="15px" fill="#000" name="close"> <title>Close dialog</title> <path d="…"> </path> </svg> </button> Issues and...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
#31 additional “assistance” Bad code <a href="/contact" aria-label="If you find that you need additional assistance in...
over a year ago
14

#31 additional “assistance”

from HTMHell [alt+shift+b] in programming

over a year ago
Bad code <a href="/contact" aria-label="If you find that you need additional assistance in navigating or accessing the content of this website, please call our customer service toll free number 1-800-666-8654309" title="If you find that you need additional assistance in...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
#30 Bullet “list” Bad code <p> • HTML <br> • CSS <br> • JavaScript </p> Issues and how to fix them Use <p>...
over a year ago
14

#30 Bullet “list”

from HTMHell [alt+shift+b] in programming

over a year ago
Bad code <p> • HTML <br> • CSS <br> • JavaScript </p> Issues and how to fix them Use <p> for paragraphs, not lists. The standard way for creating basic lists is <ul> (when the order doesn't matter) or <ol> (when the order matters), and <li> for each item. The “list”...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
#29 Randomly grouping content Bad code <section> <aside> <div> <section> <header> <a href="/"> ...
over a year ago
15

#29 Randomly grouping content

from HTMHell [alt+shift+b] in programming

over a year ago
Bad code <section> <aside> <div> <section> <header> <a href="/"> <img src="logo.svg" alt="Logo"> </a> </header> <main> <a href="/services">Services</a> <a href="/products">Products</a> ...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
#28 alert level 1 Bad code <h1 aria-busy="true" aria-live="polite" role="alert" class="sr-only"> Done </h1> Issues...
over a year ago
15

#28 alert level 1

from HTMHell [alt+shift+b] in programming

over a year ago
Bad code <h1 aria-busy="true" aria-live="polite" role="alert" class="sr-only"> Done </h1> Issues and how to fix them The element is used for communicating status updates, not to structure the page. A div with a role of status or alert is more suitable than a h1. The heading is...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
#27 <a6> Context: Visually a list of links. Bad code <h6>Popular Cities</h6> <div> <h6...
over a year ago
15

#27 <a6>

from HTMHell [alt+shift+b] in programming

over a year ago
Context: Visually a list of links. Bad code <h6>Popular Cities</h6> <div> <h6 class="footerLinks">Amsterdam</h6> <h6 class="footerLinks">Rotterdam</h6> <h6 class="footerLinks">Utrecht</h6> <h6 class="footerLinks">Den Haag</h6> <h6...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
#26 HTMHell special: tasty buttons The second HTMHell special focuses on another highly controversial pattern in front-end...
over a year ago
13

#26 HTMHell special: tasty buttons

from HTMHell [alt+shift+b] in programming

over a year ago
The second HTMHell special focuses on another highly controversial pattern in front-end development: 🔥 the burger button. 🔥 The burger button and his tasty friends (kebab, meatball and bento) usually reveal a list of links when activated. According to our studies, these buttons...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
#25 A link is a button is a link Note: We've removed most classes to improve readability. Bad code <a tabindex="0" type="button"...
over a year ago
15

#25 A link is a button is a link

from HTMHell [alt+shift+b] in programming

over a year ago
Note: We've removed most classes to improve readability. Bad code <a tabindex="0" type="button" href="/signup" role="link"> <span class="focus" tabindex="-1"></span> <span> <span> <span>Sign up</span> <i class="icon icon-external-link" aria-hidden="true"...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
#24 A placeholder is not a label Bad code <input type="text" placeholder="First name"> Issues and how to fix them Every form input...
over a year ago
12

#24 A placeholder is not a label

from HTMHell [alt+shift+b] in programming

over a year ago
Bad code <input type="text" placeholder="First name"> Issues and how to fix them Every form input element needs a label. When screen reader users access a form field, the label is announced with the field type (e.g. first name, edit text). If it’s missing, users might not know...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
#23 A card pattern Bad code <article> <div> <div class="sr-only">Image</div> <img src="/feature-teaser.png"...
over a year ago
17

#23 A card pattern

from HTMHell [alt+shift+b] in programming

over a year ago
Bad code <article> <div> <div class="sr-only">Image</div> <img src="/feature-teaser.png" alt="Feature teaser" /> </div> </article> <div> <span> <span>Exciting feature!</span> </span> <div> This text describes what the feature does! </div> <a...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
#22 the good ol’ div link Context: A link to another page. Bad code <div>About us</div> <div...
over a year ago
16

#22 the good ol’ div link

from HTMHell [alt+shift+b] in programming

over a year ago
Context: A link to another page. Bad code <div>About us</div> <div onClick="location.href='about.html'"> About us </div> <div data-page="aboutus" data-url="index.php"> About us </div> …or any other variation of this pattern where an element other than <a> is used to link to a...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
#21 Legendary legend! Context: A button that expands and collapses a section of text. Bad code <button...
over a year ago
14

#21 Legendary legend!

from HTMHell [alt+shift+b] in programming

over a year ago
Context: A button that expands and collapses a section of text. Bad code <button class="panel-heading" tabindex="0" href="#collapse0" aria-expanded="true"> <legend> Industries Served </legend> </button> Issues and how to fix them legend is not allowed as a child of any other...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
#20 HTMHell special: close buttons This first HTMHell special inspects one of the most complicated and most controversial patterns in...
over a year ago
16

#20 HTMHell special: close buttons

from HTMHell [alt+shift+b] in programming

over a year ago
This first HTMHell special inspects one of the most complicated and most controversial patterns in front-end development: 🔥 the close button. 🔥 In modals, ads, and other overlays you often find a button with a close symbol that allows users, or at least some of them, to close...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
#19 heading in the wrong direction Context: A simple page that displays the availability of a product. Bad code <h1>Product...
over a year ago
14

#19 heading in the wrong direction

from HTMHell [alt+shift+b] in programming

over a year ago
Context: A simple page that displays the availability of a product. Bad code <h1>Product Status</h1> <h2>Is the product available?</h2> <div> <h3> <div> <div> <i> <h3 class="message is-success"> It‘s <a>available</a>. </h3> ...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
#18 main divigation Context: The main navigation of a personal website. Bad code <div class="nav"> <div> ...
over a year ago
15

#18 main divigation

from HTMHell [alt+shift+b] in programming

over a year ago
Context: The main navigation of a personal website. Bad code <div class="nav"> <div> <div>about</div> <div>thoughts</div> </div> </div> Issues and how to fix them The <div> element is an element of last resort, for when no other element is suitable. Use of the <div>...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
#17 inaccessible cards Context: A list of linked cards, each with heading, image, and teaser text. Bad code <section> ...
over a year ago
15

#17 inaccessible cards

from HTMHell [alt+shift+b] in programming

over a year ago
Context: A list of linked cards, each with heading, image, and teaser text. Bad code <section> <section> <h2>Overview</h2> <figure class="card" data-url="image1.html" style="background: url(image1.jpg)"> <figcaption> <h4>My heading</h4> ...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
#16 alt, no wait…, aria-label, no wait…, alt Context: A list of images that link to detail pages. Bad code <a tabindex="0"> <div alt="Browser...
over a year ago
13

#16 alt, no wait…, aria-label, no wait…, alt

from HTMHell [alt+shift+b] in programming

over a year ago
Context: A list of images that link to detail pages. Bad code <a tabindex="0"> <div alt="Browser Wars: The Last Engine" aria-label="Browser Wars: The Last Engine"> <div> <img alt="Browser Wars: The Last Engine" src="thumbnail.jpg"> </div> </div> </a> Issues and...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
#15 letter by letter Bad code Letters are wrapped in divs to animate each letter with JavaScript. <h3> <div...
over a year ago
13

#15 letter by letter

from HTMHell [alt+shift+b] in programming

over a year ago
Bad code Letters are wrapped in divs to animate each letter with JavaScript. <h3> <div style="display: block; text-align: start; position: relative;" class="title"> <div style="position: relative; display: inline-block; transform: rotateX(90deg); transform-origin: 50% 50%...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
#14 not my type Bad code <a type="button" class="button" href="/signup" tabindex="-1">Sign up</a> Issues and how to...
over a year ago
12

#14 not my type

from HTMHell [alt+shift+b] in programming

over a year ago
Bad code <a type="button" class="button" href="/signup" tabindex="-1">Sign up</a> Issues and how to fix them The type attribute has no effect on the semantics of an <a> element. An anchor may have the type attribute, but the value should be a valid MIME type. Browsers may...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
#13 link or label Bad code <input type="checkbox" id="accept" required> <label for="accept"> <a href="/legal"> I...
over a year ago
15

#13 link or label

from HTMHell [alt+shift+b] in programming

over a year ago
Bad code <input type="checkbox" id="accept" required> <label for="accept"> <a href="/legal"> I accept the confidentiality policy and data… </a> </label> Issues and how to fix them It’s bad practice to nest elements with activation behavior (e.g. click). Users don’t expect a new...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
#12 accessible poll yes/no Bad code <form role="form"> <h2>Poll title</h2> <div id="pollQuestion">Is this...
over a year ago
15

#12 accessible poll yes/no

from HTMHell [alt+shift+b] in programming

over a year ago
Bad code <form role="form"> <h2>Poll title</h2> <div id="pollQuestion">Is this accessible?</div> <div name="pollGroup" role="radiogroup"> <div role="radiogroup" aria-label="Poll title"> <input type="radio" name="poll" aria-labelledby="pollQuestion" value="[object...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
#11 The trigram for heaven Bad code <span class="nav-toggle"> ☰ Menu </span> Issues and how to fix them A screen reader may...
over a year ago
15

#11 The trigram for heaven

from HTMHell [alt+shift+b] in programming

over a year ago
Bad code <span class="nav-toggle"> ☰ Menu </span> Issues and how to fix them A screen reader may announce this as trigram for heaven menu, because ☰ is the unicode character for the trigram for heaven. The purpose of the icon is decorative, it should be hidden from screen...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
#10 <section> is no replacement for <div> Bad code <section id="page-top"> <section data-section-id="page-top" style="display:...
over a year ago
18

#10 <section> is no replacement for <div>

from HTMHell [alt+shift+b] in programming

over a year ago
Bad code <section id="page-top"> <section data-section-id="page-top" style="display: none;"></section> </section> <main> <section id="main-content"> <header id="main-header"> <h1>...</h1> <section class="container-fluid"> <section class="row"> ...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
#9 Cookie Consent from Hell Bad code <body> <header>…</header> <main>…</main> <footer>…</footer> <div...
over a year ago
14

#9 Cookie Consent from Hell

from HTMHell [alt+shift+b] in programming

over a year ago
Bad code <body> <header>…</header> <main>…</main> <footer>…</footer> <div class="cookie_consent modal"> <p>We use cookies…</p> <div class="cookie_consent__close"> <i class="fa fa-times"></i> </div> <div class="cookie_consent__ok">OK</div> ...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
#8 anchor tag used as button Bad code <a href="#" onclick="modal.open()">Login</a> Issues and how to fix them If the a element...
over a year ago
14

#8 anchor tag used as button

from HTMHell [alt+shift+b] in programming

over a year ago
Bad code <a href="#" onclick="modal.open()">Login</a> Issues and how to fix them If the a element has an href attribute, it represents a link to another resource like a page or a PDF document. The purpose of the element in this example is to trigger an action on the same page...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
#7 multiple duplicate ids and table layout Bad code <table> <tr id="body"> <td id="body"> <table id="body"> <tr...
over a year ago
12

#7 multiple duplicate ids and table layout

from HTMHell [alt+shift+b] in programming

over a year ago
Bad code <table> <tr id="body"> <td id="body"> <table id="body"> <tr id="body_row"> <td id="body_left">…</td> <td id="body_middle">…</td> <td id="body_right">…</td> </tr> </table> </td> </tr> ...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
#6 link with void operator as href value Bad code <a href="javascript:void(1)" onClick='window.location="index.html"'>Link</a> Issues and how...
over a year ago
14

#6 link with void operator as href value

from HTMHell [alt+shift+b] in programming

over a year ago
Bad code <a href="javascript:void(1)" onClick='window.location="index.html"'>Link</a> Issues and how to fix them Links won't work, if JavaScript fails to load or execute. You don’t need JavaScript to link to other pages, you can use the href attribute for that. Browser support is...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
#5 button-like-link Bad code <a href="#form" role="button" aria-haspopup="true"> &nbsp;&nbsp;Register&nbsp;&nbsp;...
over a year ago
16

#5 button-like-link

from HTMHell [alt+shift+b] in programming

over a year ago
Bad code <a href="#form" role="button" aria-haspopup="true"> &nbsp;&nbsp;Register&nbsp;&nbsp; </a> Issues and how to fix them It’s a link to a form at the same page that looks like a button. By adding role="button" to a link, you’re telling that it’s a button, though it acts like...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
#4 link-also-button Bad code <a href="https://example.com"> <button>Example</button> </a> Issues and how to fix...
over a year ago
13

#4 link-also-button

from HTMHell [alt+shift+b] in programming

over a year ago
Bad code <a href="https://example.com"> <button>Example</button> </a> Issues and how to fix them By nesting a button inside of a link, you’re sending two messages: this is a button, but also this is a link. If you’re not sure when to use <a> or <button>, watch The Links vs....
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
#3 image-buttons Bad code <img src="/images/edit.gif" onclick="openEditDialog(123)"> <img src="/images/delete.gif"...
over a year ago
16

#3 image-buttons

from HTMHell [alt+shift+b] in programming

over a year ago
Bad code <img src="/images/edit.gif" onclick="openEditDialog(123)"> <img src="/images/delete.gif" onclick="openDeleteDialog(123)"> Issues and how to fix them The purpose of the img element is to display images, not to execute JavaScript. A click event on a img triggers only on...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
#2 div with button role Bad code <div tabindex="-1"> <div role="button"> <svg width="28" height="24"> … </svg> ...
over a year ago
16

#2 div with button role

from HTMHell [alt+shift+b] in programming

over a year ago
Bad code <div tabindex="-1"> <div role="button"> <svg width="28" height="24"> … </svg> </div> </div> Issues and how to fix them Setting button semantics explicitly using the role attribute isn’t necessary, there’s an element for that (button). You don’t need the tabindex...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
HTMHell
#1 button disguised as a link Bad code <button role="link" title="Name of website" tabindex="0"> <img alt="Name of website"...
over a year ago
11

#1 button disguised as a link

from HTMHell [alt+shift+b] in programming

over a year ago
Bad code <button role="link" title="Name of website" tabindex="0"> <img alt="Name of website" src="logo.jpg" title="Name of website"> </button> Issues and how to fix them Wrong usage of the button element. There’s an element for linking to external sites (<a>). Do not change...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]

The best way to read the internet.
Made for nerds, by a nerd.

The best way to read the internet

© 2023 Bored Reading. All rights reserved.

Terms Privacy Design by Kumail

bored reading

v. 229.328 compliant with
earth/mars-x8292 communication
protocol 29xjw899992

When Google killed Google Reader, the bloggosphere took a severe hit and the content quality went down because there weren't enough readers to justify the effort it takes to maintain a high quality blog.

What's left is a decaying wasteland of blogs, most abandoned, a lot are now SEO spam, and 99% are not worth reading. BoredReading is a way to read the remaining great blogs that survived the ice age.

To add your favorite blog, please suggest it here! I get emails every day which helps me maintain a high quality selection of blogs!

Avatar

Made by,
Kumail Hunaid

@kumailht on Twitter.
My website and email.

Close [esc]