Markup from hell

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

  1. #13 link or label

    submitted on by Odepax
    <input type="checkbox" id="accept" required>
    <label for="accept">
    <a href="/legal"> I accept the confidentiality policy and data… </a>
    </label>

  2. #12 accessible poll yes/no

    submitted on by Erik
    <form role="form">
    <h2>Poll title</h2>
    <div id="pollQuestion">Is this accessible?</div>
    <div name="pollGroup" role="radiogroup">
    <div role="radiogroup" aria-label="Poll title">
    <input type="radio" name="poll" aria-labelledby="pollQuestion" value="[object Object]">
    <span>Yes</span>

    <input type="radio" name="poll" aria-labelledby="pollQuestion" value="[object Object]">
    <span>No</span>

    <input type="radio" name="poll" aria-labelledby="pollQuestion" value="[object Object]">
    <span>Maybe</span>

    <input type="radio" name="poll" aria-labelledby="pollQuestion" value="[object Object]">
    <span>Can you repeat the question?</span>
    </div>

    <button type="submit">Vote</button>
    </div>
    </form>

  3. #11 The trigram for heaven

    submitted on by Manuel
    <span class="nav-toggle"> ☰ Menu </span>

  4. <section id="page-top">
    <section data-section-id="page-top" style="display: none;"></section>
    </section>
    <main>
    <section id="main-content">
    <header id="main-header">
    <h1>...</h1>
    <section class="container-fluid">
    <section class="row">
    <article class="content col-sm-12">
    <section class="content-inner">
    <div class="content__body">
    <article class="slider">
    <section class="slide"></section>
    </article>
    </div>
    </section>
    </article>
    </section>
    </section>
    </header>
    </section>
    </main>

  5. #9 Cookie Consent from Hell

    submitted on by Manuel
    <body>
    <header></header>
    <main></main>
    <footer></footer>

    <div class="cookie_consent modal">
    <p>We use cookies…</p>
    <div class="cookie_consent__close">
    <i class="fa fa-times"></i>
    </div>
    <div class="cookie_consent__ok">OK</div>
    </div>
    </body>