The Curious Engineer

All blogs / Frontend / CSS / browsers

HTMHell

htmhell.dev

A collection of bad practices in HTML, copied from real websites.

Frontend / CSS / browsers

’19’20’21’22’23’24’25’26
Posts
140 from 17 Oct 2019 to 28 Dec 2025
Posting
weekly (28 in the last year)
Kind
community
Feed
https://www.htmhell.dev/feed.xml?y=122024

2025 29

  1. HTML Input Validation is (maybe) Good
  2. Replacing JS with just HTML
  3. Class names for content not design
  4. Abbreviations done right: The <abbr> element and why not use it
  5. The three semantics of HTML
  6. For the Love of <details>
  7. The HTML Elements Time Forgot
  8. Styling by Language: Using the lang Attribute for Multilingual Design
  9. The many lives of the page title
  10. Semantics beyond the tag name
  11. Forms are a badly designed part of HTML
  12. Don't leave the screen reader hungry
  13. Giving pages a clear shape by using headings
  14. Them’s the Breaks
  15. The Wonderful World of Web Feeds
  16. Hell is other people's markup
  17. A11y Considerations in Math on the Web
  18. How HTML changes in ePub
  19. a11y freedom beaver
  20. Discover Dialog
  21. What's wrong with this HTML, and is it valid?
  22. Controlling dialogs and popovers with the Invoker Commands API
  23. Accessible by Design: The Role of the 'lang' Attribute
  24. IDREFs: What they are and how to use them
  25. Referencing HTML elements inside Shadow DOM
  26. Speculation rules improvements
  27. Using the Ancient Evils for Debugging
  28. Top layer troubles: popover vs. dialog
  29. Details and tips on how to fix the diabolic code of #35.

2024 31

  1. datalists are more powerful than you think
  2. Boost website speed with prefetching and the Speculation Rules API
  3. Misleading Icons: Icon-Only-Buttons and Their Impact on Screen Readers
  4. The underrated <dl> element
  5. Preloading fonts for web performance with link rel="preload"
  6. The search input: They almost got it right
  7. The devil is in the <details>
  8. PSA: Stop using the title attribute as tooltip!
  9. Grouping form fields
  10. My favourite colour is Chuck Norris red
  11. Getting Oriented with HTML Video
  12. Microdata for books
  13. How I gained a new perspective on ARIA
  14. You don’t need the isOpen class
  15. The Gift You Do NOT Want: A Div in a Button's Clothing
  16. Page by Page: How Pagination Makes the Web Accessible
  17. Improving User Experience for Multilingual Web Browsing
  18. HTML and CSS I didn't even know about before I started creating content in Japanese
  19. Makeshift hot reload
  20. Submit to the Quirks of HTML
  21. Native HTML light and dark color scheme switching
  22. Past HTML, Future HTML?
  23. Almost, but not quite, entirely unlike...
  24. aria-labelledby = self
  25. Forced Colors Mode Futility
  26. Control the Viewport Resize Behavior on mobile with `interactive-widget`
  27. Smooth Multi-Page Experiences with Just a Few Lines of CSS
  28. Starting off right: Where autofocus shines
  29. A link on a logo in the header, what should the alt-text be?
  30. #34 a button is not a link
  31. #33 make me one (input) with everything

2023 24

  1. Never underestimate HTML
  2. The devil is in the details: a look into a disclosure widget markup
  3. ARIA Live Regions
  4. The Implied Web
  5. Design pattern for custom tooltips
  6. Boosting testing efficiency: how semantic HTML transforms End-to-End testing
  7. The road to HTMHell is paved with semantics
  8. Revisiting Fundamentals - Semantic lists for Improved Accessibility
  9. Swallowing camels
  10. The Ghosts of Markup Past
  11. Getting started with Web Performance 🚀
  12. HTML: The Bad Parts
  13. Test-driven HTML and accessibility
  14. The hidden attribute in HTML
  15. Template for accessibility guidelines
  16. What the slot?
  17. The hidden depths of the input element
  18. Security Headers using <meta>
  19. Web Components FTW!
  20. The Hellish History of HTML: An incomplete and personal account
  21. Back to Basics: 5 HTML attributes for improved accessibility and user experience
  22. The Form Attribute - Enhancing Form Layout Flexibility
  23. You don't need JavaScript for that
  24. The UX of HTML

2022 27

  1. Preventing form submission with zero Javascript
  2. Enforcing better HTML markup with Eleventy
  3. What is the Difference Between Alternative Text, Long Description, and Caption?
  4. A Theory of Web Relativity
  5. Common nesting issues in HTML
  6. Do you know color-scheme?
  7. Mini-guide to add an image
  8. Modern HTML as a foundation for progressive enhancement
  9. 5 HTML elements, And a partridge in a despair tree
  10. Get that marquee ✨AeStHeTiC✨
  11. Table Like It's 2023
  12. One day we'll have a fully customisable select
  13. DOM Clobbering
  14. There can be only one: Options for building “choose one” fields
  15. Dear developer, your assumptions are wrong
  16. You don't need HTML!
  17. Improving SEO without knowing where to start
  18. Meaningful labels using ARIA – or not.
  19. Adding Complementary Performance Data to Your Site
  20. Reading the meter
  21. Landmarks and where to put them
  22. Using SRI to protect from malicious JavaScript
  23. You Don't Need ARIA For That
  24. How to transfigure wireframes into HTML
  25. #32 almost a proper close button
  26. #31 additional “assistance”
  27. #30 Bullet “list”

2021 5

  1. #29 Randomly grouping content
  2. #28 alert level 1
  3. #27 <a6>
  4. #26 HTMHell special: tasty buttons
  5. #25 A link is a button is a link

2020 12

  1. #24 A placeholder is not a label
  2. #23 A card pattern
  3. #22 the good ol’ div link
  4. #21 Legendary legend!
  5. #20 HTMHell special: close buttons
  6. #19 heading in the wrong direction
  7. #18 main divigation
  8. #17 inaccessible cards
  9. #16 alt, no wait…, aria-label, no wait…, alt
  10. #15 letter by letter
  11. #14 not my type
  12. #13 link or label

2019 12

  1. #12 accessible poll yes/no
  2. #11 The trigram for heaven
  3. #10 <section> is no replacement for <div>
  4. #9 Cookie Consent from Hell
  5. #8 anchor tag used as button
  6. #7 multiple duplicate ids and table layout
  7. #6 link with void operator as href value
  8. #5 button-like-link
  9. #4 link-also-button
  10. #3 image-buttons
  11. #2 div with button role
  12. #1 button disguised as a link