HTML <head> Tag
HTML
The <head> element contains information necessary for the page.
HTML <head> tag
➔ HTML <head> tag is a container for metadata.
➔ Information inside <head> tag is not displayed in the page.
➔ The <head> tag is placed between <html> and <body> tags.
➔ The <head> tag contains other tags like <title>,<base>,<meta>,<style>,<link> and <script>
Supported Global attributes
Global attributes may be applied on all elements, although some elements may have no effect on them.
<accesskey>,
<class>,
<contenteditable>,
<contextmenu>,
<data-*>,
<dir>,
<draggable>,
<dropzone>,
<hidden>,
<id>,
<lang>,
<spellcheck>,
<style>,
<tabindex>,
<title>,
<translate>.
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML head tag example.</title>
<base href="/html/">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<meta name="author" content="w3context Team">
<meta name="description" content="Online tutorials">
<link rel="stylesheet" href="externalcssfile.css">
<style>
h1 {
color: #fff;
padding: 20px;
}
button {
padding: 10px 20px;
}
</style>
<style>
h1 {
background-color: #404040;
}
</style>
<style>
h1 {
font-size: 30pt;
}
</style>
<script>
function m1() {
document.getElementById("test2").style.backgroundColor = "black";
document.getElementById("test2").style.color = "white";
document.getElementById("p2").style.backgroundColor = "black";
document.getElementById("p2").style.color = "red";
}
</script>
</head>
<body>
<h1>HTML head tag example.</h1>
<h2 id="test2">The head tag contains information needed for the page.</h2>
<p id="p2">Head is a metadata container for HTML documents</p>
<a href="https://w3context.com/html/" target="_blank">Go to HTML home</a><br><br><br>
<button onclick="m1();">JavaScript change color</button>
</body>
</html>
Click on the "Try it Now" button to see how it works.