HTML Head and Meta Tags

The HTML head element holds information about the page rather than visible content. It is where you set the page title, meta tags for search engines and social media, the favicon, and links to stylesheets and scripts.

A Complete Head Section

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Handmade Leather Wallets | Lahore Crafts</title>
  <meta name="description" content="Shop handmade leather wallets crafted in Lahore. Free shipping on orders over $50.">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="stylesheet" href="styles.css">
  <meta property="og:title" content="Handmade Leather Wallets">
  <meta property="og:image" content="https://example.com/cover.jpg">
  <script src="app.js" defer></script>
</head>
<body>
  <h1>Handmade Leather Wallets</h1>
</body>
</html>

What Each Tag Does

• charset="UTF-8": supports every language and emoji; put it first
• viewport: makes the layout fit phone screens instead of zooming out
• title: shown in the browser tab and as the headline in search results
• meta description: often used as the snippet under the search result
• link rel="icon": the small favicon in the tab
• link rel="stylesheet": loads an external CSS file
• og: tags: control the preview card when shared on social media
• script defer: loads JavaScript without blocking the page

The style Element

You can also put CSS directly in the head with a <style> element. This is handy for small pages and examples.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Internal CSS</title>
  <style>
    body { background: #fdf4ff; font-family: Georgia, serif; }
    h1 { color: #86198f; }
  </style>
</head>
<body>
  <h1>Styled from the head</h1>
</body>
</html>

Writing Good Titles and Descriptions

Keep titles under about 60 characters with the main topic first. Write descriptions of 140-160 characters that summarise the page and invite a click. Every page on a site should have a unique title and description.

Frequently asked questions

What does the meta viewport tag do?

It tells mobile browsers to use the device width as the page width, so responsive CSS works and text is not tiny.

Does the meta keywords tag help SEO?

No. Major search engines have ignored meta keywords for years. Focus on a good title, description and content.

How do I add a favicon in HTML?

Add <link rel="icon" href="/favicon.ico"> (or an SVG/PNG file) inside the head.