I am often surprised by how much bad HTML is out there. Especially HTML that does not use Cascading Style Sheets yet. CSS has been around for over 10 years now! It was added to HTML in 1997 and well-supported (at least reasonably) in web browsers by 2000. I think the reason many people never upgraded is that they either learned HTML before 2000, they learned it from sources (friends, coworkers, internet, legacy code) from before CSS, or they learned just enough to get a site online and never bothered learning the “right way”.

Legacy sites are not always worth the trouble to update—I know I have plenty of old code still floating around out there—so their flaws are understandable. But some folks are carrying around their bad HTML habits still. If you ask them to code a page they probably know that frames should not be used, so they use a table to layout the page instead. They might use <center> when they want text to center. I see bad code and misused tags all the time. You can “view-source” on many major websites and see bad code by people who should know better.

If that sounds like you or someone you know, keep reading, I will try to help you break your bad habits and start good ones.

“Good CSS habits” can mean a lot of things. But at its most basic, it means writing clean, clear, syntactic HTML pages and keeping all style information in external stylesheets. It will take me a few posts, but I want to walk you through all the steps to go from bad HTML to good XHTML/CSS. Walking through each step will give me a chance to show the code while giving you a process you can use to make these changes painlessly.

Here is the HTML we will improve. It contains many of the most common mistakes. You can copy and paste the HTML into a text document to work along with me.

We will start by improving the HTML, then look at CSS techniques later.

Using <p> Tags Correctly

There are many things wrong with this document, but I would say the worst is the incorrect use of <p> tags. <p> is a paragraph tag and it should used around paragraphs of text.

In our page’s menu, it is being used to create a double-line return. Many people mistakenly use <p> this way, as if <br> means one line return and <p> means two.

For now, replace it two <br> tags instead. We will learn an even better way, but at least it actually means “line break”.

Our page uses <p> tags to correctly denote the three paragraphs, but it does not have a closing </p> tag. All tags in HTML that get opened should also be closed.

The appearance did not change, but now it is very clear where each paragraph starts and ends.

These changes are both steps towards our ultimate goal, semantic markup. There are two principles we will follow to get semantic markup:

1. HTML should correctly label the content elements on the page according to their use or purpose. In this case, a paragraph of content is accurately being marked as being a paragraph.
2. HTML should not be used to indicate how content should look. That will become the job of CSS. In our example, we were using a paragraph tag just for the visual effect it gave, even when there was no paragraph in sight.

We will come back to these two principles often.

Self-Closing <br> and <hr> Tags

We now know that: All tags in HTML that get opened should also be closed. So what should we do about our <br> and <hr> tags? Even though it may seem like a stand-alone element, we are opening a tag without closing it.

Using <br></br> is no good—it gives you another line break. Using <hr></hr> works but requires a lot of needless typing.

The correct answer is that these two tags are “self-closing” and you should always write them like <br /> and <hr />. A simple find and replace can help you change them all quickly.

Bold and Italic vs. Strong and Emphasis

Many people still use <bold>, <b> <italic> and <i> to indicate the text they want to be bold and italic. It seems like common sense. What is the problem?

Our goal is fully semantic mark up. What we really mean by “bold” is that we want the text to be “stronger than normal”. In other words, “strong” describes the element’s semantic usage, while “bold” describes its appearance. In some cases, “strong” might be a bolder font weight, but in other cases, it might mean text that is larger, in a different color, with a different background or in a different font-face.

So instead of <bold> and <b> tags, use <strong> tags. By default, <strong> elements will have a bold style. We can use CSS to change their behavior if we decide on a different visual presentation, and our HTML and its semantic meaning will not change. The same is true for <italic> and <i>: use <em> (short for emphasis) instead.

In fact, bold- and italic-tags are no longer part of the latest version of HTML. All browsers still support them and probably will forever, but other applications (search engines, web site analysis tools, IDEs, Dreamweaver, etc.) might not someday. Better to get rid of them now and start a good habit.

Lists

In keeping with the idea of correctly describing the content in our HTML document, let’s take a look at our menu. We have a series of links, indented, with line breaks. It is a list of the pages available for site navigation. A list is a single entity made up of multiple entities. Our original HTML is just one entity after another and there is no single HTML entity to “hold them together”, to indicate that they belong to the same group. It would be useful if we could address (via CSS or JavaScript) both the individuals members of our list and the list as a whole. For example, imagine a JavaScript that would tell all our menu links to appear or disappear.

Well, if it is a list, then why not mark it up as being a list? HTML gives us <ol> (ordered list) and <ul> (unordered list) for that purpose. Since we do not want our list numbered, we should use an unordered list. In our example, we can also remove the two <br /> tags right before the links because the list has a default top margin.

Now it is clear that it is a list of links, our code is much cleaner, and we could use CSS or JavaScript to address the entire list.

You probably noticed we introduced a style change. The default styling for a list is to put a bullet in front of each list item. Even though we are focusing on HTML-only improvements right now, we can sneak in a quick inline-style to correct it.

Clearer Character Entity References

Before we move on to style improvements, let’s look at how to make character entity references clearer. Our document has a character entity reference in the footer (&#169;) which outputs a copyright symbol. While there is nothing technically wrong with using the numeric notation, it is a bit opaque. If you had HTML with both a trademark symbol and a registered trademark symbol, it is hard to tell at a glance which is which.

Each numeric version also has a named version which is easier to remember and easier to read. The meaning of &copy; and &trade; and &reg; are instantly clear.

I won’t list all the entities here, but you can go to Google or Wikipedia and look for “character entity references” to find a complete list.

Next, we will improve our page by starting to use CSS. More soon…

This entry was posted on Thursday, April 2nd, 2009 at 1:47 pm and is filed under CSS, HTML. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.