The Most Common HTML and CSS Mistakes to Avoid

The Most Common HTML and CSS Mistakes to Avoid:
The main purpose of this thread is to point out the common mistake made in both HTML and CSS and help them correct in the future. Hope that these information are helpful.

HTML Mistakes:
Following article is going to explain clearly/briefly about the Common mistakes made in the HTML.

1. Forgetting to close a tag:
This mistake is most common for beginners. Closing Tags such as divs, strong tags, and links are required. Some tags require a slash tag for closing.

2. Incorrect DOCTYPE:
It is necessary to declare a correct DOCTYPE declaration for HTML. So you should declare what type of HTML you are using at the beginning itself.

3. Improperly nesting tags:
The open and close tags should be in the correct order. Each division should be opened and closed properly without involving other divisions in it.

4. Capitalizing tags:
You should not use capitalized tags in your code, because it will not be validated. So, you should use only lowercase characters.

5. Forgetting to open or close quotes:
In HTML, the open and close double quotes must be placed correctly or it will not function properly. This is most common mistake for beginners.

6. Using Inline Styles:
You should not use inline styles since it will end up with an error message. Use external stylesheet to stylize your items. Editing and adding styles is an easier technique.

7. Not Encoding Special Characters:
Characters such as “ &“, etc., must be shown in proper HTML code for the characters.

8. Confusing classes and Ids:
The items are grouped with classes which will be called several times on a single page. Classes can be link style which will be called for multiple times. Like the headers, Ids are the items that are called only once. We use classes and ids in unnecessary places. Try to minimize the amount of classifications.


CSS MISTAKES:
Following article is going to explain clearly/briefly about the Common mistakes made in the CSS.

1. Forgetting to close things properly:
Every item or div which are called in should start and end with the opening and ending curly brackets. End the styles with a semicolon. There is no need of semicolon for the last declaration within an item.

2. Not using Global Styles:
The paragraphs and heading styles should be styled globally. This idea will reduce the chances of mistakes and will minimize the size of code.

3. Not using Unique names for Ids and Classes:
The names and keywords should be unique so that there will be no problem in identifying the items.

4. Not using shorthand code:
Use shorthand code to compress your code which will be helpful for speeding the loading time and easy editing. You can use shorthand code for declarations such as font, padding, border, margin, etc.

5. Not using Shortened Color Declarations:
You can condense the hexadecimal numbers such as #fffff and #00000 to #fff and #000. This is one of the ways to condense your code length.

6. Incorrectly using Positioning:
It is tough to understand the positions for beginners with CSS. Your choices are static, relative, absolute and fixed. The default option is static and it will be positioned according to page flow. You can place an item wherever you want using Absolute. The values for the absolute will depend upon the parent item. Fixed is used to make stay an element in the page even if the user scrolls down the page. But these options should not used excessively since it won’t look good.

7. Validate:
The errors in your code can be reduced by validating your HTML and CSS files. The problems are identified by the validator and so it will allow you to adjust your code.

I hope that I have given all the common mistakes. If I have missed out any please add those in the comment and also correct my mistakes in this thread.

 

While the tips are mostly good, I'm gonna point out a couple things that are... mostly wrong

No. As long as you're using HTML, and not XHTML, no tags needs a slash (or rather />) for closing. They're either self-contained (like <input> or need a closing tag, like <div></div>

While this is correct, there is no reason to use anything else than the HTML5 doctype declaration - it's perfectly backwards compatible, and you should not be using anything that doesn't work with it.

Again not a thing. HTML doesn't care whether or not you write in caps or lowercase - however, you should always use lowercase to avoid issues, but it doesn't produce errors if you don't.

While inline styles should be avoided, they will not give you an error message. Inline styles are perfectly valid, and do have their use sometimes.

HTML doesn't really care. However, this is mostly due to smart handling by the browsers, so to be 100% sure, do encode them. However, unless you're using XHTML, it won't result in a broken page or serious errors.

 

Hi, Anu My suggestion is one should use the schema with a combination of HTML and XHTML that will affect on SEO too. and BTW you told everything about what mistakes we must avoid. Thanks.

 

Hi Sarahk, Here I mean by "everything" is what all points Anu has discussed above, we should not do these all mistakes while coding

 

You were also talking about using a schema with a combination of HTML and XHTML - how, exactly, are you figuring that out? I'm hoping this is a language barrier of sorts, because that makes NO sense whatsoever.

 

Hence my relative silence as I can't figure out what the point was of OP's post with the "broken engrish moist goodry". Here's a tip, if you're going to try and give advice on an English language site, SPEAK ENGLISH... and not Yodish.

Looking for site you are, found one you have hrrrm?

I hate being "That Guy", but... What does Marsellus Wallas look like?