HTML Page Title and Metadata

Let’s take a closer look at the <head> section of your HTML document — where titles and metadata live.
Even though users don’t see this part directly, it’s super important for SEO, accessibility, and how browsers handle your page.

🏷️ The `<title>` Tag

The <title> tag defines the text shown in the browser tab and when users bookmark your site.

Example:

<head>
  <title>Welcome to My Website</title>
</head>

✅ Best practices:

Keep it short and descriptive (50–60 characters)
Include your focus keyword for SEO
Avoid repetition on every page

🔍 What Are Meta Tags?

Meta tags give extra information about your page — to browsers, search engines, and social platforms.
They go inside the <head> section, and they’re not visible to users directly.

📦 Common Meta Tags

✅ Charset

Defines the character set (standard for encoding text).

<meta charset="UTF-8">

Always use this! Ensures special characters like ₹, ©, or ü display correctly.

✅ Viewport (Mobile Responsive)

Tells browsers how to scale the page on different devices.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Without this, your site may look zoomed out or broken on mobile.

✅ Description

Used by search engines as the snippet shown in search results.

<meta name="description" content="Learn HTML from scratch with easy-to-follow tutorials. Perfect for beginners!">

Keep it under 160 characters and include keywords naturally.

✅ Author and Language (Optional)

<meta name="author" content="Dharmendra Rawat">
<html lang="en">

Helps identify the creator and language of the page.

🧪 Full Example: Head Section

<!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="Step-by-step HTML guide for beginners. Build web pages with ease.">
  <meta name="author" content="Dharmendra Rawat">
  <title>Learn HTML - Beginner's Guide</title>
</head>
<body>
  <!-- Your page content here -->
</body>
</html>

🤖 Advanced (Optional) Meta Tags

🔗 Open Graph Tags (for social sharing)

<meta property="og:title" content="Learn HTML the Easy Way">
<meta property="og:description" content="An easy-to-follow HTML tutorial for beginners.">
<meta property="og:image" content="https://yourdomain.com/image.jpg">

These improve how your page looks when shared on Facebook, LinkedIn, etc.

📝 Quick Recap

Tag	Purpose
`<title>`	Shows title in browser tab
`meta charset`	Defines text encoding
`meta viewport`	Makes site mobile-friendly
`meta description`	Boosts SEO visibility
`meta author`	Optional author info
`html lang="en"`	Language for screen readers and SEO

👉 Coming Up Next:

We’ll dive into HTML Headings and understand how to structure content properly using <h1> to <h6>.

📚 Next: HTML Headings