HTML Tutorials - Herong's Tutorial Examples - v2.30, by Herong Yang
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) 2009 HerongYang.com. All Rights Reserved.
-->
<html>
<head>
<title>Metadata Elements Example</title>
<base href="https://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>
Table of Contents
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
Displayed and Printed HTML Documents
Responsive Design of Web Pages