The HTML <head> Element
The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag.
HTML metadata is data about the HTML document. Metadata is not displayed.
Metadata typically define the document title, character set, styles, links, scripts, and other meta information.
The following tags describe metadata: <title>, <style>, <meta>, <link>, <script>, and <base>.
The HTML <title> Element
The <title> element defines the title of the document, and is required in all HTML/XHTML documents.
The <title> element:
- defines a title in the browser tab
- provides a title for the page when it is added to favorites
- displays a title for the page in search engine results
Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
The content of the document......
</body>
</html>
The HTML <style> Element
Example
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}</style>
The HTML <link> Element
Example
<link rel="stylesheet" href="mystyle.css">
The HTML <meta> Element
The <meta> element is used to specify which character set is used, page description, keywords, author, and other metadata.
Metadata is used by browsers (how to display content), by search engines (keywords), and other web services.
Define the character set used:
<meta charset="UTF-8">
Define a description of your web page:
<meta name="description" content="Free Web tutorials">
Define keywords for search engines:
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
Define the author of a page:
<meta name="author" content="John Doe">
Refresh document every 30 seconds:
<meta http-equiv="refresh" content="30">
Example of <meta> tags:
Example
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">
The HTML <script> Element
Example
<script>
function myFunction {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}</script>
Omitting <html>, <head> and <body>?
Example
<!DOCTYPE html>
<title>Page Title</title>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>