Five Simple Ways to Write Better HTML

In my time as a student, teacher, and co-worker, I have seen and committed a fair share of HTML mistakes. When I originally was learning how to write HTML, there were limited resources available. And the ones that were available, you had difficulty vetting if it could be used as a reliable source (luckily the 2nd HTML book I read was written by a guy whose name started with Z and ended with -eldman).

But we’re here now, and resources are plentiful and vetted! Of the books and articles I’ve read over the years, I noticed a few general HTML coding tips that I have always found to be true.

Here are a few simple ways to write better HTML:

  1. Be an Author: When you write code, think of yourself as an author writing a novel. Don’t be afraid to get words on paper, or in this case, code on the page. But in the same breath, remember to edit. Always strive for brevity in code.
  2. Classes and Ids: When naming ids and classes in HTML, describe the content without regard to size, color, or positioning. For instance, a <div> shouldn’t be named “id=”left-col-red”.” What happens if that <div> moves from the left to the right, and changes its background color from red to blue? Try to identify the content. If the <div> contained a series of external advertisements, it could easily be described as “id=”ext-ads”.” Of course, there are instances where the content may change in the future, which could render the id incorrect, but we have to start somewhere.
  3. Comment for the Future: For arguments sake, let’s assume writing simple web pages may not appear to need comments—if there’s 1 div in the whole web site, I can see when it begins and ends. But you’re not writing for now, you’re writing for later. When you start writing comments into your code even with the most simple web sites or script, the more apt you are to write them in your day-to-day workflow.
  4. Indent: This seems elementary, and it is. Remember to indent code to establish hierarchy and structure. As the author, you may be able to scan and digest your own code, but what about when that code is read by other developers? As a rule of thumb, write code with the idea that another developer will have to read and edit it in the near future.
  5. Focus: Front-end developers become distracted with the latest and greatest JQuery plugin or HTML work-arounds. Although these expedite development efforts, they tend to distract developers from learning and honing necessary front-end development skills. Hacking a plugin is very different then learning to write code from scratch.

And remember, just like any language, you must continue practicing in order to be fluent.

Peter

Written by Peter