HTML Head Tag (element)
HTML Head element
<head> </head> tag
-The <head> element represents the container for the head section of an HTML document.
- It contains metadata, title, CSS stylesheets, JavaScript code, and other elements that provide information about the document but are not directly displayed on the web page.
- The <head> tag is used to enclose the head section of an HTML document, which contains metadata, linked resources, and other information about the web page.
- The <head> section is where you typically include resources and information that are not directly displayed on the web page but are essential for its functionality, styling, and optimization.
It is placed before the <body> section, which contains the visible content of the web page.
Here are some common uses of the <head> tag:
Defining Metadata:
- The <head> section is used to define metadata about the HTML document.
- This includes specifying the character encoding, viewport settings for responsive design, and other metadata that helps search engines, browsers, and other tools understand and process the web page correctly.
Uses of <head> tag
The <head> tag is used to enclose the head section of an HTML document, which contains metadata, linked resources, and other information about the web page.
The <head> tag in HTML is used for various purposes related to the metadata and linked resources of a web page.
Here are some common uses of the <head> tag:
1-Defining Metadata:
The <head> section is used to define metadata about the HTML document.
This includes specifying the character encoding, viewport settings for responsive design, and other metadata that helps search engines, browsers, and other tools understand and process the web page correctly.
2-Setting the Page Title:
- The <head> section contains the <title> tag, which is used to set the title of the web page.
- The title appears in the browser’s title bar or tab, and it is also used by search engines as the clickable headline in search results.
3-Linking External Resources:
- The <head> section is used to link external resources like CSS stylesheets, JavaScript files, and fonts.
- By using the <link> tag, you can connect an external CSS file (<link rel=”stylesheet” href=”styles.css”>) or an external JavaScript file (<script src=”script.js”></script>) to enhance the presentation and functionality of the web page.
4-Defining Inline Styles:
- While linking external CSS files is a common practice, the <head> section can also be used to define inline styles using the <style> tag.
- Inline styles are CSS rules directly embedded within the HTML file, allowing you to apply specific styles to individual elements.
5-Including JavaScript:
- The <head> section can include JavaScript code using the <script> tag.
- This is typically done to include external JavaScript files or to embed inline JavaScript code that provides interactivity or additional functionality to the web page.
5-Adding Metadata Tags:
The <head> section is also used to include additional metadata tags like:
<meta name=”description” content=”…”> for providing a brief description of the web page, <meta name=”keywords” content=”…”> for specifying relevant keywords, or other custom meta tags that can be utilized by search engines or other tools.
Example:
Here’s an example of an HTML document structure using the <head> and </head> tags:
open the notepad or notepad ++ then write the following code:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Web Page</title> <link rel="stylesheet" href="styles.css"> <script src="script.js"></script> </head> <body> Note: head contains meta character ,name ,title , link of css and javascript </body> </html>
Explanation:
1-The <head> element is opened right after the <html> opening tag and is closed before the <body> opening tag.
2-Inside the <head> section, we have various elements:
a)<meta> elements define metadata, such as character encoding and viewport settings.
b)The <title> element sets the title of the web page that appears in the browser’s title bar or tab.
c)The <link> element is used to link an external CSS file (styles.css) to apply styles to the document.
d)The <script> element is used to include an external JavaScript file (script.js) for additional functionality.
Note: The example above is a basic structure and does not include all possible elements or attributes. In a real web page, you would typically have more elements and attributes in the <head> section based on the specific requirements of the page.
Note:
Remember to save the above code in an HTML file (e.g., test.html) and open it in a web browser to see the rendered output.
complete code example
Here’s a complete code example that demonstrates the various uses of the <head> tag:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Web Page</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
<style>
h1 {
color: blue;
font-size: 24px;
}
</style>
<meta name="description" content="This is a sample web page.">
<meta name="keywords" content="HTML, web page, example">
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a sample web page.</p>
<button onclick="alert('Hello, world!')">Click me</button>
</body>
</html>
Explanation of the code:
1-The <meta charset=”UTF-8″> tag specifies the character encoding of the HTML document as UTF-8.
2-The <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> tag sets the viewport properties for responsive design.
3-The <title> tag sets the title of the web page to “My Web Page”.
4-The <link rel=”stylesheet” href=”styles.css”> tag links an external CSS file named “styles.css” for styling the web page.
5-The <script src=”script.js”></script> tag includes an external JavaScript file named “script.js” for additional functionality.
6-The <style> tag defines inline CSS styles for the <h1> element, setting the color to blue and the font size to 24 pixels.
7-The <meta name=”description” content=”…”> tag provides a brief description of the web page.
8-The <meta name=”keywords” content=”…”> tag specifies relevant keywords for the web page.
9-Inside the <body> section, there’s a <h1> heading, a <p> paragraph, and a <button> element with an onclick attribute that triggers an alert when clicked.
Feel free to save this code in an HTML file (e.g., index.html) and open it in a web browser to see the rendered output.
Attributes of <head> tag
The <head> tag in HTML doesn’t have any attributes of its own. However, it serves as a container for various elements that have their own attributes.
Here are some commonly used elements within the <head> section and their attributes, along with complete code examples:
<meta> element:
charset attribute: Specifies the character encoding for the HTML document.
name attribute:
Specifies the name of the metadata.
content attribute:
Provides the value for the metadata.
<head> <meta charset="UTF-8"> <meta name="description" content="This is a sample web page."> </head>
<title> element:
No specific attributes.
<head> <title>My Web Page</title> </head>
<link> element:
rel attribute:
Specifies the relationship between the current document and the linked resource.
href attribute:
Specifies the URL or path to the linked resource.
type attribute:
Specifies the MIME type of the linked resource (optional).
<head> <link rel="stylesheet" href="styles.css" type="text/css"> </head>
<script> element:
src attribute:
Specifies the URL or path to the external JavaScript file.
type attribute:
Specifies the MIME type of the script (optional).
defer attribute:
Specifies that the script should be executed after the document has been parsed.
<head> <script src="script.js" type="text/javascript" defer></script> </head>
<style> element:
No specific attributes.
<head>
<style>
h1 {
color: blue;
font-size: 24px;
}
</style>
</head><base> element:
href attribute:
Specifies the base URL for all relative URLs in the document.
<head>
<base href="https://www.example.com/">
</head>
<style> element (inline):No specific attributes.
<head>
<style>
body {
background-color: #f2f2f2;
}
</style>
</head>
<script> element (inline):
type attribute: Specifies the MIME type of the script (optional).
<head>
<script type="text/javascript">
function sayHello() {
console.log("Hello, world!");
}
</script>
</head>
<noscript> element:
No specific attributes.
<head> <noscript> <p>Please enable JavaScript to view this website.</p> </noscript> </head>
<meta> element for viewport settings:
name attribute: Should be set to “viewport”.
content attribute:
Specifies the viewport properties such as width, initial scale, and more.
<head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>
Remember that the <head> section can contain multiple instances of these elements and their attributes, depending on the requirements of your web page.
These additional examples illustrate the usage of different elements within the <head> section, showcasing their attributes and how they can be applied in HTML documents.
Example
Here’s a complete code example that includes the additional elements within the <head> section:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<base href="https://www.example.com/">
<style>
body {
background-color: #f2f2f2;
}
</style>
<script type="text/javascript">
function sayHello() {
console.log("Hello, world!");
}
</script>
<noscript>
<p>Please enable JavaScript to view this website.</p>
</noscript>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a sample web page.</p>
<button onclick="sayHello()">Click me</button>
</body>
</html>
In this code example:
1-The <base> element sets the base URL for all relative URLs within the document.
2-The <style> element includes inline CSS to set the background color of the body element.
3-The <script> element includes inline JavaScript code for the sayHello() function.
4-The <noscript> element provides a message for users who have JavaScript disabled.
5-The <meta> element specifies the viewport settings for responsive design.
Feel free to save this code in an HTML file (e.g., index.html) and open it in a web browser to see the rendered output
multichoice quiz
Here’s a multiple-choice quiz to test your knowledge about the importance of the <head> tag. The answers are provided at the end.
1-What is the purpose of the <head> tag in HTML?
a) It defines the main content of the web page.
b) It contains the visible content of the web page.
c) It provides metadata and linked resources.
d) It is used to format the text on the web page.
2-Which element is used to set the title of the web page?
a) <header>
b) <h1>
c) <title>
d) <head-title>
3-Which attribute is used to specify the character encoding in the <head> section?
a) encoding
b) charset
c) type
d) content
4-How can you link an external CSS file in the <head> section?
a) <style src=”styles.css”>
b) <css href=”styles.css”>
c) <link rel=”stylesheet” href=”styles.css”>
d) <script src=”styles.css”></script>
5-What is the purpose of the <meta name=”viewport” content=”…”> element?
a) It specifies the title of the web page.
b) It sets the background color of the web page.
c) It defines the viewport properties for responsive design.
d) It includes additional metadata about the web page.
Answers:
- c) It provides metadata and linked resources.
- c) <title>
- b) charset
- c) <link rel=”stylesheet” href=”styles.css”>
- c) It defines the viewport properties for responsive design.
1-Which element within the <head> section is used to link an external JavaScript file?
a) <link>
b) <script>
c) <style>
d) <meta>
2-What is the purpose of the charset attribute in the <meta> element?
a) It specifies the color scheme for the web page.
b) It defines the character encoding for the HTML document.
c) It sets the font family for the web page.
d) It determines the language of the web page content.
3-Which attribute is used to specify the path or URL to an external resource in the <link> element?
a) src
b) href
c) type
d) rel
4-How can you include inline CSS styles within the <head> section?
a) <style src=”styles.css”>
b) <css href=”styles.css”>
c) <link rel=”stylesheet” href=”styles.css”>
d) <style>…</style>
5-What is the purpose of the <base> element within the <head> section?
a) It sets the base font size for the web page.
b) It defines the base color scheme for the web page.
c) It specifies the base URL for all relative URLs in the document.
d) It includes a base64-encoded image for the web page.
Answers:
- b) <script>
- b) It defines the character encoding for the HTML document.
- b) href
- d) <style>…</style>
- c) It specifies the base URL for all relative URLs in the document.
References