Markup from hell

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

  1. #11 The trigram for heaven

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

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

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

  4. #8 anchor tag used as button

    submitted on by Sven
    <a href="#" onclick="modal.open()">Login</a>

  5. <table>
    <tr id="body">
    <td id="body">
    <table id="body">
    <tr id="body_row">
    <td id="body_left"></td>
    <td id="body_middle"></td>
    <td id="body_right"></td>
    </tr>
    </table>
    </td>
    </tr>
    </table>