Markup from hell

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

  1. #5 button-like-link

    submitted on by Vadim
    <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.

  2. #4 link-also-button

    submitted on by Hidde
    <a href="https://example.com">
    <button>Example</button>
    </a>

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

  3. #3 image-buttons

    submitted on by Manuel
    <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.

  4. #2 div with button role

    submitted on by Schepp
    <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.

  5. #1 button disguised as a link

    submitted on by Manuel
    <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.