Now let’s see what you can do to make your HTML better.
Use a DOCTYPE
Probably the most important tag in your HTML is the DOCTYPE. This is what will tell the browser how to deal with your page. Here’s an example of a full DOCTYPE:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Here is a list of recommended DOCTYPEs and a great article from Alistapart that explains how to fix your site with the right DOCTYPE.
A title
Please don’t forget to put the title tag in your HTML document.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Some title</title>
......
How embarrassing is it to have Untitled Document as the title of your site.
Proper encoding
Make sure you have proper encoding for your site.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Some title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
......
It is recommended to either use ISO 8859-1 or UTF-8 if the content of your site will be in the english language. Use ISO 8859-15 if you need characters like the Euro sign and UTF-16 if you are writing in an Eastern Asian language like Chinese or Japanese.
Adhere to your DOCTYPE
If you are using an XHTML DOCTYPE, make sure you don’t forget the little things like closing empty elements (img, br, etc…) that differentiates XHTML from HTML.
Indent your code
It’s very easy to get lost in your mark-up when you don’t indent it properly. When everything is in one line, it’s hard to notice if the element is properly closed or missing.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Some title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="header">
<h1>Welcome to my site</h1>
</div>
<div id="main">
<div id="content">
<h2>Content</h2>
........
</div>
<div id="sidebar">
<h2>Sidebar</h2>
.........
</div>
</div>
</body>
</html>
Comment your code
An easy thing to do so you can find yourself quicky in your code
Use the proper element for the job
This ties in with making your CSS efficient but it’s also important to use the proper element for displaying the information. If you are displaying tabular data (like a calendar) use the table element. If you are displaying a title, use the proper heading element (h1, h2, … h5). No need for a tag soup of divs and classes to complicate things.
