HTML Head element - <title>, <style>, <link>, <base>, <script> tags

The HTML <head> elements is an element that provides information about that page (metadata). This element is contained between <html> start tag and <body> start tag. In the <head> section, the following tags are used:
1. <title> tag
2. <style> tag
3. <meta> tag
4. <link> tag
5. <script> tag
6. <base> tag

1. <title> tag

  • It defines the title of the HTML document.
  • It helps in displaying on search engine results.
  • <!DOCTYPE html>
    <html>
    <head>
    <title> HTML Heading Learning </title>
    </head>
    <body>
    -----------------------------
    ------ Body Content ------
    -----------------------------
    </body>
    </html>

    The <title> tag cannot have more than one in a web-page or HTML document.
    It must be defined within the <head> element.
    It could be seen at the tab bar of the window.

    2. <style> tag

  • It defines the style of an individual HTML Page.
  • All Styles of an HTML page are making with CSS
  • <!DOCTYPE html>
    <html>
    <head>
    <style>
    p {
    text-decoration: underline;
    color: red;
    }
    </style>
    <title> HTML Heading Learning </title>
    </head>
    <body>
    <p> I am a paragraph with red in color and underline in decoration. </p>
    </body>
    </html>

    If you wish to make style of an individual page using CSS properties, write them between <style> element.

    3. <meta> tag

  • It defines the style of an individual HTML Page.
  • All Styles of an HTML page are making with CSS
  • <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <meta name="description" content= "Myhtml5tutorials is a professional website for learning HTML Tutorials.">
    <meta name="keywords" content="HTML5, HTML">
    <meta name="author" content="Swamikanta Longjam">
    <title> HTML Heading Learning </title>
    </head>
    <body>
    -----------------------------
    ------ Body Content ------
    -----------------------------
    </body>
    </html>

    If you wish to make style of an individual page using CSS properties, write them between <style> element.

    4. <link> tag

  • It defines the style of an individual HTML Page.
  • All Styles of an HTML page are making with CSS
  • <!DOCTYPE html>
    <html>
    <head>
    <link rel= "stylesheet" type= "text/css" href= "layout.css">
    <title> HTML Heading Learning </title>
    </head>
    <body>
    -----------------------------
    ------ Body Content ------
    -----------------------------
    </body>
    </html>

    If you wish to make style of an individual page using CSS properties, write them between <style> element.

    5. <script> tag

  • This <script> element is used to define JavaScript code.
  • JavaScript is used to show the behavior of web pages.
  • <!DOCTYPE html>
    <html>
    <head>
    <script>
    function myFunction( ) {
    alert(" I am an Alert Box!");
    }
    </script>
    <title> HTML Heading Learning </title>
    </head>
    <body>
    <p> Click the Button to display an alert box. </p>
    <button onclick= "myFunction( )"> Click Me </button>
    </body>
    </html>

    You should know that within <script> element, you should write only JavaScript language.

    6. <base> tag

  • The <base> element specifies the base URL and base target in a website page.
  • It is not used generally.
  • <!DOCTYPE html>
    <html>
    <head>
    <base href= "http://www.myhtml5tutorials.com/" target="_blank">
    <title> HTML Heading Learning </title>
    </head>
    <body>
    <p> <a href= ""> Click Here, </a> to go to the index page of this website. </p>
    </body>
    </html>

    In the above example, we have set the base URL as http://www.myhtml5tutorials.com/ and the target as _blank. So all the links will be opened in the another window because we have set the default target as _blank and all the link URL in the whole page will be search by the directory, "http://www.myhtml5tutorials.com/" so that it consumes less time.

    Click Here, to learn more about <title> tag.
    Click Here, to learn more about <base> tag.