Markup from hell

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

1. #34 a button is not a link

   submitted on Nov 26, 2024 by Moritz Glantz
   skip code sample

   <button type="button" onclick="window.open('https://example.com/other-page')">Link target description</button>

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

2. #33 make me one (input) with everything

   submitted on Aug 27, 2024 by Moritz Glantz
   skip code sample

   <label for="textinput">First name</label>
   <input type="text" id="textinput" aria-label="First name" placeholder="First name" title="First name">

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

3. #32 almost a proper close button

   submitted on Jul 18, 2022 by Manuel
   skip code sample

   <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>

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

4. #31 additional “assistance”

   submitted on Apr 12, 2022 by Stefania
   skip code sample

   <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 navigating or accessing 
   the content of this website, please call our customer service 
   toll free number 1-800-666-8654309">
      Contact
    </a>
    <a href="/login" 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 navigating or accessing the content of this website, please call our customer service toll free number 1-800-666-8654309">
      Login
    </a>

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

5. #30 Bullet “list”

   submitted on Jan 13, 2022 by Huy Ngo
   skip code sample

   <p>
     • HTML
     <br>
     • CSS
     <br>
     • JavaScript
   </p>

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