HTML Head and Body Part

  • <head> tag contains all the elements which are included in Head Part. This part includes the title of page, css styles, JavaScripts, link of other script files or stylesheets etc.
  • Different tags are used in <head> element to specify different things-

    • <title>
    • <style>
    • <script>
    • <noscript>
    • <meta>
    • <link>
    • <base>
  • <title>, <style>, <script> and <noscript> tags are used in pairs while <meta>, <link> and <base> tags are single tags. Obviously, <head> tag is used in pair.
  • Among these tags, <meta> tag must be used only in head part while others may be used in body part also.
  • Syntax:



    <head>
    ...
    ...
    </head>


  • <body> tag contains all the elements which are included in body part. This part contains all the content and working of the page.
  • <body> tag is used in pair.
  • Though its attributes have been deprecated in HTML 4.01 but some browsers still accept them. Now all the work of these attributes is done in a better way for using CSS. Important attributes-

    • alink= It is used to specify the color of the active link in the web page.
    • vlink= It is used to specify the color of the visited link in the web page.
    • link= It is used to specify the color of unvisited link in the web page.
    • bgcolor= It is used to set the background color of the web page.
    • background= It specifies the location of the image to be used as the background of the web page.
    • text= It is used to specify the color of normal text in the web page.
  • All these attributes are optional and all (except 'background' attribute) take color names or there hex codes as their values. See: HTML Colors.

Syntax:



<body bgcolor= "any colorname/hexcode">
...
...
</body>


Example



<html>
<head>
<title>Hello world</title>
</head>
<body bgcolor= "red" text= "yellow" >
<p>The text is here.</p>
</body>
</html>


To see live output : Visit Try Yourself Editor

Output





<title> tag



  • This tag is used to define the title of the page.
  • The title is shown in the title bar of the browser.
  • The title is shown when a page is added to bookmarks or favorites.
  • The title also helps in searching the page over a search engine.

Syntax:



<title>Any Text</title>


Example



<html>
<head>
<title>Home Page</title>
</head>
</html>


Output







<style> tag



  • This tag is used to specify the css style for particular elements. This is described in HTML CSS.

Syntax:



<style>
css code
<style>


Example



<html>
<head>
<style>
#para {position:absolute; border:#063 solid}
</style>
</head>
<body>
<p id="para">This will have border.</p>
</body>
</html>


To see live output : Visit Try Yourself Editor

Output





<script> tag



  • This tag is used to define a client- side script. The example of client- side script is JavaScript, which is described in HTML JavaScript.

Syntax:



<script>
script code
</script>


Example



<html>
<head>
<script>
function onload()
{alert("on load executed");}
</script>
</head>
<body onLoad="onload()"></body>
</html>


To see live output : Visit Try Yourself Editor

Output





<noscript> tag



  • If a browser doesn't support client side scripts or a user has disabled the scripts for his browser, this tag may be useful to ping the user that the page contains scripts that he cannot access.

Syntax:



<noscript>any text/image</noscript>


<meta> tag



  • This tag is used to define MetaData which is the information about the data of the web page.
  • This tag will not impact the looks of the page. It can be parsed only by machine.
  • This information may be the description of the page, author, some dates, keywords etc.
  • This information can be used by browsers to load/ reload the page, search engines to search the page etc.
  • Important Attributes-

    • name= (***) It specifies, which type of description this tag will define. Some values are-

      • description
      • author
      • keywords
    • content= (Required) It specifies the description according to the value of name attribute.
    • http-equiv= (***) It specifies the HTTP header for the value of content attribute. It can have one of the following values-

      • content-type
      • default-style
      • refresh
    • *** At least one attribute from name and http-equiv is Required.

  • charset= (Optional) Specifies the character encoding for the document.

Syntax:



<meta name= "any name" content= "any content" >
<meta name= "keywords" content= "HTML, C, C++, JavaScript, PHP, ASP.NET">


<link> tag



  • This tag links some external files to the web page. These files can be stylesheets, icons etc.
  • Important Attributes-

    • rel= It defines the relation of the external file to the current file.
    • href= It specifies the location of the external file.

Syntax:



<link rel= "any value" href= "location" />


<base> tag



  • This tag defines a base url for all relative urls. After defining the base element, all the relative paths/ urls specified further in the document, will start themselves after the url specified in base element.
  • Important Attributes-

    • href= (Required) It specifies the base url. All relative urls in the document will append themselves to this url. It will always end with a slash (/).
    • target= (Optional) It defines the default window or frame in which the new page will be opened after clicking the hyperlink.

      • _blank- It opens in new window.
      • _parent- It opens in the parent frame.
      • _self- It opens in the same frame where the link is situated. (Default).
      • _top- It opens in the main frame means the full window.

Syntax:



<base href= "base url" target= "any value from above" />


Example



<!DOCTYPE html>
<html>
<head>
<base href="http://www.facebook.com/" target="_blank" />
</head>
<body>
<a href="messages">Facebook Inbox</a>
</body>
</html>


To see live output : Visit Try Yourself Editor