Why I work hard to keep my HTML code as clean as possible

I always try to write HTML as clean as possible. For example, I will try to keep the CSS classes to a minimum, use different HTML element tags to make it easier to understand the architecture of the application, etc. It's obviously not something that everyone can get onboard with. But there's clearly benefits to keeping your HTML tidy.

Many HTML tags that were introduced in HTML5 (section, header, footer, etc.) do not bring meaningful differences to the use of divs. To developers, they feel pretty much the same. However, using the right HTML tag will bring clarify the structure of your application. Compare the two:

div soup
<div class='section'> <div class='header'> <span class='title'>The section</span> <a class='close'>X</a> </div> <div class='content'> <p>Some text</p> </div> </div>
<section> <header> <h5>The Section</h5> <button>X</button> </header> <article> <p>Some Text</p> </article> </section>

Even if the example above is quite simple, there's a world of difference on how easy it is to understand the content's architecture. Using the right tags can also help writing CSS and JS.

section > header { padding: 1rem 2rem; font-size: 2rem; } header > h5 { font-size: 1em; } header > button { background: white; border-radius: 50%; border: none; text-transform: uppercase; }
var remove = function() { this.remove(); } document.querySelector('header > button').addEventListener('click', remove);

I'm not saying to not use CSS classes, no. What I'm saying is that CSS classes should be used to add specificity to your elements, not define them.

Get more ideas like this to your inbox

You will never receive spam, ever.