The <head> element is a special section of an HTML document that contains metadata — information about the webpage rather than visible page content.
It is placed between the <html> tag and the <body> tag.
Metadata is not displayed directly on the webpage. Instead, it provides instructions and information to browsers, search engines, and other web services.
The <head> section can contain the following elements:
<title>
<style>
<meta>
<link>
<sript>
<base>
The <title> element defines the name of the webpage.
It appears in the browser tab.
It appears in search engine results.
It is shown when a user bookmarks the page.
The <title> tag is required in every HTML document.
Helps search engines understand your page.
Improves SEO (Search Engine Optimization).
Makes your page easier to identify in bookmarks and tabs.
A clear and meaningful title improves user experience and search visibility.
The <style> element is used to add internal CSS styles to a webpage.
It allows you to define how HTML elements should look.
body { background-color: lightgray; }
h1 { color: darkblue; }
p { color: black; }
</style>This CSS applies only to the current HTML document.
The <link> element connects the current document to an external resource.
It does not display content but helps browsers and search engines understand the page.
Common Uses of <meta>
Define Character Encoding
Ensures correct display of text and special characters.
Used by search engines in search results.
Provides search-related terms (less important in modern SEO but still valid).
Reloads the page every 30 seconds.
The viewport controls how a webpage appears on different devices.
Since screen sizes vary (mobile, tablet, desktop), it is important to include the viewport setting.
width=device-width makes the page match the device's screen width.
initial-scale=1.0 sets the initial zoom level.
Without this tag, websites may appear zoomed out or improperly scaled on mobile devices.
The <script> element is used to add JavaScript to a webpage.
JavaScript allows you to create interactive features.
function showMessage() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
This script changes the content of an element with the ID demo.
The <base> element sets a default base URL and/or default target for all relative links in a webpage.
Only one <base> element is allowed per document.
All relative URLs will use https://example.com/ as the starting path.
All links will open in a new tab (_blank) unless specified otherwise.
The <head> section stores metadata about the webpage.
It is placed between <html> and <body>.
<title> defines the page title (required).
<style> adds internal CSS.
<link> connects external resources like CSS files.
<meta> provides page information (charset, description, viewport, etc.)
<script> adds JavaScript functionality.
<base> defines a default base URL or link target.