Clean HTML Code - Cleaning Up HTML Coding
Cleaning up Your HTML Code
Clean HTML code is important to the success of any website. Cleaning up HTML coding will reduce page size, make the website search engine friendlier and increase accessibility.
When cleaning up/creating HTML code look for excessive or non compliant HTML coding. Eliminate excessive and non compliant coding, move presentation HTML coding to the stylesheet. Doing this will result in standards compliant and clean HTML code.
Important Head Tags
Note: The following code examples are for when coding HTML. If you are coding in XHTML, then you will have to alter the end of the tag appropriately.
Each web page requires a title tag. The title of each page should be different on each web page and be relative to the content of the web page. The title tag is important from the search engine optimization point of view.
<title>Your page title goes here</title>
Description Meta Tag
Some search engines use the description meta tag on their results page when listing the web page. Again, the description meta tag should be different on each web page and relative to the content of the web page.
<meta name="Description" content="Your
description goes here.">
Keywords Meta Tag
There are varying reports on whether the keywords meta tag is important but include it, just in case a search engine actually uses it. Including words not relative to the content of the page can get the website/page banned. Again, the keyword meta tag should be different on each page and relative to the content of the page.
<meta name="Keywords" content="Your
keywords go here">
To learn how to use the title tag, description meta tag and keywords meta tag effectively we recommend:
SEO Techniques - Step by Step 20 chapters of step by step instructions and resources needed to optimize web pages for search engine placement.
SEO Training Class This free search engine optimization class is where you can work step by step to learn how to optimize web pages and obtain help as lessons are posted.
The HTTP charset parameter
<meta http-equiv="Content-Type" content="text/html;
Robots Meta Tag
The robots meta tag can be important to those who do not have access to the robots.txt file for their site. If you have access to the robots.txt file, leave this one out.
<meta name="Robots" content="index,follow">
Author Meta Tag
The author meta tag defines the author of the web page.
Unnecessary Meta Tags
There are various other meta tags used throughout the web. Some of these have no particular value so should be left out. Others have purposes like directing the web server and content rating. You will have to do some research to determine which are of value and which can be cleaned up. Remember, the goal is to have clean HTML code that loads quickly and has lots of room for important stuff like content.
Paragraphs, Line Breaks and Non Breaking Spaces
Do you have extra paragraph coding, line breaks or non breaking spaces to format the layout?
We discourage authors from using empty P elements. User agents should ignore empty P elements.
Reference: 9.3.1 Paragraphs: the P element of the HTML specification.
There are other ways to get the same effect with less coding resulting in clean HTML code.
Deprecated HTML Coding
Do you have font formatting in your HTML coding file? These were deprecated in HTML 4.01 and should be in a stylesheet. Moving these to the stylesheet will leave clean HTML code for the browser, search engines and alternate devices.
Do you have table formatting in your HTML files? Page formatting? HTML coding things like background and link colours were deprecated in HTML 4.01, they should be in the stylesheet.
Anything else you should have in the stylesheet? If you want the same look for an element throughout the website then create a class in your stylesheet and apply the class to that element. This makes it easier to make site wide changes and results in clean HTML code.
If you copy coding from a word processing document into your html code file it may insert invisible characters that the browser does not understand or use the word processor version of characters (E.g. quotation marks) instead of the text version.
Do your HTML tables use table height and td height?
Table height was never a valid attribute of a table. Table height is a proprietary coding used by Internet Explorer. It is ignored by the "other" browsers. Table height is determined by the number of rows and amount of content you have in the table.
Td (cell) height was deprecated in HTML 4.01. It can be dealt with in the stylesheet if you want to be really picky/controlling.
Other problems that could happen:
- Too many nested tables. This increases HTML file size and are confusing to search engine spiders and accessible browsers.
- Missing closing tag for the table. If you do not have a closing tag in the tables, Netscape will not show the table.
- If you do not have rows and columns laid out correctly your table will not display as intended.
Browsers, screen readers used by the visually impaired and search engines read HTML coding of the web page from the top down. Your page may display correctly if the HTML coding is out of order but it is very hard for text browsers, screen readers and search engine robots to comprehend.
Use elements for intended purpose:
- Headings in the correct order and for headings only. Not for formatting.
- Paragraph tags for paragraphs, again, not for formatting layout.
- List set of tags for lists.
To learn how to code clean compliant HTML coding, we recommend the HTML 4.01 Basics Simplified ebook.