HTML Head & Meta Tags
The <head> Element
The <head> element is a container for metadata - information about the document that is not displayed on the page. It sits between <html> and <body>.
The <head> can contain: <title>, <meta>, <link>, <style>, <script>, and <base>.
Even though head content is not directly visible in the page body, it plays a huge role in how the page behaves. Search engines, browsers, social platforms, and devices all read information from the head section.
Essential Head Tags
A good head section usually includes character encoding, viewport settings, a page title, useful meta tags, linked resources, and sometimes social sharing metadata. These tags help the page render correctly and appear properly in search and previews.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Character encoding -->
<meta charset="UTF-8">
<!-- Responsive viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Page title (shown in browser tab) -->
<title>My Website | Home</title>
<!-- SEO meta tags -->
<meta name="description" content="A short description of this page (150-160 chars).">
<meta name="keywords" content="html, tutorial, web development">
<meta name="author" content="John Doe">
<!-- Prevent caching -->
<meta http-equiv="Cache-Control" content="no-cache">
<!-- Link external CSS -->
<link rel="stylesheet" href="styles.css">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png">
<!-- Open Graph (social media sharing) -->
<meta property="og:title" content="My Website">
<meta property="og:description" content="Page description for social sharing.">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com">
</head>
<body>
<!-- Page content here -->
</body>
</html>
Meta Tags Reference
Meta tags provide machine-readable information about the document. Some help with SEO, some control browser behavior, and others improve mobile rendering or social sharing.
| Tag | Purpose |
|---|---|
<meta charset="UTF-8"> | Sets character encoding - always include this first |
<meta name="viewport"> | Controls layout on mobile devices - essential for responsive design |
<meta name="description"> | Page summary shown in search engine results |
<meta name="robots"> | Controls search engine indexing (index, noindex, nofollow) |
<meta http-equiv="refresh"> | Auto-redirects after N seconds |
<link rel="canonical"> | Tells search engines the preferred URL for this page |
<link rel="stylesheet"> | Links an external CSS file |
<link rel="icon"> | Sets the browser tab favicon |
<base href="..."> | Sets the base URL for all relative links on the page |
Title and Description for SEO
The <title> tag is one of the most important elements in the head section. It appears in the browser tab and is often used by search engines as the main title in search results. The description meta tag gives search engines a short summary of the page.
A strong title should clearly describe the page, while the description should summarize the content naturally and encourage clicks. Every important page should have its own unique title and description.
<title>HTML Head and Meta Tags Tutorial | Tutorials Logic</title>
<meta
name="description"
content="Learn how to use the head element, meta tags, title, viewport, canonical links, and social sharing tags in HTML.">
Open Graph and Social Sharing
When a page link is shared on platforms like Facebook, LinkedIn, or messaging apps, those platforms often use Open Graph tags to generate the preview card. These tags help define the shared title, description, image, and URL.
<meta property="og:title" content="HTML Head & Meta Tags">
<meta property="og:description" content="Learn how to use the head section correctly.">
<meta property="og:image" content="https://example.com/preview.jpg">
<meta property="og:url" content="https://example.com/head-and-meta-tags">
Canonical and Base Tags
The canonical tag tells search engines which URL should be treated as the preferred version of a page. This is useful when similar content may be reachable from different URLs. The <base> tag sets a base URL for relative links, but it should be used carefully because it affects all relative paths on the page.
<link rel="canonical" href="https://example.com/tutorials/head-and-meta-tags">
<base href="https://example.com/assets/">
Linking CSS and JavaScript
The head section often includes CSS links and sometimes JavaScript. CSS files are typically loaded in the head so the page can render styles immediately. JavaScript is often placed near the end of the body for performance, although modern scripts can also use attributes like defer when loaded from the head.
<head>
<!-- External CSS (in <head>) -->
<link rel="stylesheet" href="css/styles.css">
<!-- Inline CSS -->
<style>
body { font-family: Arial, sans-serif; }
h1 { color: #333; }
</style>
</head>
<body>
<h1>Hello</h1>
<!-- External JS (before </body> for performance) -->
<script src="js/app.js"></script>
<!-- Inline JS -->
<script>
console.log('Page loaded!');
</script>
</body>
Best Practices
-
The
<head>element stores metadata and linked resources that are not directly shown in the page body. -
Important head tags include
<title>,<meta charset>,<meta name="viewport">, and CSS links. - The title and description meta tags help search engines and users understand the page.
- Open Graph tags improve how the page looks when shared on social platforms.
- Canonical tags help search engines identify the preferred version of a page.
- A well-structured head section improves SEO, rendering, responsiveness, and maintainability.