HTML - The Head Element
In HTML, the <head> element is a container that holds metadata about the HTML document. It is a crucial part of the document structure and provides information such as the document's title, character encoding, linked stylesheets, scripts, and other metadata that is not directly visible to the user when viewing the page.
The <head> element is typically placed within the <html> element, and it precedes the <body> element. Here's a basic example of an HTML document structure with a <head> element:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
</head>
<body>
<!-- Content of the HTML document goes here -->
</body>
</html>
You can click on above box to edit the code and run again.Output
Basic Structure
<meta charset="UTF-8">:
Specifies the character encoding for the document. The most common encoding is UTF-8, which supports a wide range of characters.
<meta name="viewport" content="width=device-width, initial-scale=1.0">:
Provides configuration for the viewport, affecting how the page is displayed on different devices. The example sets the viewport width to the device width and sets the initial zoom level to 1.0.
<title>:
Sets the title of the HTML document. The text within the <title> element appears in the browser's title bar or tab. It is also used by search engines and social media platforms when displaying a link preview.
<link>:
Allows the inclusion of external resources, such as stylesheets, in the HTML document. In the example, a stylesheet (.styles.css) is linked to the document.
<script>:
Allows the inclusion of JavaScript code in the HTML document. The src attribute specifies the path to an external JavaScript file (script.js), and the defer attribute is used to defer script execution until after the HTML has been parsed.
Other elements, such as <meta> tags for specifying keywords, descriptions, and other metadata, can also be included within the <head> element based on the needs of the webpage.
The <head> element focuses on providing information and resources that contribute to the document's structure, presentation, and behavior but are not directly rendered as visible content on the page. The actual content of the HTML document is placed within the <body> element.
The HTML <style> Element
Example
<style> body {background-color: powderblue;} h1 {color: red;} p {color: blue;} </style>You can click on above box to edit the code and run again.
Output
Allows the inclusion of external resources, such as stylesheets, in the HTML document. In the example, a stylesheet (styles.css) is linked to the document.