HTML – The Head Element
The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag. Metadata elements within the <head> element provide information about the document.
1. The <title> Element
The <title> element specifies the title of the HTML document. The title is displayed in the browser’s title bar or tab.
Example:
<head>
<title>My Web Page</title>
</head>2. The <meta> Element
The <meta> element provides metadata such as character set, author, description, and keywords. It is often used to specify the character encoding for the document.
Example:
<head>
<meta charset="UTF-8">
<meta name="description" content="A comprehensive guide to HTML head elements">
<meta name="keywords" content="HTML, head, meta, title">
<meta name="author" content="John Doe">
</head>3. The <link> Element
The <link> element is used to link external resources such as stylesheets. It is most commonly used to link CSS files to an HTML document.
Example:
<head>
<link rel="stylesheet" href="styles.css">
</head>4. The <style> Element
The <style> element is used to define internal CSS within an HTML document. It is placed inside the <head> element.
Example:
<head>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
color: #333;
}
</style>
</head>5. The <script> Element
The <script> element is used to include JavaScript within an HTML document. It can either contain inline JavaScript or link to an external JavaScript file.
Example:
<head>
<script>
console.log('Hello, world!');
</script>
</head>Linking an external JavaScript file:
<head>
<script src="script.js"></script>
</head>6. The <base> Element
The <base> element specifies the base URL for all relative URLs in the document. There can only be one <base> element in a document, and it must have either an href or a target attribute.
Example:
<head>
<base href="https://www.example.com/">
</head>7. The <noscript> Element
The <noscript> element defines an alternate content to display if the browser does not support JavaScript or if JavaScript is disabled.
Example:
<head>
<noscript>
<style>
.no-js { display: block; }
</style>
</noscript>
</head>Conclusion
The <head> element is crucial for defining the metadata and linking external resources in an HTML document. By understanding the various elements that can be included within the <head> section, you can create more functional and well-optimized web pages.