HTML and CSS Mistake by sereyboth


The Most Common HTML and CSS
Mistakes to Avoid
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 XHT ML 1.0 Transitional.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

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.

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.

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

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 po sition 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 excess ively. I rarely use
    these at all in my stylesheets.

    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 HT ML and CSS mistakes, but it
    doesn’t make it good practice or valid code. The validator will help identif y 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 A voided

   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.
About the Author

             Shannon Noack is a designer in Arizona and the Creative Director ofSnoack Studios. Designing
is her passion in life and she loves to create websites, logos, print work, you name it. She also blogs
regularly hereand you can connect with her on Twitter as well.

To top