Why is the header of a website important

Header of a website has its importance in serving by holding valuable information that otherwise would have to be accessed from the body. Header in any case not pertaining to websites, either a document or a letter or a poster is an important part. Its main idea is to provide a valuable quick summary and theme or the title of what the rest of the document is going to be.

Header of a website is identified beginning with "< head >" and ending with '<'head'>', thus what is inside these two tags and the content of a header of a website. On a well scripted website, header usually contain markers such as '<'meta'>' '<'title'>' '<'base'>' '<'link'>', all these inside '<' head '>'

'<'title'>' this tag contain the title of the website, just like the title of an essay that goes in the header. Everything inside this markup tag you code into the header, will be shown on title of a browser when you visit the website. Therefore it is important to have a title for a website, so it can be easily identified by the viewer.

'<'meta content'>' in the meta content tags websites can usually insert keywords relating to website and description of the website, which will not be shown anywhere else on the website, or rather which is invisible to a simple viewing of the website through a browser. Yet this markup serves a great task in providing these keywords and descriptions of a website for search engines to optimize websites for search rankings as well as for descriptive bookmarking of the website.

Code to add a website description to the header;
'<'meta content="ashPresentom an educational consortium which serves in enlightening the viewers" name="description"/'>'

Next we look at '<'link'>' tags.
It is a great way to increase the website load time by separating other types of codes such as CSS, Javascript, etc. '<'Link'>' tag comes handy in these cases.

Code to load a CSS stylesheet from an external link:
'<'link type="text/css" rel="stylesheet" href="css/stylesheet.css"'>'
In this case the website will load stylesheet.css file from css directory and be readily available for the site to use. If the CSS code happened to be rather large in size implying a longer time to load, you might have noticed in certain occasions website changes its view of tables and etc. as it load.

Another great use of the '<'link'>' tag is to add a favicon to your website. Favicon is the small icon that shows up on address bar and on tabs as well as bookmarks next to title. It gives a certain flair to a website and help improving its brand recognition. You can make your own favicon in photoshop to be in a square of roughly 75 x 75 px and use a website like www.favicongenerator.com to convert the jpg file to ico and have your own favicon.

Code for adding a favicon
'<'link href="images/favicon.ico" rel="shortcut icon"/'>'
In this code, website will retrieve the favicon.ico file, which has your favicon, and place on the website appropriately.

Also another code goes in the header are loading javascript files from external directories.
Code to load javascript:
'<'script src="js/jquery.js" type="text/javascript"'>'

Next we look at '<'base'>' which specify a default URL and a default target for all links on a page.
'<'base href="http://ashpresent.blogspot.com/images/" /'>'
'<'base target="_blank" /'>'

In this blog post we talked about importance of a '<'head'>' in the website and break it down into pieces to better understand why things are there for. This conclude the educational post of WEB div.

NOTE: these tags (') has been placed outside < markups to avoid confusion with the blog site's coding and the post.