Elements that are used in head section of HTML page

The <head> element is like a container for metadata i.e. data about data and it also lies between the <html> tag and the <body> tag. Metadata is the data about the HTML document and is not displayed on the webpage. It defines the document title, style, script, and other meta information.

The HTML <head> element is a container for the following elements:

    <title>, <link>, <meta>, <base>, <style>, <script>, … etc.

  • <title> element: The <title> element defines the title of the webpage. The title must be in text and we will be able to see the title in the page tabs of the browser.

    Why it is used:



    The page title is used by the search engine to decide the order while listing pages in the search result. So, using meaningful and accurate title helps you to rank better by the SEO.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <title>HTML Head Tag </title>
    </head>
      
    <body>
        <p>GeeksforGeeks is a portal for geeks.</p>
        <hr>
    </body>
      
    </html>

    chevron_right

    
    

    Output:

  • <link> element: The <link> tag is most often used to link an external CSS file. It defines the relationship between current document and external resources.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
      
    <html>
      
    <head>
        <link rel="stylesheet" 
            type="text/css" href="mystyle.css">
    </head>
      
    <body>
        <h1>GeeksforGeeks</h1>
        <p>It is a portal for geeks.</p>
    </body>
      
    </html>

    chevron_right

    
    

    Output:

  • <meta> element: The <meta> element is used to specify the Character set, Page description, Keywords, Author of the document and Viewport settings.
    The meta data will not be displayed but are used by browsers on how to display content or reload page and by search engine, and other web services.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
        <head>
            <title>meta tag examples</title>
            <meta name = "keywords" 
                content = "Meta Tags, Metadata"/>
        </head>
              
        <body>
            <p>Hello GeeksforGeeks!</p>
        </body>
    </html>                    

    chevron_right

    
    

    Output:

    Hello GeeksforGeeks!
    
  • <base> element:

    The <base> element is used to specify the base URL or target for relative URLs.

    There can only be only one <base> element in a document.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
      
        <!-- Declaring the BASE URL -->
        <base href=
            target="_blank">
    </head>
      
    <body>
        <img src="1-95.jpg" width="400" height="250">
    </body>
      
    </html>

    chevron_right

    
    

    Output:

  • <style> element: The <style> element is used to make internal CSS within our HTML webpage. We can modify text and view of our web page using various properties and its values. Some of the properties include background-color, text align etc.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
      
    <html>
      
    <head>
        <style>
            body {
                background: skyblue;
            }
              
            h1 {
                color: red;
            }
              
            p {
                color: blue;
            }
        </style>
    </head>
      
    <body>
        <h1>GeeksforGeeks</h1>
        <p>It is a portal for geeks.</p>
    </body>
      
    </html>

    chevron_right

    
    

    Output:

  • <script> element: The <script> element is used to define within the HTML webpage.

    For example the following JavaScript code writes “GeeksforGeeks” into an HTML element with id=”demo”.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
        <head>
            <title>script tag</title>
            <style>
                body {
                    text-align:center;
                }
                h1 {
                    color:green;
                }
            </style>
        </head>
        <body>
            <h1>GeeksforGeeks</h1>
            <h2><script> Tag</h2>
            <p id="Geeks"></p>
            <script>
                document.getElementById("Geeks").innerHTML = 
                                     "Hello GeeksforGeeks!";
            </script
        </body>
    </html>                    

    chevron_right

    
    

    Output:
    script tag

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.