Markup from hell

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

1. #17 inaccessible cards

   submitted on Mar 14, 2020 by Šime
   skip code sample

   <section>
     <section>
       <h2>Overview</h2>
       <figure class="card" data-url="image1.html" style="background: url(image1.jpg)">
         <figcaption>
           <h4>My heading</h4>
           <article>Teasertext...</article>
         </figcaption>
       </figure>
       <figure class="card" data-url="image2.html" style="background: url(image2.jpg)"> … </figure>
     </section>
   </section>

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

2. #16 alt, no wait…, aria-label, no wait…, alt

   submitted on Feb 09, 2020 by Spell
   skip code sample

   <a tabindex="0">
     <div alt="Browser Wars: The Last Engine" aria-label="Browser Wars: The Last Engine">
       <div>
         <img alt="Browser Wars: The Last Engine" src="thumbnail.jpg">
       </div>
     </div>
   </a>

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

3. #15 letter by letter

   submitted on Jan 24, 2020 by Claire
   skip code sample

   <h3>
     <div style="display: block; text-align: start; position: relative;" class="title">
       <div style="position: relative; display: inline-block; transform: rotateX(90deg); transform-origin: 50% 50% -30.8917px;" class="char">H</div>
       <div style="position: relative; display: inline-block; transform: rotateX(90deg); transform-origin: 50% 50% -30.8917px;" class="char">e</div>
       <div style="position: relative; display: inline-block; transform: rotateX(90deg); transform-origin: 50% 50% -30.8917px;" class="char">a</div>
       <div style="position: relative; display: inline-block; transform: rotateX(90deg); transform-origin: 50% 50% -30.8917px;" class="char">d</div>
       <div style="position: relative; display: inline-block; transform: rotateX(90deg); transform-origin: 50% 50% -30.8917px;" class="char">i</div>
       <div style="position: relative; display: inline-block; transform: rotateX(90deg); transform-origin: 50% 50% -30.8917px;" class="char">n</div>
       <div style="position: relative; display: inline-block; transform: rotateX(90deg); transform-origin: 50% 50% -30.8917px;" class="char">g</div>
     </div>
   </h3>

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

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

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