The Most Common HTML and CSS Mistakes to Avoid

Beginners through advanced coders make mistakes in their HTML and CSS files, either through carelessness or lack of experience. Clean code is very important though and will help further your skills as a developer, as well as save you time in editing later on! It never hurts to review if you’re a skilled developer, many mistakes are caused by going too quickly and not practicing good coding skills from the beginning. Here’s a helpful list of common mistakes and missteps that I’ve encountered through my own work, as well as working with others.

HTML Mistakes

Forgetting to Close a Tag

This is very common, especially in beginners. Several tags require closing tags such as divs, strong tags, and links to name a few. Other tags require a closing slash to end the line such as an img tag.

Text inside the div.

Incorrect DOCTYPE

HTML requires that you start out the document with the correct DOCTYPE declaration. It needs to be before anything else in the code, starting the document by declaring what type of HTML you’re using. Here’s the DOCTYPE for XHTML 1.0 Transitional.

Improperly nesting tags

It’s very important to open and close tags in the proper order. Once something (for example a div) has opened, it must close before anything above it can close. The following is incorrect.

text

Capitalizing tags

This is just considered bad practice, but won’t result in your code not being validated. You should always use lowercase for tags like divs, links, and images. The following is incorrect.

Forgetting to open or close quotes

I’ve seen this a lot in beginners and will result in broken code and things not functioning properly. HTML requires double quotes that open and close correctly. Here’s an example of correct usage.

Using Inline Styles

This is another one that is considered bad practice. Inline styles do work but will result in headaches later on! Items should be styled globally through an external stylesheet. It will be much easier to edit and add styles to in the future. An example of inline styles:

Not Encoding Special Characters

Confusing Classes and Ids

Classes are for items that are used more than once on one page. This can be a link style that you’ll call in multiple times on one page but doesn’t follow the global link styling. Ids are items that are called in just once, like the header div. Classes and ids are often overused and used in unnecessary places as well. Stick to the minimum amount of classifications that you need.

CSS

Forgetting to Close Things Properly

Each div or item called in starts with the opening curly bracket and ends with the closing curly bracket. Each style called in needs to end with a semicolon. The last declaration within an item doesn’t need a semicolon, but it’s best to use it in case you plan on adding more items later on, you may forget to add it back in. An example of proper use:

#divname {
width: 40px;
height: 30px;
}

Condensing your stylesheet and putting all declarations for a div on one line is up for debate. I prefer to put each declaration on its own line, I think it’s easier to edit that way, but some may say that it just produces longer code.

Not Using Global Styles

Many things should be styled globally like paragraph and heading styles for text as well as link styles. This will reduce the risk of mistakes and will also cut down on the amount of code in your stylesheet.

Not Using Unique Names for Ids and Classes

It’s very important to choose names that are unique so that it’s easy to edit later on, and easy to identify in your stylesheet. Name your divs specific things like #home-left-column which is better than just #left.

Not Using Shorthand Code

Shorthand code is another way to condense your stylesheet, which is helpful for speeding up user load times as well as finding things when you’re editing later on. Instead of calling in padding-top, -left, -bottom, and -right you can just use:

padding: 5px 10px 0 10px;

Shorthand code can be used for many declarations including: padding, margin, border, and font.

Not Using Shortened Color Declarations

Hex numbers that repeat like #ffffff and #000000 can be condensed to #fff and #000. This is another way to condense your code and keep things short and easy to look at.

Incorrectly Using Positioning

Positioning is tough to understand when you’re first starting out with CSS. Your choices are static, relative, absolute, and fixed. Static is the default option and is positioned according to the normal page flow. A relative item is positioned relative to itself, meaning you can move it up, down, left or right, based on where it would normally sit. Absolute allows you to place an item anywhere on the page, and is the most misused positioning statement. The values you set for it will be relative to the last parent item with relative or absolute, and if there aren’t any, it defaults back to the html tag, allowing you to position it anywhere by declaring top left right or bottom values. Fixed is positioned relative to the browser window, so an item will stay in place if a user has to scroll. Learning how to use positioning correctly is important, but shouldn’t be used excessively. I rarely use these at all in my stylesheets.

Validate

Validating your HTML and CSS files will help in reducing errors and figuring out where a problem might be coming from. Your website may function correctly with some of the common HTML and CSS mistakes, but it doesn’t make it good practice or valid code. The validator will help identify these problems and you’ll be able to adjust the way you code for the future.

More Resources

Many of us are guilty of these HTML and CSS errors, myself included! We can only strive to learn from our mistakes and practice better coding in the future. Cleaning up your code will help you further your coding skills and allow you to create better sites with more functionality for your users.

Shannon Noack is a designer in North Dakota and the Creative Director of Snoack Studios. Designing is her passion in life, she loves to create websites, logos, print work, you name it. She blogs regularly on the Snoack Studios Blog and you can connect with her on Twitter as well.

As far as I’m aware XHTML syntax will still be supported in HTML5, so self closing tags aren’t a problem. Personally I find them a good way to indicate that there’s no closing tag expected – helpful when scouring code for mistakes.

Agreed, although there are times when it will save you a mountain of pain. Most notably is when you have a site backed by a content management system. I have been bitten by encoding issues so many times, I’ve lost count. Sometimes its the least painful to go with the lowest common denominator and use entities.

However, you should always use the numerical entities for anything other than amp, quot, apos, lt and gt as they are only defined for HTML and if your content is going over an RSS feed -which is XML- things may not appear on the other end the way you expect.

Shorthand code can have unexpected dangers so you should not use them indiscriminately. This is especially true of the background shortcut.

