Markup from hell

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

1. #19 heading in the wrong direction

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

   <h1>Product Status</h1>
   <h2>Is the product available?</h2>
   <div>
     <h3>
       <div>
         <div>
           <i>
             <h3 class="message is-success">
               It‘s <a>available</a>.
             </h3>
           </i>
         </div>
       </div>
     </h3>
   </div>

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

2. #18 main divigation

   submitted on Mar 22, 2020 by Christoph
   skip code sample

   <div class="nav">
     <div>
       <div>about</div>
       <div>thoughts</div>
     </div>
   </div>

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

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

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

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