HTML meta tags provide important information about a web page to browsers, search engines, social media platforms, and mobile devices. In this lesson, you will learn common meta tags, SEO meta tags, viewport settings, responsive web design basics, and best practices.
Meta tags are written inside the <head> element. A clean head section
helps browsers, crawlers, and social platforms understand the page.
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML Meta Tags Tutorial</title>
<meta
name="description"
content="Learn HTML meta tags, viewport, SEO tags, and responsive web design."
/>
</head>
The charset meta tag defines the character encoding used by the page.
UTF-8 is the recommended value because it supports most languages,
symbols, and special characters.
<meta charset="UTF-8" />The viewport meta tag controls how a web page is scaled and displayed on mobile devices. Without this tag, mobile browsers may render the page like a desktop page, causing text and layouts to appear too small.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />width=device-width: sets the layout width to match the device width.initial-scale=1.0: sets the initial zoom level to normal size.Responsive web design means building pages that work well on phones, tablets, laptops, and large desktop screens. The viewport meta tag is the first step to making a page responsive.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />After adding the viewport tag, use CSS media queries, flexible layouts, responsive images, and relative units to make the design adapt to different screen sizes.
.container {
width: min(100% - 2rem, 1200px);
margin-inline: auto;
}
img {
max-width: 100%;
height: auto;
}
@media (max-width: 768px) {
.layout {
display: block;
}
}The meta description summarizes the page content. Search engines may use it as the snippet in search results, so it should be clear, helpful, and keyword-friendly.
<meta
name="description"
content="Learn HTML meta tags with examples, SEO tips, viewport settings, and responsive design."
/>The robots meta tag gives indexing and crawling instructions to search engines.
<meta name="robots" content="index, follow" />
<meta name="robots" content="noindex, nofollow" />index: allows indexing.noindex: asks search engines not to index the page.follow: allows crawlers to follow page links.nofollow: asks crawlers not to follow page links.The meta keywords tag was used in older SEO practices, but modern search engines generally do not rely on it for ranking. It is better to focus on high-quality content, clear headings, internal links, and useful page structure.
<meta name="keywords" content="HTML meta tags, SEO meta tags, viewport" />noindex accidentally on important pages.<head> section.<head> element.Pro Tip
Every modern HTML page should include at least
<meta charset="UTF-8" />,
<meta name="viewport" content="width=device-width, initial-scale=1.0" />,
a unique title, and a useful meta description.