The Most Common HTML and CSS Mistakes to Avoid

By / Feb 16, 2010 / Tips
shares

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.

<div>Text inside the div.</div>
<img src="images/imagename.jpg" />

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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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.

<div><strong>text</div></strong>

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.

<DIV></DIV>

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.

<img src="images/headerimage.jpg" />

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:

<a href="link.html" style="color: #000; text-decoration: none;">link name</a>

Not Encoding Special Characters

Characters like “©” and “&” should be shown with the proper HTML code for the character. Here’s a great list of characters and their HTML counterparts that you should use.

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.

About the Author

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.

64 Comments

  1. elmimmo
    February 16, 2010

    Only that self-closing tags (the “~ />” part) is XHTML. Considering where HTML5 is going, I would discourage newbies to write HTML with XHTML syntax, even if valid.

    Reply
    • Dave Kinsella
      February 16, 2010

      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.

      Reply
      • Andrew Pryde
        April 7, 2010

        I was unsure of that. I hope it’s the case becuase it makes sense for elements which don’t contain content to be self-closing as the tags are not enclosing anything. Semantics and all that…

        @Prydie

        Reply
    • Shane Hudson
      February 18, 2010

      I am really hoping that you are not saying HTML 5 does not allow you to write code properly?

      I do not understand why anyone would want to write standard/scruffy HTML, it is disgusting. xHTML looks nice and makes much more sense!

      Reply
  2. elmimmo
    February 16, 2010

    Sorry, but “Encoding Special Characters” is what is a common mistake.

    There is absolutely no reason not to use UTF-8 in HTML code (with proper meta tag given below), which does away with the need to encode special characters (like ©) and enhances code readability.

    Only , and & should be encoded if the purpose is to show HTML code in the rendered page, so as to prevent the renderer from trying to interpret them as tags or entities.

    Reply
    • elmimmo
      February 16, 2010

      Well, too bad, I cannot add the UTF-8 meta tag in the comments. Just google “html meta utf-8″

      Reply
    • Adam
      February 16, 2010

      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.

      Reply
      • madtv
        February 16, 2010

        Maybe in all cases better to recode problematic char to &#xnnnn; unicode sequence (but not & and @, for these use standart code). Just look http://www.unicode.org/charts/ .

        Reply
  3. Ajay
    February 16, 2010

    Very Useful tips for beginner.

    Reply
  4. xam
    February 16, 2010

    Agree with elmimmo. In France we are using utf-8 because of special char like : é è à. when i subscribed to Apple dev site, the special chars turned into and others “@Ä” because they don’t use utf-8.

    Reply
  5. Adam
    February 16, 2010

    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.

    Reply
  6. Kumo
    February 16, 2010

    Neat article. Not verry usefull for hardcore coders but stil a good reminder. The link abbout the DOCTYPE is great!

    http://copypastecharacter.com/ <- this one is also cool for encoded special characters. On MacOS there is also the Symbol Caddy widget.

    Reply
  7. Tom
    February 16, 2010

    Speaking of shorthand code, you can write: padding: 5px 10px 0; instead of padding: 5px 10px 0 10px;

    Reply
    • shpyo
      February 16, 2010

      You right, but little % of developers use that shorthand code. It’s really rare.

      Reply
      • Sean
        February 21, 2010

        I am curious where you get that “fact” from. I use all three versions of the shorthand for padding and margin quite often, depending if the situation allows.

        Reply
  8. behzad
    February 16, 2010

    Huge thanks Shannon, Very Useful Article :)

    Reply
  9. Daniel Long
    February 16, 2010

    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.

    Reply
  10. Mitchell
    February 16, 2010

    I recently wrote 4 rules for CSS development, it’s a bit ranty but I think it makes sense.

    Reply
  11. Michael
    February 16, 2010

    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

    Reply
  12. Dave Kinsella
    February 16, 2010

    The paragraph about positioning is excellent. I don’t think I’ve ever seen CSS positioning explained so concisely before.

    I’m not sure whether it would be all that clear for newbies, but you’ve captured the essence of it really nicely.

    Reply
  13. Matt
    February 16, 2010

    Thanks for the article, Shannon. FYI, your site doesn’t validate. 9 errors in XHTML transitional. :)

    Reply
  14. Jordan Walker
    February 16, 2010

    Things to keep in mind when first starting out.

    Reply
  15. Shannon
    February 16, 2010

    Thanks for all the great feedback! Glad you are enjoying the article.

    @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.

    Reply
  16. Peach
    February 16, 2010

    Nice tips for beginners.

    There’s a way to check that by going to http://validator.w3.org << for the people who do not know.

    Reply
  17. Ian Devlin
    February 16, 2010

    Useful article for beginners for sure. Retweeted!

    Reply
  18. Benny
    February 16, 2010

    Wonderful article! Great job, very well written.

    Reply
  19. New York Web Designer
    February 16, 2010

    Nice round up. Nice article.

    Reply
  20. lgsobalvarro
    February 16, 2010

    Funny thing is she talk about the importance of validating html and css, but snoackstudios.com isn’t valid according W3C.

    Reply
    • Anthony
      August 14, 2010

      Google is not too… lmao

      Reply
  21. Colin
    February 16, 2010

    I like how coding html for email actually breaks a couple of these rules.

    Reply
  22. Val
    February 16, 2010

    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.

    Reply
    • Val
      February 16, 2010

      Well, you ate my code, and don’t provide a preview function. So, just eliminate the example, and take my word for it.

      Reply
      • Anthony
        August 14, 2010

        love it… I get messed up using php when the quotes go nuts.

        Reply
  23. Reno Web Design
    February 16, 2010

    Great tips… liked the explanation of Classes and Ids and using shorthand. Using shorthand for fonts helps a lot.

    Reply
  24. Ronnie Saini
    February 16, 2010

    Thanks for sharing!

    Good information and a check list for reference. I do very less mistakes but this will help me keeping me on my track.

    Regards,
    Ronnie Saini

    Reply
  25. Jonathan
    February 16, 2010

    Wonderful article! hope Ican be that good one day

    Reply
  26. Greg Winiarski
    February 16, 2010

    Ironically valid examples are not so valid at all. tag requires alt attribute to be set.

    Reply
  27. Codesquid
    February 16, 2010

    Nice! A handy checklist for those with bad habits!

    Reply
  28. Chris Raymond
    February 16, 2010

    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.

    Reply
    • Codrin Sava
      February 18, 2010

      Unlike the article itself, your comment is actually helpful, thanks.

      Reply
  29. Shannon
    February 16, 2010

    More good feedback, thanks for joining in the discussion.

    @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.

    Reply
  30. Cristi Antohi
    February 17, 2010

    Poorly “designed” article. Too bad, was a good idea though. Good luck next time.

    Reply
  31. Paavel
    February 17, 2010

    good and useful article

    Reply
  32. Jeff Woodruff
    February 17, 2010

    Not sure if the shorthand padding / margin property syntax was meant to be written as you did but it is a little misleading if people read the order as is:

    The correct order for shorthand css is
    padding: padding-top | padding-right | padding-bottom | padding-left;

    Reply
  33. Schoschie
    February 17, 2010

    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.

    Reply
  34. Johnny
    February 17, 2010

    A pretty solid list. Good for beginners :)

    Reply
  35. Shannon
    February 18, 2010

    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!

    Reply
  36. Jason Gross
    February 19, 2010

    Great article with some excellent points covered. Something that popped into my mind while reading was that a lot of people will get tripped up on class and ID naming inside of your style sheet.

    Not only does everything need a unique name but remember that you can not start a name with a number! Something that has probably happened to a lot of designers and developers once or twice.

    Reply
  37. nikhil
    February 20, 2010

    A very useful article,must followed by every designer…thankx for sharing it.

    Reply
  38. Ken
    February 20, 2010

    Even that I am beyond being a beginner I’ve got your article very interesting. By the way, I still forget to close tags from time to time :(

    Reply
  39. Sean
    February 21, 2010

    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.

    Reply
  40. wien
    February 23, 2010

    really thanks, its very helpful

    Reply
  41. lono
    February 26, 2010

    being a beginner i found this very helpful… thanks for sharing!

    Reply
  42. Avangelist
    March 4, 2010

    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.

    Nice list of very obvious things which I see people miss daily.

    Reply
  43. Greg
    March 9, 2010

    I have to say I like the comments on this site just as much as the articles.

    Reply
  44. Olivier FAURAX
    March 10, 2010

    “Name your divs specific things like #home-left-column which is better than just #left.”

    And even better: #home-column1
    Because there will be a time when you’ll want to change your CSS to put these column on the right….

    Reply
  45. Mark Kenny
    March 25, 2010

    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’.

    They’re not just for identifying single/multiple elements.

    Sounds fussy, but just giving a bit more background ;)

    Reply
  46. NiteLabs
    April 17, 2010

    @Using Shortened Color Declarations
    Shortened color declaration can only be used for pairs: 00 33 66 99 CC FF.
    Therefore, abbreviation 03F representing RGB hex colour value 0033FF is valid. However, A03 for AA0033 is not!

    Reply
  47. Chris Hester
    June 9, 2010

    I disagree. I just tested A03 and it came up with the same colour as AA0033. Any pair of valid hex values can be shortened, from 0 to 9 and A to F.

    Reply
  48. Jeff
    July 1, 2010

    [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.

    Reply
  49. Ari
    August 13, 2010

    Nice

    Reply
  50. Edwin
    August 26, 2010

    forgetting to close tags is indeed one of my most common mistakes. Nice tips

    Reply
  51. Kosmetyki
    December 30, 2010

    As for me – person who just made first steps in websites design it is just great stuff. Hope to see more articles like ths in the future.

    Reply
  52. Ivan Tsankov
    February 24, 2011

    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.

    Reply

Leave a Reply