Markup from hell
A collection of bad practices in HTML, copied from real websites.
#10 <section> is no replacement for <div>
submitted on by Sarahskip code sample<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>#9 Cookie Consent from Hell
submitted on by Manuelskip code sample<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>#8 anchor tag used as button
submitted on by Svenskip code sample<a href="#" onclick="modal.open()">Login</a>#7 multiple duplicate ids and table layout
submitted on by Dirty-Co.deskip code sample<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>#6 link with void operator as href value
submitted on by Sarahskip code sample<a href="javascript:void(1)" onClick='window.location="index.html"'>Link</a>