HTML Tutorial: Complete HTML Tutorial
About Lesson

HTML <head> Tag


Concept

The <head> tag is like the control center of an HTML document. It doesn’t display content on the web page itself but holds meta-information, links to stylesheets, and other resources that the browser uses to render the page properly. Think of it as the backstage area where all the settings are configured but not directly visible to the audience.

Elements Inside <head>

The <head> tag can contain the following elements:

  • <title> (required in every HTML document)
  • <style>
  • <base>
  • <link>
  • <meta>
  • <script>
  • <noscript>

Implementation

Example 1: Basic Usage

<!DOCTYPE html>
<html>
<head>
  <title>My Web Page</title>
</head>
<body>
  <!-- Content goes here -->
</body>
</html>

Example 2: Including Meta and Link Elements

<!DOCTYPE html>
<html>
<head>
  <title>My Web Page</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- Content goes here -->
</body>
</html>

Attributes Table

The <head> tag doesn’t have specific attributes, but it can contain various types of elements, each with its own set of attributes.


Global and Event Attributes


Global Attributes

The <head> tag supports all global attributes in HTML.

Event Attributes

The <head> tag does not support event attributes.

Browser Support Table


Browser Support
Chrome Yes
Firefox Yes
Safari Yes
Opera Yes
IE Yes

Default CSS Settings

The <head> element doesn’t have default CSS settings as it is not rendered on the page.


Conclusion

The <head> tag is the unsung hero who ensures everything runs smoothly behind the scenes. It’s where you set the stage, cue the lights, and prepare all the elements for the main event—the body of your web page.


With its ability to contain various elements like <title>, <style>, <base>, and more, it provides a robust way to control how your HTML document behaves.