Markup from hell

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

  1. #25 A link is a button is a link

    submitted on by Andrea
    <a tabindex="0" type="button" href="/signup" role="link">
    <span class="focus" tabindex="-1"></span>
    <span>
    <span>
    <span>Sign up</span>
    <i class="icon icon-external-link" aria-hidden="true" role="img"></i>
    </span>
    </span>
    </a>

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

  2. #24 A placeholder is not a label

    submitted on by Manuel
    <input type="text" placeholder="First name">

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

  3. #23 A card pattern

    submitted on by Erik
    <article>
    <div>
    <div class="sr-only">Image</div>
    <img src="/feature-teaser.png" alt="Feature teaser" />
    </div>
    </article>
    <div>
    <span>
    <span>Exciting feature!</span>
    </span>
    <div> This text describes what the feature does! </div>
    <a href="/blog/feature">
    <span>Read more</span>
    <svg viewBox="0 0 9 12" xmlns="http://www.w3.org/2000/svg">
    <path d="M.84 10.59L5.42 6 .84 1.41 2.25 0l6 6-6 6z"></path>
    </svg>
    </a>
    </div>

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

  4. #22 the good ol’ div link

    submitted on by Manuel
    <div>About us</div>

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

  5. #21 Legendary legend!

    submitted on by vavroom
    <button class="panel-heading" tabindex="0" href="#collapse0" aria-expanded="true">
    <legend> Industries Served </legend>
    </button>

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