The Value of Good HTML Markup

In the constantly evolving web industry its quite common to overlook the value of good HTML markup. From small landing pages to huge websites, the variance and quality of HTML markup across the web is quite scattered.

Bad HTML markup is often the product of inexperienced coders/designers, tight deadlines, shifted priorities, poor compression software, or a combination of these and many other factors! In any event, writing sloppy HTML markup is harmful to your project and/or organization and here’s why:

1) It can Break Web Pages

It’s quite common to see UI inconsistencies in a website/app between various browsers (especially Internet Explorer!). Sometimes these are due to the different rendering engines and built-in browser rules, however, more often than not bad HTML can break web pages and/or create inconsistencies between browsers. Something as simple as missing a closing </div> tag can do a lot of damage!

2) It Slows Down Development

Digging through sloppy HTML creates more work for a front-end developer. We refer to this is as bad readability. If the markup was readable – clean, neat, and well commented – things would be much easier and faster to work on. See the examples below:

Good Markup

<div class="container">
	<div class="row">
		<div class="col-sm-8">
			<h1>Page Header</h1>
			<p>Some text...</p>
		</div>
		<!--/.col-sm-8-->
		<div class="col-sm-4">
			<h3>Sidebar</h3>
			<ul>
				<li><a href="#">Link</a></li>
				<li><a href="#">Link</a></li>
				<li><a href="#">Link</a></li>
			</ul>
		</div>
		<!--/.col-sm-4-->
	</div>
	<!--/.row-->
</div>
<!--/.container-->

Bad Markup

<div class="container">
<div class="row">
<div class="col-sm-8">
<h1>Page Header</h1>
<p>Some text...</p>
</div>
<div class="col-sm-4">
<h3>Sidebar</h3>
<ul><li><a href="#">Link</a></li><li><a href="#">Link</a></li><li><a href="#">Link</a></li></ul>
</div>
</div>
</div>

This extra “due diligence” is often over-looked and blamed on having “too many cooks in the kitchen” (many developers working in the same code base over time), which is a lousy excuse. Big projects will ALWAYS have multiple developer involvement over time, and 99% of web developers out there are familiar with code commenting. So take the extra 10 seconds to comment on your closed tags. It will save someone a lot of time in the long run.

3) It’s not Sustainable

Using bad HTML markup will only create more headaches down the road. Deprecated tags, for example, may have default browser styling that you’ve over-written in your stylesheets… then down the road when you decide to clean them up your website pukes at you. This is fairly common and a big reason why major redesigns are avoided. However, the longer you wait to do house-keeping the bigger the problems will grow. That’s almost always guaranteed. Instead of putting it on the back-burner, take time to gradually clean up your code base and things will be much smoother when you do decide to do a major over-haul.

4) It’s Contagious!

When developers are on tight deadlines they tend to create “spaghetti code” – code that’s whipped together to get the job done. And if one developer does it there’s several more that are sure to follow. This happens ALL the time. We tell ourselves it’s okay since someone else lead the way, when in reality it’s definitely NOT okay. So keep in mind that the code you write will surely be visible [and influential] to someone else down the road.

Conclusion

Those are just a few of the many reasons to put more value on good HTML markup. Depending on your project/organization size, the time and cost savings could be huge. On top of that, having clean code will portray that you have your act together and attract better front-end developers over time. Bad HTML = bad news. Period. 🙂

Author

Ali Jafarian

Ali is a father, husband and serial entrepreneur with a deep drive to create. He writes, records, codes and builds things to inspire the artist in all of us.