HTML TUTORIAL

Understanding The HTML Header and How To Customize Them on A Web Document

HTML HEADER
Written by ikenna

In this article, we will be discussing about the HTML header and how you can add beautiful HTML headers to your web document with the help of HTML codes. In our previous tutorial, we discussed about IFRAMES and how you can easily add iframes to web documents using HTML. If you haven’t gone through this tutorial, you can do so using the link below

READ PREVIOUS: How To Add IFRAMES on Web Document Using HTML

Introduction to HTML Header

The html header simply refers to the head section of the html web document which hold tags such as the title and meta tags.

Here are some of the list of other tags you can find in the HTML head section

  • Title tags <title> & </title>
  • Style tags <style> & </style>
  • Meta tags <meta>
  • Script tags <script> & </script>
  • Links tags <link>

The title tags

The title tags are used to add titles to HTML web document. Recall that all information added to the head section of the web page are not visible on the web page and are only meant for the search engine and web browser. Example on the use of title tags is shown below

<!DOCTYPE html>
<html>

   <head>
      <title>illustration of HTML Title TAGs  </title>
   </head>
	
   <body>
<p>Hello! theMustfeed</p>
   
   </body>

</html>

The Meta Tags

The meta tag is used to communicating important information about the web page to the web browser and search engine. Information such as the keywords, page description etc. example seen below

<!DOCTYPE html>
<html>

   <head>
      <meta name="keywords" content="web page keywords ">

      <title>Example on HTML meta tags </title>
   </head>
	
   <body>
  <p>the body </p>
   </body>

</html>

HTML style tags

HTML style tags are used to add styles and customization to the web document. Example on how to use the style tag is shown below

<!DOCTYPE html>
<html>
   <head>
      <style type="text/css">
      .thetitle {
            background-color:green;
            padding: 20px;
         }
      </style>
      <title>Example on HTML style tags </title>
   </head>
   <body>
<p> hey! theMustfeed! </p>
   </body>
</html>

HTML Script tags <script>

This tags are used to add scripts such as javascript to the html web document. Example shown below

<!DOCTYPE html>
<html>

   <head>
      
      <script>
      function Hello() {
            return "hello theMustfeed";
         }
      
      </script>
      <title>Example on script  tags  </title>
   </head>
	
   <body>
      <p>HELLO theMustfeed!</p>
   </body>

</html>

The link tags

The link tags are used to add external links the web document, most especially links leading to stylesheet documents etc.

<!DOCTYPE html>
<html>

   <head>
      <link rel="stylesheet" type="text/css" href="style.css">
      <title>Example on Link Tags </title>
   </head>
	
   <body>
      <p>HELLO THEMUSTFEED!</p>
   </body>

</html>

Conclusion

The above article explains how the HTML header tags can be used on web document. if you have questions, kindly let us know using the comment section below

NEXT ARTICLE: HTML BLOCKS

About the author

ikenna

Leave a Comment