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, 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 it is required in all HTML 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
<html>
<head>
<title>This is the Page Title</title>
</head>
<body>
<p>The content of the title element is displayed in the browser tab, in favorites and in search engine results.</p>
</body>
</html>
The HTML <style> Element
The <style> element is used to define style information for a single HTML page.
Example
<html>
<head>
<title>Page Title</title>
<style>
body {background-color: cyan;}
h1 {color: green;}
p {color: pink;}
</style>
</head>
<body>
<h1>Page Heading</h1>
<p>Paragraph belongs here.</p>
</body>
</html>
The HTML <link> Element
The <link> element is used to link to external style sheets.
Example
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
The HTML <meta> Element
- Metadata is used by browsers (how to display content), by search engines (keywords), and other web services.
- The <meta> element is used to specify which character set is used, page description, keywords, author, and other metadata.
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="XYZ">
Refresh document every 30 seconds:
<meta http-equiv="refresh" content="30">
Example
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="XYZ">
</head>
<body>
<p>All meta information belongs to head tag and does not lie in the body.</p>
</body>
</html>
The HTML <script> Element
- The <script> element is used to define client-side JavaScripts.
- This JavaScript writes "Hello JavaScript!" into an HTML element with id="demojavascrpt".
Example
<html>
<head>
<title>Page Title</title>
<script>
function myFunction() {
document.getElementById("demojavascrpt").innerHTML = "Hello JavaScript!";
}
</script>
</head>
<body>
<h1>My Web Page</h1>
<p id="demojavascrpt">A Paragraph</p>
</body>
</html>
The HTML <base> Element
The <base> element specifies the base URL and base target for all relative URLs in a page.
Example
<html>
<head>
<title>Page Title</title>
<base href="https://www.codersarts.com/images/" target="_blank">
</head>
<body>
<p>The link below opens in a new window. This is because the base target is set to "_blank".</p>
</body>
</html>
Omitting <html>, <head> and <body>?
According to the HTML5 standard; the <html>, the <body>, and the <head> tag can be omitted.
The following code will validate as HTML5.
Example
<!DOCTYPE html>
<title>Page Title</title>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>