Mastering HTML Document Metadata

Introduction

In this lab, you will learn how to create an HTML document using the HTML <head> tag. The <head> tag is used to provide meta-data and other information about the web page that is not visible to the user. We will go through the steps required to create an <head> tag for your HTML document.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/charset("`Character Encoding`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/TextContentandFormattingGroup -.-> html/text_head("`Text and Headings`") subgraph Lab Skills html/basic_elems -.-> lab-70765{{"`HTML Document Metadata`"}} html/charset -.-> lab-70765{{"`HTML Document Metadata`"}} html/head_elems -.-> lab-70765{{"`HTML Document Metadata`"}} html/text_head -.-> lab-70765{{"`HTML Document Metadata`"}} end

Create an HTML Document

First, let's create an HTML document in a file called index.html:

<!doctype html>
<html>
  <head> </head>
  <body></body>
</html>

Add a Title to your HTML Document

The <title> tag is used to define the title of the webpage. It should be placed inside the <head> tag. Add the <title> tag to your HTML document:

<!doctype html>
<html>
  <head>
    <title>My Awesome Webpage</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

Modify the Title of your HTML Document

Let's modify the title of the HTML document by changing the text "My Awesome Webpage" to something else. Replace the text "My Awesome Webpage" with your desired title:

<!doctype html>
<html>
  <head>
    <title>My Amazing Website</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

Add Character Encoding

Character encoding is used to define how characters are displayed in the browser. We can define the character encoding using the <meta> tag. Add the following <meta> tag inside the <head> tag:

<!doctype html>
<html>
  <head>
    <title>My Amazing Website</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

Add CSS Styling to your HTML Document

You can use the <style> tag inside the <head> tag to provide CSS styling for the webpage. Add the following <style> tag inside the <head> tag:

<!doctype html>
<html>
  <head>
    <title>My Amazing Website</title>
    <meta charset="UTF-8" />
    <style>
      h1 {
        color: blue;
      }
    </style>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

Add Links to External Stylesheets

You can also link external CSS stylesheets to your HTML document using the <link> tag. Create a new file called styles.css, and add the following CSS styles:

h1 {
  color: red;
}

Then, link this stylesheet to your HTML document using the following <link> tag inside the <head> tag:

<!doctype html>
<html>
  <head>
    <title>My Amazing Website</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

Add a Base URL

The <base> tag is used to provide a base URL for all the relative URLs used in the HTML document. Add the <base> tag inside the <head> tag:

<!doctype html>
<html>
  <head>
    <title>My Amazing Website</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="styles.css" />
    <base href="https://example.com" />
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

Summary

In this lab, you learned how to use the HTML <head> tag to provide metadata and other information about the web page. You can use the <title> tag to define the title of the HTML document, the <meta> tag to define the character encoding and other meta information, the <style> tag to provide CSS styling, the <link> tag to link external stylesheets and <base> tag to provide a base URL for all the relative URLs.

HTML Document Metadata