Markup from hell

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

1. #4 link-also-button

   submitted on Oct 22, 2019 by Hidde
   skip code sample

   <a href="https://example.com">
     <button>Example</button>
   </a>

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

2. #3 image-buttons

   submitted on Oct 22, 2019 by Manuel
   skip code sample

   <img src="/images/edit.gif" onclick="openEditDialog(123)">
   <img src="/images/delete.gif" onclick="openDeleteDialog(123)">

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

3. #2 div with button role

   submitted on Oct 17, 2019 by Schepp
   skip code sample

   <div tabindex="-1">
     <div role="button">
       <svg width="28" height="24"> … </svg>
     </div>
   </div>

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

4. #1 button disguised as a link

   submitted on Oct 17, 2019 by Manuel
   skip code sample

   <button role="link" title="Name of website" tabindex="0">
     <img alt="Name of website" src="logo.jpg" title="Name of website">
   </button>

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