Markup from hell

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

1. #7 multiple duplicate ids and table layout

   submitted on Oct 29, 2019 by Dirty-Co.de
   skip code sample

   <table>
      <tr id="body">
        <td id="body">
          <table id="body">
            <tr id="body_row">
              <td id="body_left">…</td>
              <td id="body_middle">…</td>
              <td id="body_right">…</td>
            </tr>
          </table>
        </td>
      </tr>
    </table>

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

2. #6 link with void operator as href value

   submitted on Oct 25, 2019 by Sarah
   skip code sample

   <a href="javascript:void(1)" onClick='window.location="index.html"'>Link</a>

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

3. #5 button-like-link

   submitted on Oct 22, 2019 by Vadim
   skip code sample

   <a href="#form" role="button" aria-haspopup="true"> &nbsp;&nbsp;Register&nbsp;&nbsp; </a>

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

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

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