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 XHTML 1.0 Transitional.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
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.
<div><strong>text</div></strong>
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.
<DIV></DIV>
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.
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.
No comments:
Post a Comment