<head> : Document Metadata (Header) element

by

Introduction


The <head> element in HTML is used to define the metadata or header information of a document. This section doesn’t represent the content of the page that users see but contains crucial information for browsers, search engines, and other web services. It includes elements such as <title>, <meta>, <link>, <style>, <script>, and more.

Here is an example :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Webpage</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- The content of the webpage goes here -->
</body>
</html>

Key components within the <head> element:

  1. <meta charset="UTF-8">: Specifies the character encoding for the document. UTF-8 is widely used for handling various character sets.
  2. <meta name="viewport" content="width=device-width, initial-scale=1.0">: Sets the viewport properties for responsive design. It ensures the page scales properly on different devices.
  3. <title>: Defines the title of the document, which appears in the browser’s title bar or tab.
  4. <link> (Stylesheet Link): Links an external CSS file to style the document. This can also be used for linking other resources, like favicons.
  5. <script> and <style>: These elements can be placed in the <head> section to include JavaScript and CSS directly in the document.
  6. Other Metadata: The <head> element can contain various other metadata elements, such as <meta> tags for keywords, description, author, or specifying the preferred language.

Including these elements in the <head> section helps browsers and search engines understand and render the page properly. It’s important for both the functionality and the appearance of the webpage.

Remember that while the <head> section doesn’t directly display content to users, it plays a crucial role in providing information about the document’s structure, encoding, and resources.

Leave a Comment