Don’t Mess Up HTML

December 19, 2012
Design - Nifty

Web developers are often concerned with writing efficient and maintainable JavaScript or PHP. When it comes to writing HTML, we tend to have a lazy eye rather than a critical one. Let’s face it, people rarely make huge blunders with HTML. When they do, markup validation usually saves the day. HTML is a easy “coding” language to learn – even school children can pick it up. People who blog or participate in forums usually have some basic knowledge of it. If anyone can write HTML, why is it such a problem?

It’s a known fact that many back-end developers write terrible HTML. It’s not their job; their focus is to get applications or scripts to run smoothly. Without a strong back-end, there’s no point in having a decent front-end right? That is definitely not the case! Ultimately, user experience determines whether a product is usable. That’s why we have created huge distinctions between designers and developers! In all successful companies and businesses, there is no “Renaissance” developer dabbling around with both front-end and back-end development. Experts should stick to what they know best!

Source

Ways We Mess Up HTML

Back in the day, in the time of the original HTML standard, there was little pressure to write code that was cross-browser and cross-device compliant. There weren’t that many tags and CSS properties to weary of! There were no competing browsers with varying layout engines or smartphones/tablets. Well of course, times have changed. Like the typical humans we are, we have created a plethora of applications and devices to further complicate the process of displaying the Internet; introducing more ways to mess up!

HTML Standards

The current HTML standard is HTML5. All of the websites on the Internet, of course, are not written in this standard. Some people stick with HTML4, others stick with XHTML! The biggest issue arises when people mix up the standards. It could be as simple as using <br /> in HTML when it should only be used in XHTML.

Most people who have learned HTML have done so through online tutorials. Each tutorial is filled with biases and the writer’s own interpretation of a certain standard. Usually, the standard isn’t mentioned; so you are left to assume. The only convenient way you can validate which standard you are using is to use a markup validator like W3C. Once you have verified the standard, you have the tedious task of debugging errors. For many, this is how you learn the differences between, for instance, HTML4 and HTML5.

It’s not a crime to rely on a validator to help maintain an HTML standard. Besides, we rely on spell-check and auto-complete. We’re lazy people! Like any type of dependency, our dependency on HTML validators can become unhealthy. HTML, like any other language, is meant to be learned fluently. Only through a fluent understanding can we write good and maintainable code. Then, we can actually maintain a singular HTML standard in our work. An English speaker doesn’t flip-flop between a Southern American accent and an Irish accent!

Tag Overload

Nobody, I repeat nobody, wants to look at a labyrinth of tags. Whether working with tables or divs to wrap layouts, we often create a million and one tags to describe everything single component of a layout. Although this makes it easier to identify the various levels and sub-levels of a layout, an overload of tags makes it difficult to share and maintain code.

Here is code we are all guilty of!

<!DOCTYPE html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

<title>Title</title>
</head>

<body>

<!-- wrapper: center-align entire layout -->
	<div id="wrapper">

<!-- container: contains entire layout with fixed proportions -->
		<div id="container">

<!-- content: contains the two columns -->
			<div id="content">
			
				<div id="sidebar">
				
					<div class="leftSide">
					
					</div>
					
					<div class="rightSide">
					
					</div>

<!-- clear: clears the left and right floats -->
					<div class="clear"></div>
				
				</div>
				
				<div id="main">
				
				
				</div>

				<div class="clear"></div>

			</div>
			
			<div id="footer">
			
				<div class="leftSide">
				
				</div>
				
				<div class="rightSide">
				
				</div>
				
				<div class="clear"></div>
			
			</div>

		</div>
	
	</div>

</body>

</html>

Ultimately, we should be aiming for concise markup. In the CSS, find ways to create as little ids and classes as possible by combining properties. The previous code can be shortened as shown below.

<!DOCTYPE html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

<title>Title</title>
</head>

<body>

<!-- container: center-align layout, contains layout with fixed proportions, clears both left and right floats -->
		<div id="container">

<!-- sidebar: also clears both left and right floats -->
				<div id="sidebar">
				
					<div class="leftSide">
					
					</div>
					
					<div class="rightSide">
					
					</div>
					
				
				</div>
				
				<div id="main">
				
				
				</div>
				
			</div>
			
			<div id="footer">
			
				<div class="leftSide">
				
				</div>
				
				<div class="rightSide">
				
				</div>
			
		</div>
	
</body>

</html>

Templates

Many developers simply do not have the time or money to plan a layout and figure out a design scheme for the CSS. As a result, templates and user interface frameworks like Twitter Bootstrap are used. The biggest issue here is that you are working with someone else’s code. Whenever I use templates, I always feel like every revision I make is a hack. There is never a sense of cohesion with what I have added no matter how valid the markup is. What’s worse is breaking the code! It takes double the time to debug and test someone else’s code than it does with your own. In other words, avoid using HTML templates if you are making drastic modifications. You might as well save yourself the headache and write it from scratch.

Some Parting Words

Although writing HTML doesn’t require the same logical reasoning as required in programming, it doesn’t mean we should slack off. The web has to be usable to everyone on every device and platform. It’s important that designers and developers take the time to review HTML standards and establish a best practices guide for writing HTML. Back-end developers should also be involved in this process! Everyone needs to be on the same page before innovation takes place.

Be bold, take flight — tryangles!