HTML - The Head Element
The <head> element is a container for these elements: <title>, <style>, <meta>, <link>, <script>, and <base>.
The HTML <head> Element
The <head> element holds metadata (data about data) and sits between the <html> and <body> tags. Metadata is information about the document and is not shown on the page; it typically sets the title, character set, styles, scripts, and other meta information.
The HTML <title> Element
The <title> element defines the document's title. It must be text only and shows in the browser's title bar or tab. It is required in every HTML document. The title matters a lot for search engine optimization (SEO), since search engines use it to order pages in results, so make it accurate and meaningful.
Example
A document with a meaningful title.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A Meaningful Page Title</title>
</head>
<body>
The content of the document......
</body>
</html>
The HTML <style> Element
The <style> element defines style information for a single page.
Example
Page styles set with a <style> element.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
The HTML <link> Element
The <link> element defines the relationship between the page and an external resource. It is most often used to link to an external style sheet.
Example
Linking to an external style sheet.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
The HTML <meta> Element
The <meta> element sets things like the character set, page description, keywords, author, and viewport. This metadata is not shown on the page, but is used by browsers, search engines, and other services. For example: <meta charset="UTF-8"> sets the character set, name="keywords" gives search keywords, name="description" gives a page description, name="author" names the author, and http-equiv="refresh" can reload the page on a timer.
Example
Several meta tags in the head.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>All meta information goes in the head section.</p>
</body>
</html>
Setting The Viewport
The viewport is the user's visible area of a page, which is smaller on a phone than on a computer. You should include a viewport <meta> tag in every page. The width=device-width part makes the page width follow the device's screen width, and initial-scale=1.0 sets the starting zoom level.
Viewport meta tag
The viewport meta tag to include in every page.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The HTML <script> Element
The <script> element defines client-side JavaScript.
Example
A script in the head that changes an element's text.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
</head>
<body>
<p id="demo">A paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
The HTML <base> Element
The <base> element sets the base URL and/or target for all relative URLs on a page. It must have an href attribute, a target attribute, or both, and there can be only one per document.
Example
A default URL and target for all relative links.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base href="https://prompt-cookbook.com" target="_blank">
</head>
<body>
<img src="images/stickman.gif" width="24" height="39" alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>
</html>
Chapter Summary
To recap: the <head> element holds metadata and sits between <html> and <body>. The <title> is required and sets the title. The <style> element sets styles for one page, the <link> tag links to external style sheets, the <meta> element sets things like charset, description, keywords, author, and viewport, the <script> element defines JavaScript, and the <base> element sets a base URL and target.
HTML head Elements
The head-related tags are: <head> (information about the document), <title> (the document title), <base> (a default address or target for links), <link> (a link to an external resource), <meta> (metadata about the document), <script> (a client-side script), and <style> (style information).