Techcss
Untitled Document

HTML Head

The head element

The head element contains the meta data and information about the page but the information in head tags(opening tag:<head> and closing tag:</head>) never appear on the browser window directly.

~ The head tag comes before the body tag.


The elements can be added in the head tag.

<title>, <meta>, <script>, <link>, <style>


<title> Element

The HTML title element (<title>) defines the title of the web document and display the title of the web page in browser's title bar.

The <title> is a very important tag or element of html. Search Engines follow the title tag of a webpage to match the visitors search keywords.


<meta> Element

The meta tag contain the metadata about the html web document.

The <meta> tag generally define the 'author' of the page, 'keyword' for the search engines, 'description' of the webpage, character encoding in HTML document and how often it is updated.

The example of writing the meta tags.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="description" content="A great HTML tutorial">

<meta name="author" content="Arindam Sarkar">

<meta name="keywords" content="Web, HTML, CSS, JavaScript, JQuery, PHP, JSP, Java">

<meta http-equiv="refresh" content="30">


<script> Element

The script element generally used to include client-side (browser end) script like JavaScript, JScript, VbScript etc.
The example of writing script tag

<script type="text/javascript">
document.write("Hello World!")
//....some codes........//
</script>


<link> Element

The link tag used to include or bridge external web documents like style sheets, .js(Java Script) documents, JQuery documents etc.
The examples of writing <link> tag

<link rel="stylesheet" type="text/css" href="style.css">

<script src="js/jquery-1.9.0.js"></script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">


<style> Element

The style tag absolutely used to styling, colouring, positioning and other attributes or properties of HTML objects or elements display on browsers at client end.

Examples of using 'style' element as internal method

<head>
<style>
body{
background-image:url("images/bg.gif");
margin-left:40px;
margin-top:0px;
}
p{
padding:5px;
border:1px solid #A9A9A9;
}
.disp{
padding:5px;
background-color:#3399CC;
color:#FFFFFF;
}
</style>
</head>

Examples of using 'style' element as inline method

<p style="padding:5px; border:1px solid #333333">This is a paragraph with style.</p>

<div class="disp">This is a content section of the web page with style.</div>