HTML Header

Header in html

HTML Header tag is used as a container of introductory content or navigation links. Generally a <header> element contains one or more heading elements, logo or icons or author’s information.

HTML Header Example:

Document declaration tag

<html>
   <head>
     this is Document header related tags
   </head>
   <body>
      Document body related tags
   </body>
</html>

This chapter will give a little more detail about header part which is represented by HTML <head> tag.

The <head> tag is a container of various important tags like :

i. <title>
ii. <meta>
iii. <link>
iv. <base>
v. <style>
vi. <script>
vii. <noscript>


The HTML <title> Tag:

The HTML <title> tag is used for specifying the title of the HTML document. Following is an example to give a title to an HTML document :

 Example:

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Title Tag Example</title>
   </head>
   <body>
      <p>Hello, World!</p>
   </body>
</html>

The HTML <meta> Tag:

The HTML <meta> tag is used to provide metadata about the HTML document which includes information about page expiry, page author, list of keywords, page description etc.

Example:

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Meta Tag Example</title>
      <!– Provide list of keywords –>
      <meta name = “keywords” content = “C, C++, Java, PHP, Perl, Python”>
      <!– Provide description of the page –>
      <meta name = “description” content = “Simply Easy Learning by Tutorials Point”>
      <!– Author information –>
      <meta name = “author” content = “Tutorials Point”>
      <!– Page content type –>
      <meta http-equiv = “content-type” content = “text/html; charset = UTF-8”>
      <!– Page refreshing delay –>
      <meta http-equiv = “refresh” content = “30”>
      <!– Page expiry –>
      <meta http-equiv = “expires” content = “Wed, 21 June 2006 14:25:27 GMT”>
      <!– Tag to tell robots not to index the content of a page –>
      <meta name = “robots” content = “noindex, nofollow”>
   </head>
   <body>
      <p>Hello, World!</p>
   </body>
</html>

The HTML <base> Tag:

The HTML <base> tag is used for specifying the base URL for all relative URLs in a page, which means all the other URLs will be concatenated into base URL while locating for the given item.

Example:

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Base Tag Example</title>
      <base href = “https://www.———-.com/”/>
   </head>
   <body>
      <img src = “/images/logo.png” alt = “Logo Image”/>
      <a href = “/html/index.htm” title = “HTML Tutorial”/>HTML Tutorial</a>
   </body>
</html>

The HTML <link> Tag:

The HTML <link> tag is used to specify relationships between the current document and external resource. Following is an example to link an external style sheet file available in css sub-directory within web root :

Example:

<!DOCTYPE html>
<html>
   <head>
      <title>HTML link Tag Example</title>
      <base href = “https://www.——–.com/” />
      <link rel = “stylesheet” type = “text/css” href = “/css/style.css”>
   </head>
   <body>
      <p>Hello, World!</p>
   </body>
</html>

The HTML <style> Tag:

The HTML <style> tag is used to specify style sheet for the current HTML document. Following is an example to define few style sheet rules inside <style> tag :

Example:

<!DOCTYPE html>
<html>
   <head>
      <title>HTML style Tag Example</title>
      <base href = “https://www.——-.com/” />
      <style type = “text/css”>
         .myclass {
            background-color: #aaa;
            padding: 10px;
         }
      </style>
   </head>
   <body>
      <p class = “myclass”>Hello, World!</p>
   </body>
</html>

The HTML <script> Tag:

The HTML <script> tag is used to include either external script file or to define internal script for the HTML document. Following is an example where we are using JavaScript to define a simple JavaScript function :

Example:

<!DOCTYPE html>
<html>
   <head>
      <title>HTML script Tag Example</title>
      <base href = “http://www.——–.com/” />
      <script type = “text/JavaScript”>
         function Hello() {
            alert(“Hello, World”);
         }
      </script>
   </head>
   <body>
      <input type = “button” onclick = “Hello();” name = “ok” value = “OK”  />
   </body>
</html>

Recommended posts:

Spread the love

Leave a Comment

Your email address will not be published. Required fields are marked *