Exercise - Metadata Summary

In this exercise, we will create an HTML document that includes the usual metadata elements, often found in production/live websites.

Exercise text

Create an HTML document that:

  • Includes the basic metadata information.
  • Includes additional metadata information.
  • Imports a CSS file.
  • Imports a JavaScript file.

Solution

The index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Basic metadata -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Page Title</title>

    <!-- Additional metadata -->
    <meta name="description" content="A short description about the content on this web page.">
    <meta name="author" content="Sample Name">
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link rel="canonical" href="https://www.example.com/">

    <!-- Import the CSS stylesheet file -->
    <link rel="stylesheet" href="css/style.css">

    <!-- Import the JavaScript file -->
    <script src="js/myscript.js"></script>

</head>
<body>
    
</body>
</html>

The style.css file placed inside the css/ folder:

h1 { color: red; }
h2 { color: green; }
h3 { color: blue; }
p { color: gray; }

The myscript.js file placed inside the js/ folder:

alert("Hello from a JavaScript file!");

Explanation

The basic metadata

Our index.html document includes the basic metadata elements, such as the character set, viewport, and title tags/elements:

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Page Title</title>

Additional metadata

It also includes additional metadata elements, such as the meta-description, author, favicon and canonical tags:

<meta name="description" content="A short description about the content on this web page.">
<meta name="author" content="Sample Name">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="canonical" href="https://www.example.com/">

The CSS file

This HTML document now also imports a CSS stylesheet file, placed in some css/ directory:

<link rel="stylesheet" href="css/style.css">

The JavaScript file

And finally, our HTML document imports a JavaScript file, located in some js/ directory:

<script src="js/myscript.js"></script>

Summary

This exercise is a summary of all our previous HTML metadata exercises. It shows an HTML page having the usual metadata elements you are likely to see in production. This HTML page can serve as a good starting point, a blueprint for all future HTML documents.