Markup from hell

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

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

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

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

4. #28 alert level 1

   submitted on Nov 28, 2021 by Manuel
   skip code sample

   <h1 aria-busy="true" aria-live="polite" role="alert" class="sr-only">
     Done
   </h1>

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

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