Markup from hell

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

1. #14 not my type

   submitted on Jan 17, 2020 by Manuel
   skip code sample

   <a type="button" class="button" href="/signup" tabindex="-1">Sign up</a>

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

2. #13 link or label

   submitted on Jan 15, 2020 by Odepax
   skip code sample

   <input type="checkbox" id="accept" required>
   <label for="accept">
     <a href="/legal"> I accept the confidentiality policy and data… </a>
   </label>

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

3. #12 accessible poll yes/no

   submitted on Dec 03, 2019 by Erik
   skip code sample

   <form role="form">
     <h2>Poll title</h2>
     <div id="pollQuestion">Is this accessible?</div>
     <div name="pollGroup" role="radiogroup">
       <div role="radiogroup" aria-label="Poll title">
         <input type="radio" name="poll" aria-labelledby="pollQuestion" value="[object Object]">
         <span>Yes</span>
   
         <input type="radio" name="poll" aria-labelledby="pollQuestion" value="[object Object]">
         <span>No</span>
   
         <input type="radio" name="poll" aria-labelledby="pollQuestion" value="[object Object]">
         <span>Maybe</span>
   
         <input type="radio" name="poll" aria-labelledby="pollQuestion" value="[object Object]">
         <span>Can you repeat the question?</span>
       </div>
   
       <button type="submit">Vote</button>
     </div>
   </form>

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

4. #11 The trigram for heaven

   submitted on Nov 29, 2019 by Manuel
   skip code sample

   <span class="nav-toggle"> ☰ Menu </span>

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

5. #10 <section> is no replacement for <div>

   submitted on Nov 22, 2019 by Sarah
   skip code sample

   <section id="page-top">
     <section data-section-id="page-top" style="display: none;"></section>
   </section>
   <main>
     <section id="main-content">
       <header id="main-header">
         <h1>...</h1>
         <section class="container-fluid">
           <section class="row">
             <article class="content col-sm-12">
               <section class="content-inner">
                 <div class="content__body">
                   <article class="slider">
                     <section class="slide"> … </section>
                   </article>
                 </div>
               </section>
             </article>
           </section>
         </section>
       </header>
     </section>
   </main>

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