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.