Markup from hell

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

1. #24 A placeholder is not a label

   submitted on Nov 29, 2020 by Manuel
   skip code sample

   <input type="text" placeholder="First name">

   → Details and tips on how to fix the diabolic code of #24.

2. #23 A card pattern

   submitted on Nov 12, 2020 by Erik
   skip code sample

   <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 href="/blog/feature">
       <span>Read more</span>
       <svg viewBox="0 0 9 12" xmlns="http://www.w3.org/2000/svg">
         <path d="M.84 10.59L5.42 6 .84 1.41 2.25 0l6 6-6 6z"></path>
       </svg>
     </a>
   </div>

   → Details and tips on how to fix the diabolic code of #23.

3. #22 the good ol’ div link

   submitted on Oct 14, 2020 by Manuel
   skip code sample

   <div>About us</div>

   → Details and tips on how to fix the diabolic code of #22.

4. #21 Legendary legend!

   submitted on Jul 24, 2020 by vavroom
   skip code sample

   <button class="panel-heading" tabindex="0" href="#collapse0" aria-expanded="true">
     <legend> Industries Served </legend>
   </button>

   → Details and tips on how to fix the diabolic code of #21.

5. #20 HTMHell special: close buttons

   submitted on May 23, 2020 by Manuel

   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 the overlay. This functionality is often limited to mouse users, because most implementations of close buttons suck.

   After less than 2 hours of research, HTMHell presents a collection of 11 different bad practices.

   skip code sample

   <div class="close"></div>

   → Details and tips on how to fix the diabolic code of #20.