saftutorials.com
HTML Head Section Tutorial

HTML Head Section most important part of HTML structure. We can think two part of HTML structure like Head Section and Body section. In Head section have all head element like Page Title, Favicon ico, view port, style, script etc. And in Body section have all HTML content like Text, Image, Audio, Video etc.

Where to use HTML Head Section?

You can declare Head section after <html> tag and before <body> tag.

How to use HTML Head Section?

You can start Head section <head>Here your head element</head>

HTML Head Section Elements.

1) <head> 

2) <title>

3) <meta>

4) <link>

5) <style>

6) <script>


*** Title

HTML Head with title

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
</head>
<body>

</body>
</html>

*** Meta Elements

Meta Character Set

<head>
  <meta charset="UTF-8">
</head>

Meta viewport

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

Meta Author Declare

<head>
  <meta name="author" content="SAF Tutorials">
</head>

Meta Robots Declare

<head>
  <meta name="robots" content="index, follow"/> 
</head>

Meta Googlebot Declare

<head>
  <meta name="googlebot" content="index, follow"/> 
</head>

Google Site Verification use when you want to verify your site for Google Webmaster tools. This verification code you can get from Google Webmaster Tools.

Meta Google Site Verification Declare

<head>
  <meta name="google-site-verification" content="Cwwtmbk2hBFkVhfJY17N7TGZK2JM"/> 
</head>

Meta X-UA-Compatible Declare

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>

Meta Keyword Declare

<!DOCTYPE html>
<html>
<head>
  <title>Page Tilte</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="SAF Tutorials">
  <meta name="robots" content="index, follow"/> 
  <meta name="googlebot" content="index, follow"/> 
  <meta name="google-site-verification" content="Cwwtmbk2hBFkVhfJY17N7TGZK2JM"/> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="keyword" content="tutorials, bootstrap, ajax, mysql, javascript, earning">
  <meta name="description" content="Your website short description here...">
</head>
<body>

</body>
</html>

Meta Description is most important for Search Engine result. Search engine display this their search result. So it's important for your website. Its must be maximum 160 character.

Meta Description Declare

<head>
  <meta name="description" content="Your website short description here...">
</head>

*** Link Element

Favicon Icon is image that show browser before Page Title.

Link to Favicon Ico

<head>
  <link rel="icon" href="favicon.ico" type="image/ico" sizes="32x32">
</head>

This link use for link HTML page to another CSS file.

Link to Style Sheet

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

*** Style Element

Style means declare CSS code in HTML page. This call Embedded CSS code.

Embedded Style element 

<!DOCTYPE html>
<html>
<head>
  <title>Page Tilte</title>
  <style type="text/css">
    body
    {
      background:#ddd;
      font-size: 16px;
      padding: 0px;
      margin: 0px;
    }
    a
    {
      color: #333;
      text-decoration: none;
    }
    a:hover
    {
      color:red;
      text-decoration: underline;
    }
  </style>
</head>
<body>

</body>
</html>

*** Script Element

Script means declare Javascript code in HTML page. This call Embedded Script code.

Embedded Script element 

<html>
<head>
  <title>Page Tilte</title>
  <script type="text/javascript">
    function safFunction() {
      alert("Hello this is Alter box.");
    }
  </script>
  </font>
<head>
<body>
<button onclick="safFunction()">Click to Me!</button>
</body>
</html> 
Find us on

Facebook Google Plus Twitter Pinterest YouTube

web statistic