Common HTML and CSS mistakes

The most common HTML and CSS mistakes to avoid

When you just start trying your hands with HTML or CSS, making mistakes is quite natural cause you’re just the newbie. However, making mistakes does consume your time and energy. It may even influence on your career prospective.

Today, you’re going to speak about the most common mistakes made by beginners while using HTML and CSS.

HTML Faults

The most common HTML errors are:

• Forgetting to close a tag (This mistake is very spread among 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);
• A wrong DOCTYPE (HTML demands that you start out the document with the relevant DOCTYPE declaration. It needs to be before anything else in the code, starting the document by declaring what type of HTML you’re using);
• Incorrect nesting tags (It’s a key moment 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);
• Capitalizing tags (Use lowercase for tags like divs, links, and images);
• Using Inline Styles (Inline styles do work, but don’t forget to edit and add them in the future);
• Don’t forget to encode special characters (all special characters should be shown by the proper HTML code invented for them);
• Messing up 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 Faults

The most common CSS errors are:

• Not properly closed things (Remember that 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);
• Not using global styles (use global styles for headings and paragraphs. It will reduce the risk of mistakes and will also cut down on the amount of code in your stylesheet);
• 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);
• Not using original 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);