Markup from hell

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

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

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

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

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

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