CodeSOD: Boldly Leaping Over the Span

No one writes HTML anymore. We haven't for years. These days, your HTML is snippets and components, templates and widgets. Someplace in your application chain, whether server-side or client-side, or even as part of a deployment step, if you're using a static site generator, some code mashes those templates together and you get some output.

This has some side effects, like div abuse. Each component needs its own container tag, but we often nest components inside each other. Maybe there's a span in there. If the application is suitably HTML5-y, maybe it's sections instead.

Andy stumbled across a site which was blocking right clicking, so Andy did what any of us would do: pulled up the debugging tools and started exploring the DOM tree.

<h2 class="content-title" style="text-align:center;"> <strong> <span style="font-weight:400"> <span style="font-weight:400"> <span style="font-weight:400"> <span style="font-weight:400"> <span style="font-weight:400"> <span style="font-weight:400"> <span style="font-weight:400"> <span style="font-weight:400"> <span style="font-weight:400"> <span style="font-weight:400"> <span style="font-weight:400"> <span style="font-weight:400"> <span style="font-weight:400"> <span style="font-weight:400"> <span style="font-weight:400"> <span style="font-weight:400"> <span style="font-weight:400"> <span> <span> <span> <span> <span> <span> <span> <span> <span> <span> <span> <span> <font color="#a82e2e" size="6">Welcome to the [redacted]</font> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </strong></h2>

Maybe this is a chain of components, maybe it's a runaway loop, maybe it's just stupid.

With all those font-weight directives stacked up there, I'm tempted to say that's mighty bold, but with a font-weight: 400, that's honestly not bold at all. Well, it's a bold use of span tags, I suppose.

[Advertisement] Ensure your software is built only once and then deployed consistently across environments, by packaging your applications and components. Learn how today!