Markup from hell

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

1. #27 <a6>

   submitted on Nov 21, 2021 by Hidde
   skip code sample

   <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 class="footerLinks">Eindhoven</h6>
   </div>

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

2. #26 HTMHell special: tasty buttons

   submitted on Oct 25, 2021 by Manuel

   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 are highly optimized for mouse and touch users, but lack support for keyboard and screen reader users in most cases.

   After less than 1 hours of research, HTMHell presents a collection of 18 different bad practices found on real websites.

   skip code sample

   <div class="burger">
     <span></span>
     <span></span>
     <span></span>
   </div>

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

3. #25 A link is a button is a link

   submitted on Apr 30, 2021 by Andrea
   skip code sample

   <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" role="img"></i>
       </span>
     </span>
   </a>

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

4. #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.

5. #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.