HTML

The <head> tag contains information needed for the page.

HTML Head is an information container.


Information inside <head> tag is not displayed in the page.

The <head> tag is placed between <html> and <body> tags.

The <head> tag contains other tags like <title>,<base>,<meta>,<style>,<link> and <script>

Learning with HTML Editor "Try it Now"

You can edit the HTML code and view the result using online editor.

The head position in HTML

<html>
<head>
    <title>HTML Head Example</title>
</head>
<body>
</body>
</html>

Example

<!DOCTYPE html>
<html>
<head>
    <title>HTML Head Example</title>
</head>
<body>
    <h2>HTML Head Example</h2>
    <p>Information inside head tag is not displayed in the page.</p>
    <p>Head is a metadata container for HTML documents.</p>
</body>
</html>
Try it Now »

Click on the "See output" button to see how it works.

The elements in head tag.

Example

<!DOCTYPE html>
<html>
<!-- Example: head Tag -->
<head>
    <title>Page Title here</title>
    <base href="/html/">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="w3context Team">
    <meta name="description" content="Online tutorials">
    <link rel="stylesheet" href="externalcssfile.css">
    <style>
        h1 {
            color: red;
        }
    </style>
    <style>
        h1 {
            background-color: black;
        }
    </style>
    <style>
        h1 {
            font-size: 60pt;
        }
    </style>
    <script>
        function m1() {
            document.getElementById("test2").style.backgroundColor = "black";
            document.getElementById("test2").style.color = "white";
            document.getElementById("p2").style.backgroundColor = "black";
            document.getElementById("p2").style.color = "red";
        }
    </script>
</head>
<body>
    <h1>Head tag example.</h1>
    <!-- Comments are not displayed in the browser -->
    <h2 id="test2">The head tag contains information needed for the page.</h2>
    <p id="p2">Head is a metadata container for HTML documents</p>
    <a href="https://www.w3context.com/html/" target="_blank">Go to HTML home</a><br><br><br>
    <button onclick="m1();">change color</button>
</body>
</html>
Try it Now »

Click on the "See output" button to see how it works.