Markup from hell
A collection of bad practices in HTML, copied from real websites.
#22 the good ol’ div link
submitted on by Manuelskip code sample<div>About us</div>
#21 Legendary legend!
submitted on by vavroomskip code sample<button class="panel-heading" tabindex="0" href="#collapse0" aria-expanded="true">
<legend> Industries Served </legend>
</button>#20 HTMHell special: close buttons
submitted on by ManuelThis first HTMHell special inspects one of the most complicated and most controversial patterns in front-end development:
🔥 the close button. 🔥
In modals, ads, and other overlays you often find a button with a close symbol that allows users, or at least some of them, to close the overlay. This functionality is often limited to mouse users, because most implementations of close buttons suck.
After less than 2 hours of research, HTMHell presents a collection of 11 different bad practices.
skip code sample<div class="close"></div>
#19 heading in the wrong direction
submitted on by Šimeskip code sample<h1>Product Status</h1>
<h2>Is the product available?</h2>
<div>
<h3>
<div>
<div>
<i>
<h3 class="message is-success">
It‘s <a>available</a>.
</h3>
</i>
</div>
</div>
</h3>
</div>#18 main divigation
submitted on by Christophskip code sample<div class="nav">
<div>
<div>about</div>
<div>thoughts</div>
</div>
</div>