Markup from hell

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

1. #8 anchor tag used as button

   submitted on Oct 30, 2019 by Sven
   skip code sample

   <a href="#" onclick="modal.open()">Login</a>

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

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

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

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

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