Hey there!
In our previous posts, we explored how to structure HTML documents using semantic tags like <header> and <main>, and how to build layouts with <div> and <span>. But before your content even shows up in the browser, there’s a powerful part of every HTML page working quietly behind the scenes—the <head> section.
This is where the <meta> tag lives, and though it’s invisible to users, it plays a huge role in how your website behaves, how it’s displayed, and how it’s understood by search engines, social platforms, and browsers.
In this post, we’ll unpack what the <head> section is, what the <meta> tag does, and how to use both effectively in your projects.
Let’s get started!
1. What Is the <head> Section?
The <head> element is a container for metadata—data about your HTML document. It’s placed before the <body> section and is not visible on the page.
Inside the <head>, you typically include:
- The page title
- Character encoding
- CSS and script links
- Viewport settings for responsive design
- Meta tags for SEO, social sharing, and more
Basic Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Webpage</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
2. What Is the <meta> Tag?
The <meta> tag provides information about the page—like character encoding, page description, author name, and viewport settings.
It’s a self-closing tag:
<meta name="description" content="Learn HTML meta tags and the head section">
Let’s go through some of the most common (and important) meta tags.
3. Essential Meta Tags You Should Know
a. Character Encoding
<meta charset="UTF-8">
This tells the browser how to read your text. UTF-8 supports most characters from all languages, including emojis. It should be one of the first things in your <head>.
b. Viewport for Responsive Design
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This ensures your layout works well on mobile devices by setting the width of the page to the device’s screen width.
c. Page Description (SEO)
<meta name="description" content="A beginner’s guide to HTML meta tags and head elements.">
This description is often what search engines show under your site title in search results.
d. Author
<meta name="author" content="Irshad">
Let’s the world (and tools like browsers or CMSs) know who wrote the content.
e. Keywords (Less Important Today)
<meta name="keywords" content="HTML, meta, web development, beginner">
This used to help with SEO, but most search engines now ignore it. Still okay for internal purposes or older platforms.
f. Robots (Control Indexing)
<meta name="robots" content="index, follow">
Tells search engines whether they can index the page and follow its links. Example:
noindex= don’t show in search resultsnofollow= don’t follow the links on the page
g. Open Graph Tags (for Social Media Sharing)
These are not standard <meta> tags but are very useful for Facebook, LinkedIn, etc.
<meta property="og:title" content="Understanding the Meta Tag">
<meta property="og:description" content="Learn how meta tags affect SEO and sharing.">
<meta property="og:image" content="https://example.com/image.jpg">
They help control how your page looks when shared.
h. Favicon (Site Icon)
<link rel="icon" href="/favicon.ico">
Not a meta tag, but often placed in the <head>—adds a browser tab icon.
4. Putting It All Together
Here’s a complete <head> section for a modern, well-structured web page:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Learn about the HTML <meta> tag and head section.">
<meta name="author" content="Irshad">
<meta name="robots" content="index, follow">
<!-- Social Sharing -->
<meta property="og:title" content="Understanding HTML Meta Tags">
<meta property="og:description" content="A complete guide to HTML meta tags and head.">
<meta property="og:image" content="https://example.com/preview.jpg">
<!-- Page Title -->
<title>HTML Meta Tags Guide</title>
<!-- Favicon -->
<link rel="icon" href="/favicon.ico">
</head>
This setup ensures:
- Proper text rendering
- Mobile responsiveness
- Good SEO metadata
- Shareable previews on social platforms
5. What Happens If You Skip the <meta> Tag?
If you don’t define meta tags, your page might:
- Display weird characters (like �) due to wrong encoding
- Look broken on mobile
- Miss out on SEO traffic
- Appear poorly when shared on social media
While your page will still technically work, meta tags help it work better across platforms.
Summary
What You Learned:
The purpose of the <head> section
How to use the <meta> tag for encoding, SEO, and responsiveness
Best practices for social sharing and indexing
Why even “invisible” HTML tags matter
Next Steps?
Want to make your page even more polished? Try adding:
- Custom fonts via Google Fonts in the
<head> - External CSS and JS links
- Schema markup for advanced SEO
Until next time—happy coding!
One thought on “11. Understanding the <meta> Tag and <head> the HTML Section”