HTML Document Metadata Elements

This section describes metadata elements that can be specified in the 'head' element to provide metadata information to the entire HTML document.

In HTML5, the following elements are defined as document metadata elements that can be used as sub elements of the "head" element:

1. "title" element - Represents the title for this HTML document. Only a single "title" element is allowed in the "head" element.

2. "base" element - Represents the base URL to resolve relative URLs listed in this HTML document. Only a single "base" element is allowed in the "head" element.

3. "link" element - Represents external resources that are related to this HTML document. Example of external resources are "stylesheet", "help", "icon", "author", "license", "alternate", etc. The browser should apply those resources when presenting this HTML document. Multiple "link" elements are allowed in the "head" element.

4. "style" element - Represents presentation style definitions for this HTML document. The browser should apply those style definitions when presenting this HTML document. Multiple "style" elements are allowed in the "head" element.

5. "script" element - Represents inline script codes or external script files for this HTML document. Multiple "script" elements are allowed in the "head" element.

6. "meta" element - Multiple "meta" elements to present other types of metadata information for this HTML document like: charset, refresh, description, keywords, author, etc. Multiple "meta" elements are allowed in the "head" element.

Below is a good example of a "head" element with various types of metadata elements:

<!DOCTYPE html>
<!-- Metadata_Elements_Example.html
 - Copyright (c) 2014, HerongYang.com, All Rights Reserved.
-->
<html>
<head>
<title>Metadata Elements Example</title>
<base href="http://www.herongyang.com/html/" target="_self"/>
<link rel="stylesheet" href="book.css" type="text/css"/>
<link rel="author license" href="about.html" type="text/html"/>
<link rel="icon" href=favicon.png type="image/png">
<style type="text/css">
   body {background-color: #111111;} 
   p {font: 12px arial;}
</style>
<script type="text/javascript">
   function myFunction() {
      var e = document.getElementById("demo");
      e.innerHTML="My First JavaScript Function";
   }
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="author" content="Herong Yang"/>
<meta name="description" 
   content="A collection of HTML tutorial examples for beginners"/>
<meta name="keywords" content="HTML, Tutorial, Example"/>
</head>
<body>
Document main content goes here...
</body>
</html>

Last update: 2014.

Table of Contents

 About This Book

 Introduction of HTML

 Introduction of HTML5 Features

HTML Document Structure and Content

 HTML Document Top Level Structure

HTML Document Metadata Elements

 Headings and Implicit Sections

 Elements for Explicit Sub Sections

 Sectioning Contents with Heading Elements

 Paragraph and Flow Content Elements

 Text and Phrasing Content Elements

 HTML Document and Elements Syntax

 References

 PDF Printing Version