Markup from hell

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

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

   submitted on Aug 27, 2024 by Moritz Gießmann
   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.

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

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

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

5. #29 Randomly grouping content

   submitted on Dec 10, 2021 by Manuel
   skip code sample

   <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>
             <a href="/aboutus">Aboutus</a>
           </main>
           <footer></footer>
         </section>
       </div>
     </aside>
     <section>
       <footer></footer>
       <main>
         <h1>Welcome to Hell</h1>
       </main>
       <footer></footer>
     </section>
   </section>

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