Markup from hell

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

  1. #30 Bullet “list”

    submitted on by Huy Ngo
    <p>
    • HTML
    <br>
    • CSS
    <br>
    • JavaScript
    </p>

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

  2. #29 Randomly grouping content

    submitted on by Manuel
    <section>
    <aside>
    <div>
    <section>
    <header>
    <a href="/">
    <img src="logo.svg" alt="Logo">
    </a>
    </header>
    <main>
    <a href="/services">Services</a>
    <a href="/products">Products</a>
    <a href="/aboutus">Aboutus</a>
    </main>
    <footer></footer>
    </section>
    </div>
    </aside>
    <section>
    <footer></footer>
    <main>
    <h1>Welcome to Hell</h1>
    </main>
    <footer></footer>
    </section>
    </section>

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

  3. #28 alert level 1

    submitted on by Manuel
    <h1 aria-busy="true" aria-live="polite" role="alert" class="sr-only">
    Done
    </h1>

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

  4. #27 <a6>

    submitted on by Hidde
    <h6>Popular Cities</h6>
    <div>
    <h6 class="footerLinks">Amsterdam</h6>
    <h6 class="footerLinks">Rotterdam</h6>
    <h6 class="footerLinks">Utrecht</h6>
    <h6 class="footerLinks">Den Haag</h6>
    <h6 class="footerLinks">Eindhoven</h6>
    </div>

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

  5. #26 HTMHell special: tasty buttons

    submitted on by Manuel

    The second HTMHell special focuses on another highly controversial pattern in front-end development:

    🔥 the burger button. 🔥

    The burger button and his tasty friends (kebab, meatball and bento) usually reveal a list of links when activated. According to our studies, these buttons are highly optimized for mouse and touch users, but lack support for keyboard and screen reader users in most cases.

    After less than 1 hours of research, HTMHell presents a collection of 18 different bad practices found on real websites.

    <div class="burger">
    <span></span>
    <span></span>
    <span></span>
    </div>

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