Common HTML and CSS Mistakes that Developers Should Avoid

css_reset1
0 Flares Twitter 0 Facebook 0 Google+ 0 StumbleUpon 0 Pin It Share 0 0 Flares ×

If you are running an online business then understanding the need to develop your own website and coding for it is of great importance for you. The only thing which will make a difference between you and those thousands of online business is the way you develop your website and present it in front of your users. The online customers are becoming conscious day-by-day and you know that very well. To conquer the faith of these intelligent customers, a person with strong vision with unmatched services is required. And if you make a mistake in the very beginning of your business, i.e to do wrong coding for your website, it is going to cost you your customers and your image as well.
The most common thing found in the website developers especially the naives one is that they tend to make some silly mistakes which should not be expected at least from a good developer. Proper and effective coding is the lifeline of any website and your website is the lifeline of your business. In most of the cases it is found that these mistakes are made when one tries to finish the work in a nasty hurry or by not practicing the right coding skills. But whatever the reason may be, the results are always disastrous. Both CSS and HTML require a lot of attention, practice and experience when you are coding. Therefore, if you have found yourself in the difficulty of making some mistakes while coding for your website then this article will let you know where are you lagging behind?

To make it more convenient for you to understand, lets divide it into parts. First part will deal with the HTML mistakes while the second part will let you know some CSS mistakes.
So, lets go for it!

HTML MISTAKES TO BE AVOIDED:

Improper Closing and Nesting of the Tags

This is the most common mistake found in beginners. Some tags such as Divs, strong tags and links needs to be closed which most of the people fail to do so while other tags require closing slash to end the line such as an image tag. Once something (for example a div) has opened, it must close before anything above it can close. Sometimes, we do even miss the and tags.
For Instance:  <div><strong>ABCDS</div></strong>

Using Line Breaks to Show a List

Avoid using line breaks for highlighting things in a numbered or bulleted manner, instead of that try to use unordered list (ul) or ordered list (ol) tags for this purpose.

Using Inline Styles

This is a common fact that HTML and CSS semantics are used to separate document styling and structuring, therefore, placing an inline style directly in HTML doesn’t makes any sense. n fact, inline styles are exactly the same as embedded font tags and other design tags that we’re trying to stop using. The styles only affect the exact tag they are applied to, and while that might give you more control, it also makes other aspects of your design and development more difficult.

Using Wrong Doctype

When you start with HTML, it requires a valid doctype well in the beginning. So it is very important to specify which kind of HTML you want to use. Use the Strict DOCTYPE (DTD) whenever possible. If you’re beginning a new project, don’t use Transitional. You won’t be using tables for layout; so Transitional isn’t necessary, and the Strict DTD is up to standards.

Ignoring Alt Tags

It is very important to have an alt tag when you begin with the coding. The purpose of using alt tags is to give alternate information about the image in case the user cannot see the image.

Using Blink or Marquee

As these both tags have never been included in the official HTML standard of W3C consortium and using these tags create a bad impression of your website in front of your users.

Capitalizing Tags

However, it is not going to affect the validation of your coding but still, capitalizing tags is not considered among the good practices of coding. Try to use lower case for tags like divs, links and images.

Use of Onclick

Use of onclicks was a common practice before the launch of Javascript and jQuery in the market, but using the same practice now can cause you to break links because if the Javascript is not available to the user, he can’t see what you have to offer with you.

CSS MISTAKES TO BE AVOIDED

Ignoring Indentation

Indent your markup so that it’s easy to navigate and read. When other people look over your files, it can be much more work to navigate through markup that has no indentation. It can be eye straining when you have got 600 lines of CSS code to sift through. So with indenting the rules, you can make scrolling through the file and finding the proper CSS classes and ID’s easier.

Not Using CSS Reset

Using a CSS Reset allows you to make your styles effective. There has to be a fallback mechanism for people who don’t use CSS reset. Using a CSS reset allows you to set all the styles of all the HTML elements to a predictable baseline value.

Unnecessary Floating

Most of the people fail to understand the working of collapsing margins. Floating the element triggers a more understandable use case where margins are not collapsing with margins of surrounding elements.

Not Using Shorthand Properties

Use shorthand CSS to keep your CSS slim and clean. Using shorthand CSS improves efficiency and makes it easier to maintain our code. You can even go through the cheatsheet of the CSS properties for more enhanced and detailed knowledge. Always make a note that that these two should not be used together to create one single space. It is advisable to opt for only one option if you want to provide spacing for your elements.

Pixel Perfect performance

Always remember that according to CSS dictionary; perfection is not equal to pixel perfection but rather it implies the ability to render pixel perfect pages. Therefore, never try to use CSS for creating pixel perfect pages.

Controlling Browser Environment

CSS is not a set of rules for how your page should be rendered, instead it is just a set of guidelines and the rest depends on how the browser renders your page. It is advisable to allow a few pixel differences between the browsers.

Providing Unnecessary White Space

When it comes to trying to reduce your CSS file sizes, each and every space matters a lot. It is seen that most of the developers don’t minify their files before launching their websites.

Not Validating CSS

It is considered a good practice if you keep validating your CSS along with developing. It will keep you in check with good coding habits and you will learn from the errors which you will encounter.

Conclusion

As beautiful your design is! so should be your markup. Use visual formatting as well as logical separation, placement, and naming. This way, the work you do will be high quality and ready for anyone else. Your clients and buyers will thank you – and you’ll be thankful yourself. Also, remember to validate your files!

Hope you liked the post. Social Bookmarking and Comments are most welcome as ever.

Related Resources:

15 HTML Best Practices That Developers Should Know
10 coding mistakes new html developers make
25+ Tips and Tutorials of HTML & CSS
How to avoid Some Common CSS Mistakes.

            

About author View all posts

Andrew Johnson

Andrew Johnson is founder of BestPSDtoHTML. He loves creative designs, photography, paintings and everything about innovation. As an Internet entrepreneur, he constantly tries to develop new ways to bring content faster and closer to the end users in a more streamlined way. His main focus lies in inspiring all the designers and developers with all new ideas through his blogs.

Leave a Reply

Your email address will not be published. Required fields are marked *