Markup from hell

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

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

#24 A placeholder is not a label
submitted on Nov 29, 2020 by Manuel
skip code sample
```
<input type="text" placeholder="First name">
```
Details and tips on how to fix the diabolic code of #24.

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

#22 the good ol’ div link
submitted on Oct 14, 2020 by Manuel
skip code sample
```
<div>About us</div>
```
Details and tips on how to fix the diabolic code of #22.

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

Markup from hell

#25 A link is a button is a link

#24 A placeholder is not a label

#23 A card pattern

#22 the good ol’ div link

#21 Legendary legend!