The Header
Making a correctly formatted HTML code is one of the most important aspects when it comes to validating your HTML source code all the suitable tags should be closed to avoid the use of outdated source code method which cause the search engine to become confused and fail to distinguish your HTML code source.
The HTML header contains several notable items which include:
- doctype – This gives a description of the type of HTML document this is.
- meta name=”description” – This gives a description of the page for search engines.
- meta name=”keywords” – This line sets keywords which search engines may use to find your page.
- title – Defines the name of your document for your browser.
The header in our example document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="GENERATOR" content="Arachnophilia 3.9"> <meta name="description" content="Documentation and information about making a correct HTML document."> <meta name="keywords" content="HTML, tags, commands"> <title>HTML HEADER</title> <link href="style.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="/js.js"></script> <link rel="shortcut icon" href="favicon.ico">
</head>
First thing that should be on your file header is this declaration:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
This is the Document Type Definition that should be the beginning of any HTML document. Generally, there are the folowing types of documents:
-
- Strict
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- Transitional
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- Frameset
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
The declaration (technically it’s not a “tag”) should be the very first thing in your document… if you choose to use it at all. It tells the browser what version of HTML you are writing in.
More specifically, declares that this document conforms to a specific version of HTML, and specifies what version that is.
There are search engines out there that have a hard time when it comes to processing the XHTML DOCTYPE it is more recommended the you should use HTML 4.01 which is a transitional DOCTYPE which will appears like this:
<!DOCTYPE HTML PUBLIC"_//W3C//DTD HTML 4.01 Transitional//EN" http://www.w3.org/TR/html4/loose.dtd>
Then there are some “meta” tags that describes the content of the document, who made it, some keywords and the set of characters used. Here in the example above we have:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="GENERATOR" content="Arachnophilia 3.9"> <meta name="description" content="Documentation and information about making a correct HTML document."> <meta name="keywords" content="HTML, tags, commands">
Those are important for search engines and play important role in finding your site on the internet.
Title of your page can be mentioned in this tag:
<title>HTML HEADER</title>
This title will appear on your browser window and as well as the meta tags above it helps search engines.
Next part is the design part, the section where you will keep the css settings and you javascript codes:
<link href="style.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="js.js"></script>
In this example my css settings are in the style.css file and with that line I make my page “look” and “read” that file. If the file is not in the path mentioned my page will work with no design settings specified in that file. The same thing is with the javascript file js.js. I can fill that file with the javascript codes I want to run and then just “include” it in to my page by inserting that line in header.
There is another way to include my css setting that includes those css settings on my page using only the <style type=”text/css”> css code </style> tags. The same way I can include the javascript code using <script type=”text/javascript”> javascript code </script> tags.
The last line on the example is :
<link rel="shortcut icon" href="favicon.ico">
With this line you can add a favicon to your site. The favicon is a file containing one or more small icons, most commonly 16×16 pixels, associated with a particular Web site or Web page. If you have a gif animated favicon you have to use the following lines in your header:
<link rel="shortcut icon" href="favicon.ico"> <link rel="icon" href="path to animated.gif" type="image/gif">
I will keep this article as a start to others.
