Writing HTML Right

One of the things that really bothers me in today’s web environment, is that it seems like everything has been made generic. I’ve been noticing an increasing number of websites that use class names like col-md-4 or some other meaningless class name like that one. There is nothing wrong with this, until you try to automate a task such as scrapping a website.

I’ve talked about web scrapping in the past, and I’ve also talked about how the semantic web is just a dream that we should be forgetting about. However, we shouldn’t go around giving only meaningless class names to our tags just because we don’t care much about a semantic web.

When I work on a website, I write the markup first not really caring how I’m going to display it. That is the beauty of CSS, and that is why a few years ago the CSS Zen Garden was such a big deal. When we write markup we shouldn’t care about what the element that we are describing will look like, but rather about what it is. This sounds a lot like I’m going back to web semantics, and maybe I am, but just a little bit, and not for the sake of semantics, but for the sake of separation of concerns.

The whole point of having CSS live in a different space from HTML was to keep them separate, but now we are tying them up together very tightly. This is not good.

The next time you create a website, try this:

  1. Get out your text editor, and write markup.
  2. For every tag you write, think about what it describes, and assign a class name to it that describes that. For example if the element you are writing markup for is a sidebar widget, then give it a class of widget.
  3. Do number 2 for each tag you write. If you cannot think about what a tag is doing there, it may not be needed.
  4. Use IDs. I know a lot of people nowadays say you should not use IDs in your CSS. Not using IDs in your CSS is probably a good advise, but you are writing HTML here.

You should also make sure you are using the correct tag. There are a lot of tags in HTML, and you should always make sure you are using the correct one that describes what is going on in your markup. A few years ago, a group of people decided that the web needed badly an article tag, so they added it. Personally, I think it is stupid, but I use it because it conveys more meaning that a generic div tag. The reasons why I think it is stupid that HTML 5 implements a bunch of new tags are outside the scope of this article, so I won’t go into that, but the point is that if there is something available for you to use, you should be using it.

Here is an exercise you can try:

Write a simple page using nothing but div tags. This page should be simple, but still have a variety of things like some title, a sidebar, maybe some quote from a famous person, or some contact information; just add anything you think of, but use only div tags. Once you are happy with your page, open it up in a browser and try to make sense of it. You can even take a screenshot of it.

After looking at your page for a little bit, go back, and start replacing the div tags for something more meaningful. For example, if you have a title, use and h1 tag, or if you have a a paragraph, use a p tag. Look at each div tag you wrote, and think about what it is doing, then, find the tag that better fits that description. For a list of html5 tags, you can go here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element and for a list of tags organized semantically, you can go here: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/HTML5_element_list

Once you are done, look at your page in the browser again, and you will notice the huge difference that using the right tag does.

There is a lot more to writing HTML than this, but one thing is certain. When you write HTML you should think about content, not presentation. HTML describes what something is. After you are done, you may go back and add some classes that aid you in your CSS such as classes for columns, or font awesome classes, but do that only once you’ve made sure your HTML is marked up, properly.