View video tutorial

HTML <head> Tag


The <header> element contains information necessary for the page.

HTML <header> tag is a container for metadata

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>

Global attributes

Global attributes may be applied on all elements, although some elements may have no effect on them.

<accesskey>, <class>, <contenteditable>, <contextmenu>, <data-*>, <dir>, <draggable>, <dropzone>, <hidden>, <id>, <lang>, <spellcheck>, <style>, <tabindex>, <title>, <translate>.

Learning with HTML Editor "Try it Now"

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


<!DOCTYPE html>
<!-- Example: head Tag -->
    <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">
        h1 {
            color: red;
        h1 {
            background-color: black;
        h1 {
            font-size: 60pt;
        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";
    <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="" target="_blank">Go to HTML home</a><br><br><br>
    <button onclick="m1();">change color</button>
Try it Now »

Click on the "Try it Now" button to see how it works.