The <head> of your HTML page is where you put invisible information that matters a lot — how the page should be rendered, what it is about, and how it shows up when shared on social media. Meta tags are the workhorses of the head section.
Charset and Viewport
charset="UTF-8" ensures your page displays characters correctly, from English to Japanese to emoji. The viewport meta tag tells mobile browsers how to scale the page — without it, your site will look zoomed out on phones.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Description and Keywords
The description meta often appears under your page title in search results. Write a compelling 150-character summary. keywords used to matter for SEO but most search engines ignore it now. Still, it does not hurt to include a few relevant terms.
<meta name="description" content="Learn HTML from scratch with interactive examples and easy-to-follow tutorials.">
<meta name="keywords" content="HTML, web development, coding, beginners">
Open Graph Tags for Social Sharing
When someone shares your page on Facebook, Twitter, or LinkedIn, Open Graph tags control what shows up — the title, description, and image. Without them, the platform has to guess, and it often gets it wrong.
<meta property="og:title" content="Learn HTML - Free Tutorials">
<meta property="og:description" content="Master HTML with hands-on examples.">
<meta property="og:image" content="https://mysite.com/thumbnail.jpg">
<meta property="og:url" content="https://mysite.com/learn-html">
Other Useful Meta Tags
You can also set the author, tell search engines not to index a page with robots, or refresh the page after a delay. There are dozens of meta tags, but you will use charset, viewport, and description on almost every project.
<meta name="author" content="Your Name">
<meta name="robots" content="index, follow">