Advanced HTML
HTML Head Element Tags
The
<head>element in HTML contains metadata - information about the web page that is not visible directly on the browser screen but is essential for SEO, browser behavior, linking styles, and scripts.
Everything inside the<head>helps define how your webpage is displayed and behaves.
Basic Syntax
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Web Page</title>
<meta charset="UTF-8">
<meta name="description" content="Learn HTML Head Elements">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="Your Name">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>Welcome to My Web Page</h1>
</body>
</html>Common HTML Head Tags
| Tag | Description | Example |
|---|---|---|
<title> | Defines the title of the page (shown in browser tab). | <title>HTML Tutorial</title> |
<meta> | Provides metadata like description, keywords, author, viewport. | <meta name="description" content="Learn HTML easily"> |
<link> | Links external CSS or resources. | <link rel="stylesheet" href="style.css"> |
<style> | Embeds internal CSS styles. | <style>body { background: #f9f9f9; }</style> |
<script> | Adds JavaScript code or links to an external JS file. | <script src="main.js"></script> |
<base> | Sets a base URL for all relative links on the page. | <base href="https://example.com/"> |
<noscript> | Defines alternative content if JavaScript is disabled. | <noscript>Please enable JavaScript</noscript> |
<link rel="icon"> | Adds a favicon to the page. | <link rel="icon" href="favicon.ico"> |
Important Meta Tags
Character Encoding
html
<meta charset="UTF-8">Ensures proper display of text and emojis in all languages.
Viewport (for mobile responsiveness)
html
<meta name="viewport" content="width=device-width, initial-scale=1.0">Makes your website responsive on different devices.
SEO Metadata
html
<meta name="description" content="Learn HTML Head Tags with examples">
<meta name="keywords" content="HTML, Head, Meta Tags, Tutorial">
<meta name="author" content="HTML5 & CSS3">Social Media Sharing (Open Graph Tags)
html
<meta property="og:title" content="HTML Head Tags Tutorial">
<meta property="og:description" content="Learn how to use HTML head elements effectively">
<meta property="og:image" content="thumbnail.jpg">
<meta property="og:url" content="https://html5andcss3.org/html-head-tags">Example: Complete Head Section
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Learn all HTML Head Tags with examples">
<meta name="keywords" content="HTML, Head, Meta, SEO, CSS">
<meta name="author" content="HTML5 & CSS3">
<title>HTML Head Tags Tutorial</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" href="favicon.ico">
<script src="app.js"></script>
</head>
<body>
<h1>Welcome to the HTML Head Tags Tutorial</h1>
</body>
</html>Why the Head Section Matters
- Helps browsers interpret content correctly
- Provides SEO and social media optimization
- Enables linking external styles and scripts
- Controls responsive behavior and accessibility
Browser Support
Chrome | Edge | Firefox | Safari | Opera | IE9+ |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |
Conclusion
The <head> section is the control center of your HTML document.
It tells browsers, search engines, and users’ devices how to interpret your page, making it a critical part of every web project.