HTML
HTML – The Head Element
The <head> element is a core part of every HTML document. In this tutorial, we explain its role. It holds metadata and links to external resources. Browsers and search engines use this data to process your page. The content in the <head> does not display on the page. It affects page performance, accessibility, and search engine ranking.
<head> Element Syntax
Every HTML document requires one <head> element. Here is a basic template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Page Title</title>
<link rel="stylesheet" href="styles.css">
<style>
/* Internal CSS styles can go here */
body { font-family: Arial, sans-serif; }
</style>
<script src="scripts.js"></script>
</head>
<body>
<!-- Visible content goes here -->
</body>
</html>
Learning Outcomes
After reading this tutorial, you will be able to:
- Identify the role of the
<head>element in an HTML document. - Place metadata, links, and scripts in the
<head>element. - Write clear and descriptive
<title>tags. - Use the
<style>and<link>elements to add CSS. - Include metadata using
<meta>elements for character set, description, and viewport settings. - Add JavaScript with the
<script>element and provide fallback content using<noscript>. - Implement SEO tips that improve page speed and search rankings.
- Confirm that your HTML document includes one
<head>element and follows valid structure.
The Head Element in an HTML Document
The <head> element comes right after the opening <html> tag and before <body>. It holds metadata only. The metadata includes the page title, style rules, external file links, and scripts. This data helps browsers render and optimize the page.
You can add the following elements inside the <head> element:
<title><style><link><meta><script><noscript>
The HTML <title> Element
The <title> element sets the text that appears in the browser tab. It helps users and search engines. The title must be clear and descriptive.
Example:
<title>Learn HTML – SitePoint Tutorials</title>
The HTML <style> Element
The <style> element adds CSS directly within the <head>. Use this method to add styles for one page.
Example:
<style>
body {
background-color: #f4f4f4;
}
h1 {
color: #333;
}
</style>
The HTML <link> Element
The <link> element connects external style sheets to your document. This keeps your HTML clean and your styles separate.
Example:
<link rel="stylesheet" href="styles.css">
The HTML <meta> Element
The <meta> element provides data about the document. It tells the browser and search engines the character set, description, keywords, author, and viewport settings.
Examples:
<meta charset="UTF-8">
<meta name="description" content="Learn HTML and master the basics at SitePoint.">
<meta name="keywords" content="HTML, tutorial, SitePoint, web development">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The HTML <script> Element
The <script> element adds JavaScript to your page or links to a JavaScript file. Scripts add interaction and dynamic behavior. Place heavy scripts at the bottom of the <body> or load them asynchronously to improve performance.
Example:
<script src="scripts.js"></script>
The HTML <noscript> Element
The <noscript> element provides content for users who do not use JavaScript. It makes sure that key information is still visible if scripts are not available.
Example:
<noscript>
<p>JavaScript is disabled in your browser. Some features of this site may not work as expected.</p>
</noscript>
Setting The Viewport
The viewport meta tag is especially important for responsive design. It tells browsers how to control the page’s dimensions and scaling on different devices. Without this tag, your website may appear poorly formatted on mobile phones and tablets.
Example:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Browser Compatibility
The <head> element works in Chrome, Firefox, Safari, Edge, and Opera. Test your HTML pages on various browsers to confirm that metadata and links work correctly.
SEO Tips for The Head Element
- Use a short and clear
<title>tag. This tag helps users and search engines understand the page. - Use a
<meta name="description">tag that gives a brief summary of the page. This tag may increase clicks. - Link to external stylesheets instead of adding large CSS blocks directly. This practice improves page speed.
- Place inline scripts at the end of the
<body>or load them asynchronously. This speeds up page load times.
Developers should know these tips because they help improve website performance and search rankings. This knowledge leads to faster loading pages and better visibility in search results.
FAQs on HTML <head> Element
Is <head> the root element in an HTML page?
No. The <html> element is the root element. The <head> element sits inside <html> and holds metadata and resource links.
Is the content in the <head> element visible on the webpage?
No. The <head> element holds data that browsers use, such as the page title, meta tags, and links to external files.
How many <head> elements can an HTML document include?
An HTML document must include one <head> element. Adding more makes the HTML invalid and may cause browser issues.
What is the difference between the <head> element and the <header> element?
The <head> element holds data for browsers. The <header> element displays a section at the top of the page and can include navigation links, logos, and introductory text.