Markup from hell
A collection of bad practices in HTML, copied from real websites.
#13 link or label
submitted on by Odepaxskip code sample<input type="checkbox" id="accept" required>
<label for="accept">
<a href="/legal"> I accept the confidentiality policy and data… </a>
</label>#12 accessible poll yes/no
submitted on by Erikskip code sample<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>#11 The trigram for heaven
submitted on by Manuelskip code sample<span class="nav-toggle"> ☰ Menu </span>#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>