...

Web Technologies - HTML

Back to Course

Lesson Description


Lession - #155 HTML Header



We have learnt that a typical HTML document will have following structure -

Document declaration tag 
<html>
   
   <head>
      Document header related tags
   </head>

   <body>
      Document body related tags
   </body>
   
</html>
This chapter delves deeper into the header section, which is represented by the HTML <head> tag. The <head> tag is a container for several key tags, including <title>, <meta>, <link>, <base>, <style>, <script>, and <noscript> The <title> Tag in HTML
The HTML <title> tag is used to indicate the HTML document's title. Here's an example of how to give an HTML document a title:

<!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 an HTML document, such as the page's expiration date, author, keyword list, and description, among other things.
Following are few of the important usages of <meta> tag inside an HTML document -

<!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>

This will produce the following result -
The HTML <base> Tag
The HTML <base>The element is used to indicate the base URL for all relative URLs on a page, which implies that all other URLs will be concatenated into the base URL while searching for the supplied item.
For example, after prefixing the supplied URLs with the base URL http://www.tutorialspoint.com/ directory, all of the specified pages and photos will be searched.-

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Base Tag Example</title>
      <base href = "https://www.tutorialspoint.com/" />
   </head>

   <body>
      <img src = "/images/logo.png" alt = "Logo Image"/>
      <a href = "/html/index.htm" title = "HTML Tutorial"/>
      HTML Tutorial</a> 
   </body>

</html>

If you change the base URL to anything different, for example, http://www.tutorialspoint.com/home, the image and other specified links will become something like http://www.tutorialspoint.com/home/images/logo.png and http://www.tutorialspoint.com/html/index.htm.
The HTML <link> Tag
The HTML <link>tag specifies associations between the current content and an external resource. The following is an example of how to connect an external style sheet file located in the web root's css subdirectory -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML link Tag Example</title>
      <base href = "https://www.tutorialspoint.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> The element specifies the style sheet for the current HTML page. The following is an example of defining a few style sheet rules within The <style> tag -

<!DOCTYPE html>
<html>

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

</html>
Note - To learn about how Cascading Style Sheet works, kindly check a separate tutorial available at css
The HTML <script> Tag
The HTML <script> The element specifies the style sheet for the current HTML page. The following is an example of defining a few style sheet rules within The style> tag -

<!DOCTYPE html>
<html>

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