HTML – Meta Tags
Chapter 7 • Intermediate
Meta tags provide information about the page, not the content that appears on the page itself. They live inside the <head> section.
Search engines, browsers, and social media platforms use meta tags to understand your page.
Where do meta tags go?
Inside the <head> element, for example:
<head>
<meta charset="UTF-8">
<meta name="description" content="Learn HTML from scratch.">
</head>
Common types of meta tags
- Character set
- <meta charset="UTF-8">
- Tells the browser which character encoding to use.
- UTF-8 is the standard today and supports many languages.
- Description
- <meta name="description" content="Short summary of the page.">
- Shown as the description text in search engine results.
- Should be clear, short, and relevant.
- Keywords (old/less important now)
- <meta name="keywords" content="html, tutorial, tags">
- Was used earlier for SEO, but most search engines ignore it now to avoid spam.
- Author
- <meta name="author" content="Your Name">
- Tells who wrote the page.
- Viewport (very important for mobile)
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- Helps make your page responsive on mobile devices.
- Refresh or redirect (http-equiv)
- <meta http-equiv="refresh" content="5">
- Refreshes the page every 5 seconds.
- <meta http-equiv="refresh" content="3;url=https://example.com">
- Redirects to another URL after 3 seconds.
Note: Meta refresh redirects are not the best for UX; server-side redirects are usually better.
Why meta tags matter for SEO
- Search engines read meta tags to understand your page.
- A good description meta tag can improve click-through rates from Google.
- Correct charset and viewport tags help ensure a good user experience.
Suggested image prompt
"Search engine result snippet showing a page title and meta description, with arrows pointing from an HTML <title> and <meta name='description'> tag to the result box."
Interview-style questions from this topic
- What is a meta tag? Where is it placed in an HTML document?
- What is the purpose of the meta description tag?
- What does <meta charset="UTF-8"> do?
- Why is the viewport meta tag important for mobile devices?
- Are meta keywords still important for SEO? Why or why not?
- How can you redirect a page using a meta tag?
Hands-on Examples
Meta Tags Example
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta charset="UTF-8">
<meta name="description" content="Learning about HTML meta tags.">
<meta name="keywords" content="HTML, Meta Tags, Metadata">
<meta name="author" content="Schoolabe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="refresh" content="5">
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>This example sets the character encoding, description, keywords, author, viewport, and an automatic refresh every 5 seconds. In real projects, you will almost always use charset, description, and viewport. Keywords are less important today, but you may still see them in older code.