Markup from hell

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

  1. #31 additional “assistance”

    submitted on by Stefania
    <a href="/contact" aria-label="If you find that you need additional 
    assistance in navigating or accessing the content of this website,
    please call our customer service toll free number 1-800-666-8654309" title="If
    you find that you need additional assistance in navigating or accessing
    the content of this website, please call our customer service
    toll free number 1-800-666-8654309"
    >

    Contact
    </a>
    <a href="/login" aria-label="If you find that you need additional assistance in navigating or accessing the content of this website, please call our customer service toll free number 1-800-666-8654309" title="If you find that you need additional assistance in navigating or accessing the content of this website, please call our customer service toll free number 1-800-666-8654309">
    Login
    </a>

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

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

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

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

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