Markup from hell

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

  1. #20 HTMHell special: close buttons

    submitted on by Manuel

    This first HTMHell special inspects one of the most complicated and most controversial patterns in front-end development:

    🔥 the close button. 🔥

    In modals, ads, and other overlays you often find a button with a close symbol that allows users, or at least some of them, to close the overlay. This functionality is often limited to mouse users, because most implementations of close buttons suck.

    After less than 2 hours of research, HTMHell presents a collection of 10 different bad practices.

    <div class="close"></div>

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

  2. #19 heading in the wrong direction

    submitted on by Šime
    <h1>Product Status</h1>
    <h2>Is the product available?</h2>
    <div>
    <h3>
    <div>
    <div>
    <i>
    <h3 class="message is-success">
    It‘s <a>available</a>.
    </h3>
    </i>
    </div>
    </div>
    </h3>
    </div>

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

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

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

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