If all you want to set is the background color, then just set the background-color. If you use background then you also override the background-image, -position and -repeat properties which may have been set by a different rule, especially if you’re using the Cascade efficiently (a best practice that should be mentioned here).

The best practice is only to use the shortcut if you set all the properties contained in the shortcut. The semantics of margin and padding guarantee this, but the others allow you to have unintended side effects.

This post makes a great read and is a great resource for any problems with web design. I think the main points here to build sites and make sure they have valid html/xhtml and css. Another great technique which reduces the amount of code is using shorthand css styles.

Don’t forget about clearing floats – a lot of newbies can spend ages trying to figure out why their layout is screwed because of all the floats they’ve got going on – either float parent element or apply overflow:hidden to fix

@Michael – excellent point about floats, they are a major source of grief for people starting out!

@Matt – how did I know someone would point out these things? 😉 Yes things don’t entirely validate all the time, my site is valid up to the point where I’m happy with it. The invalid things are from my stat counter code actually and the stat counter was more important to me than the total validation.

Re #5, Forgetting to open or close quotes: You say “HTML requires double quotes that open and close correctly”. Fix this to say “HTML requires quotes…”: one may use either single or double quotes in attributes, as long as they’re balanced. In fact, it’s important to be able to use them interchangeably, to make generating dynamic content easier. If you use a programming language (e.g. PHP or JavaScript) to generate HTML, you’ll often need to do something like
$start_tag = “”;
or
$start_tag = ”;

This works because the class attribute’s value can be enclosed in either single or double quotes.

I would discourage using presentational names for divs, such as left or even home-left-column. What if in the future that column moves to the right?

Instead, my practice is to name them semantically; for example, I am working on a site with 2 sidebars, one currently to the left, the other to the right. I named them #sidebar-details (because it includes information details on the main article), and #sidebar-utilities, which includes downloads, a sharing widget, and links to related content.

That way, should the client decide she wants the sidebars in a different order, they still are named for their meaning, not their placement. Just imagine 2 years from now, when the properties for the sidebar named left-column actually apply to a column that is now on the right hand side. Confusion ensues.

@Val – You are correct for some other coding languages, they just require quotes, single or double. Straight HTML requires double quotes though, that’s all we covered in this article.

@Chris Raymond – Good ideas for div naming conventions. I haven’t run into clients making changes like that on a 2 year old site, that doesn’t sound like very much fun! But it is best to be prepared, thanks for your ideas.

Good article, with some minor corrections (mostly already noted in comments above):

— Capitalizing tags: when using XHTML, tags *have* to be lower-case, otherwise the code will not validate. In HTML 4, you can freely mix case.

— Not Encoding Special Characters: actually, there is no longer a need to use HTML entities if your code uses the right text encoding and appropriate encoding header. The de-facto standard encoding today is UTF-8, which is the most space-efficient way to encode Unicode characters. In Unicode, you can use practically any symbol (glyph, character) of the world’s languages, plus additional mathematical, musical symbols and much more. (Although obiously not all fonts contain glyphs for all the existing codes!)

— Not Using Unique Names for Ids and Classes: not sure what you mean by “unique”, but only IDs have to be unique (only used once).

— Not Using Shorthand Code: be aware that some broken or old browsers/parsers cannot handle shorthand properties correctly. This is mostly the case with HTML e-mail.

— Incorrectly Using Positioning: »Learning how to use positioning correctly is important, but shouldn’t be used excessively. I rarely use these at all in my stylesheets.« – there are cases where you cannot get around using positioning, such as when you wish to layer elements on top of one another. Also, the z-index property only works in combination with position.

Great feedback from everyone, it’s great to see so many people getting into the discussion.

@Jeff Woodruff – you are correct, I didn’t mention the order that padding and margins go in, I assumed everyone reading this article would know that, but I shouldn’t assume! Thanks for adding that to the discussion.

@Schoschie – thank you for your input. To clarify, the point of using unique names for ids and classes is to help you find things in your stylesheets clearly. The more unique and descriptive the name, the better. This isn’t a requirement of course, just something to help you out as a developer. Hope that helps!

Although I agree with not using inline styles if it can be helped, I have found times where it is useful. In particular, when I need a caption to go along with an image, but I do not want that caption to be wider than the image, I will tend to wrap both image and caption in a div, and then use an inline to set the width of that div to the same as the image.

Yes, never use inline-styles. Of course if you are manipulating elements with server side code, then you have no choice until js or a js lib starts magically updating a stylesheet rather than an element within the DOM.

HTML is markup, meaning that it has semantic meaning. It’s more for naming what different parts of a document do. So … classes are for categories of elements (e.g. date, section-header, post-footer), but IDs are for giving individual names to elements, eg ‘header’, ‘content’.

[quote]Name your divs specific things like #home-left-column which is better than just #left.[[/quote]

Others may have brought this up already, but I haven’t read all the comments before adding my .02 cents. Forgive me if this is redundant, but…

While I agree about using unique names for IDs and classes, I disagree with the naming convention you suggested. In the example given, it was suggested to name the ID as “#home-left-column.” again, I agree this is better than “#left,” but if you want to use this style over, then you have to fetch it by that name, even if the same styles are used in, say, the left footer column. In my opinion, it would be better to name it as, say, “#teaser1” or “#hotspot” or even “#left-column” or anything that describes how it’s used or what it’s used for, just try to avoid naming according to where it’s used.

Cool stuff! Of course there’s more crucial HTML/CSS mistakes to avoid like:
Overuse of classes,Use of unnecessary Meta tags(can slow down the loading), using Embed or Object tag (Unusable now and some browser won’t render them properly),
The Blink tag (users won’t like it I assure you).
Using tables is another bad practice, except using it for displaying data and info.