HTML Head Element
Last Updated :
22 Jan, 2024
The HTML <head> element acts as a container for crucial metadata that defines the document’s essential attributes. Positioned between the <html> and <body> tags, elements such as <title>, <style>, <meta>, <link>, <script>, and <base> are wrapped inside The HTML <head> element. Additionally, The information contained by the <head> element is not displayed by the browser on the web page.
HTML head Elements
<head> |
A container for metadata, placed between the <html> and <body> tags. |
<title> |
Required element that defines the title of the document. |
<style> |
Used to define style information for a single document. |
<link> |
Often used to link to external style sheets. |
<meta> |
They are typically used to specify the character set, page description, keywords, author of the document, and viewport settings. |
<script> |
Used to define client-side JavaScript. |
<base> |
Specifies the base URL and target for all relative URLs in a page. |
HTML <title> Element
The title tag is an important element of a webpage that is used to provide the title of the page. It should contain only text and there can only be one <title> element in an HTML document. To make your webpage more informative, it is advisable to use a detailed and descriptive title instead of a short one.
Example: Implementation of title tag.
HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML <title> Tag</title>
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>
Welcome to GeeksforGeeks!
</p>
</body>
</html>
|
Output:
HTML <style> Element
The HTML <style> element is used to embed or link to CSS styles within a webpage, allowing developers to define the visual presentation of HTML elements. It enhances the design and layout of a document by specifying color, font, spacing, and other styling properties.
Example: Implementation of style element with inline styling and style tag.
HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML Style Element</title>
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<h1>Hello GeeksforGeeks.</h1>
<h2 style="font-family:Chaparral Pro Light;">
Hello GeeksforGeeks.
</h2>
<h3 style="font-family:algerian;">
Hello GeeksforGeeks.
</h3>
<p style="font-family:Castellar;">
Hello GeeksforGeeks.
</p>
</body>
</html>
|
Output:
HTML <link> Element
The <link> tag in HTML is used to define a link between a document and an external resource. The link tag is mainly used to link to external style sheets making an organised structure of CSS files.
Example: Implementation of link element.
HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML Link element</title>
<link rel="stylesheet" type="text/css"
href="style.css">
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>HTML Link Element</h3>
<p>
A Computer Science portal for geeks.
It contains well written, well thought <br>
and well explained computer science and
programming articles.
</p>
</body>
</html>
|
CSS
Output:
The HTML <meta> element provides metadata about an HTML document, conveying information like character encoding, viewport settings for responsiveness, and other essential details. It contributes to proper rendering and search engine optimization without being visibly displayed on the webpage.
- It specifies the character set used for encoding the webpage.
<meta charset="UTF-8">`:
- It defines keywords for search engines related to the webpage content.
<meta name="keywords" content="HTML, CSS, JavaScript">
- Provides a brief description of the web page’s content for search engine results.
<meta name="description" content="Free Web tutorials">
- Identifies the author of the webpage.
<meta name="author" content="John Doe">
- Refreshes the document automatically every 60 seconds.
<meta http-equiv="refresh" content="60">
- Sets the viewport to ensure proper display on various devices by adjusting the width and initial scaling.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Example: The implementation of meta tag.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description"
content="coding journey">
<title>HTML meta tag</title>
<style>
h1,
p {
color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>
Explore the world of coding
with GeeksforGeeks <br>with
our free tutorials on HTML,
CSS, and JavaScript. Enhance
your skills and build amazing
websites!
</p>
</body>
</html>
|
Output:
Setting the viewport
The viewport is the visible area of a web page for the user. It differs based on the device, smaller on mobiles and larger on computers. Include the <meta> element below on all pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This instructs the browser on how to manage page dimensions and scaling. ‘width=device-width’ adapts the page width to the device screen, and ‘initial-scale=1.0’ sets the initial zoom level when the page loads.
HTML <script> Element
The HTML <script> element is used to embed or reference JavaScript code within an HTML document. It allows developers to add interactivity, dynamic behavior, and functionality to web pages by executing scripts written in JavaScript.
Example: Implementation of the script element.
HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML script element</title>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>HTML script Element</h2>
<p id="GFG"></p>
<script>
document.getElementById("GFG").innerHTML
= "Hello GeeksforGeeks!";
</script>
</body>
</html>
|
Output:
HTML <base> Element
The HTML <base> element sets the base URL for all relative URLs within a webpage. It helps define a starting point for resolving relative links, making it useful for establishing a consistent reference point for resources like images, stylesheets, and links.
Example: Implementation of base the element
HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML base element</title>
<style>
img {
border: 2px solid red;
}
</style>
<base href=
target="_blank" />
</head>
<body>
<img src=
width="400" height="250" />
</body>
</html>
|
Output:
Share your thoughts in the comments
Please Login to comment...