Markup from hell

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

  1. #18 main divigation

    submitted on by Christoph
    <div class="nav">
    <div>
    <div>about</div>
    <div>thoughts</div>
    </div>
    </div>

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

  2. #17 inaccessible cards

    submitted on by Šime
    <section>
    <section>
    <h2>Overview</h2>
    <figure class="card" data-url="image1.html" style="background: url(image1.jpg)">
    <figcaption>
    <h4>My heading</h4>
    <article>Teasertext...</article>
    </figcaption>
    </figure>
    <figure class="card" data-url="image2.html" style="background: url(image2.jpg)"></figure>
    </section>
    </section>

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

  3. #16 alt, no wait…, aria-label, no wait…, alt

    submitted on by Spell
    <a tabindex="0">
    <div alt="Browser Wars: The Last Engine" aria-label="Browser Wars: The Last Engine">
    <div>
    <img alt="Browser Wars: The Last Engine" src="thumbnail.jpg">
    </div>
    </div>
    </a>

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

  4. #15 letter by letter

    submitted on by Claire
    <h3>
    <div style="display: block; text-align: start; position: relative;" class="title">
    <div style="position: relative; display: inline-block; transform: rotateX(90deg); transform-origin: 50% 50% -30.8917px;" class="char">H</div>
    <div style="position: relative; display: inline-block; transform: rotateX(90deg); transform-origin: 50% 50% -30.8917px;" class="char">e</div>
    <div style="position: relative; display: inline-block; transform: rotateX(90deg); transform-origin: 50% 50% -30.8917px;" class="char">a</div>
    <div style="position: relative; display: inline-block; transform: rotateX(90deg); transform-origin: 50% 50% -30.8917px;" class="char">d</div>
    <div style="position: relative; display: inline-block; transform: rotateX(90deg); transform-origin: 50% 50% -30.8917px;" class="char">i</div>
    <div style="position: relative; display: inline-block; transform: rotateX(90deg); transform-origin: 50% 50% -30.8917px;" class="char">n</div>
    <div style="position: relative; display: inline-block; transform: rotateX(90deg); transform-origin: 50% 50% -30.8917px;" class="char">g</div>
    </div>
    </h3>

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

  5. #14 not my type

    submitted on by Manuel
    <a type="button" class="button" href="/signup" tabindex="-1">Sign up</a>

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