HTML

HTML Head

The HTML head serves as the container for metadata (information about data). It is placed between the <html> and <body> tag. Metadata is not displayed on the web pages. The metadata contains document titles, styles, character encoding, and other metadata-related information.

<html>
<head>
    <!-- page metadata -->
</head>
<body>
    <!-- Page content goes here -->
</body>
</html>

HTML Head Elements

Following are the commonly used elements in HTML head.

HTML <title> Element

The title of a document, whether in HTML or XHTML, is defined by the HTML <title> element. A document can have only one single <title> element. It describes the title of a document for the browser tab, search engine results, and favorite page.

<html>
<head>
    <title><!-- Page Title--></title>
</head>
<body>
    <!-- Page content goes here -->
</body>
</html>

HTML <style> Element

To add style information to an HTML page, the HTML <style> element is used. It is used for a single HTML page and can have CSS properties.

<html >
<head>
    <style>
        body {
            background-color: lightblue;
            font-family: Arial, sans-serif;
        }

        h1 {
            color: darkblue;
        }
    </style>
</head>
<body>
    <h4>HTML Head</h4>
    <p>Welcome to the HTML Head page.</p>
</body>
</html>

HTML <link> Element

The <link> element links an external style sheet to the webpage. The two main attributes of the HTML <link> element are “rel” and “href,” where the former indicates the document is a stylesheet and the latter is the way to an external file.

<html>
<head>
    <link rel="stylesheet" href="#">
    <link rel="icon" href="#" type="image/x-icon">
</head>
<body>
    <h4>This example uses an external stylesheet.</h4>
    <h4>Check the tab for the favicon!</h4>
</body>
</html>

HTML <meta> Element

The <meta> element is not displayed on the webpage, but search engine browsers use this information to display the content. It specifies the character set, page description, keywords, and other details related to a webpage’s metadata.

<html>
<head>
    <meta charset="UTF-8">
    <meta name="description" content="This is page description.">
    <meta name="keywords" content="HTML, head, example, metadata">
</head>
<body>
    <h4>This example uses UTF-8 character encoding.</h4>
</body>
</html>

HTML <script> Element

This HTML element is used to define the client’s JavaScript.

<!-- Inernal JavaScript -->
<html>
<head>
    <script>
        function showAlert() {
            alert("HTML Head");
        }
    </script>
</head>
<body>
    <button onclick="showAlert()">Click Me</button>
</body>
</html>

<!-- External JavaScript -->
<html>
<head>
    <script src="script.js"></script>
</head>
<body>
    <button onclick="showAlert()">Click Me</button>
</body>
</html>

The HTML <base> Element

The base URL and all the relative URLs in the webpage are targeted by the <base> element. In a document, only one <base> element can be used. It should either have an href attribute, a target attribute, or both. 

<html>
<head>
    <base href="https://learning-axis.com/">
</head>
<body>
    <a href="about-us/">About Us</a>
</body>
</html>

In this example, the <base href=”https://learning-axis.com/”> sets https://learning-axis.com/ as the base URL for all relative URLs in the document. The link <a href=”about-us/”> will resolve to https://learning-axis.com/about-us/.

Prev
Next
Scroll to Top