HTMHell homepage
Feed HTMHell on Twitter

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. #10 <section> is no replacement for <div>

    submitted on by Sarah 
    <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. #7 multiple duplicate ids and table layout

    submitted on by Dirty-Co.de 
    <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>