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:
link name
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
- 12 Common HTML Mistakes
- 10 HTML Mistakes that Should be Avoided
- Ten Common CSS Mistakes
- CSS Shorthand Guide
- CSS Beginner Mistakes
- CSS Cheat Sheet
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.
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.
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.
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
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!
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.
Well, too bad, I cannot add the UTF-8 meta tag in the comments. Just google “html meta utf-8”
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.
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/ .
Very Useful tips for beginner.
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.
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.
Neat article. Not verry usefull for hardcore coders but stil a good reminder. The link abbout the DOCTYPE is great!
https://copypastecharacter.com/ <- this one is also cool for encoded special characters. On MacOS there is also the Symbol Caddy widget.
Speaking of shorthand code, you can write: padding: 5px 10px 0; instead of padding: 5px 10px 0 10px;
You right, but little % of developers use that shorthand code. It’s really rare.
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.
Huge thanks Shannon, Very Useful Article 🙂
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.
I recently wrote 4 rules for CSS development, it’s a bit ranty but I think it makes sense.
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
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.
Thanks for the article, Shannon. FYI, your site doesn’t validate. 9 errors in XHTML transitional. 🙂
Things to keep in mind when first starting out.
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.
Nice tips for beginners.
There’s a way to check that by going to https://validator.w3.org << for the people who do not know.
Useful article for beginners for sure. Retweeted!
Wonderful article! Great job, very well written.
Nice round up. Nice article.
Funny thing is she talk about the importance of validating html and css, but snoackstudios.com isn’t valid according W3C.
Google is not too… lmao
I like how coding html for email actually breaks a couple of these rules.
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.
Well, you ate my code, and don’t provide a preview function. So, just eliminate the example, and take my word for it.
love it… I get messed up using php when the quotes go nuts.
Great tips… liked the explanation of Classes and Ids and using shorthand. Using shorthand for fonts helps a lot.
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
Wonderful article! hope Ican be that good one day
Ironically valid examples are not so valid at all. tag requires alt attribute to be set.
Nice! A handy checklist for those with bad habits!
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.
Unlike the article itself, your comment is actually helpful, thanks.
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.
Poorly “designed” article. Too bad, was a good idea though. Good luck next time.
good and useful article
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;
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.
A pretty solid list. Good for beginners 🙂
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!
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.
A very useful article,must followed by every designer…thankx for sharing it.
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 🙁
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.
really thanks, its very helpful
being a beginner i found this very helpful… thanks for sharing!
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.
I have to say I like the comments on this site just as much as the articles.
“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….
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 😉
@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!
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.
[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.
Nice
forgetting to close tags is indeed one of my most common mistakes. Nice tips
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.
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.