HTML Head and Meta Tags

The <head> section of an HTML document contains important information about the page — not the visible content. This information is read by browsers, search engines, and social media platforms to understand and display the page correctly.

The <head> Section

The <head> tag sits between <html> and <body>. Everything inside it is invisible to the user on the page itself.

<html>
  <head>
    <!-- Everything here is metadata -- not visible on the page -->
    <meta charset="UTF-8">
    <title>Page Title</title>
  </head>
  <body>
    <!-- Visible content here -->
  </body>
</html>

The <title> Tag

The <title> tag sets the name shown in the browser tab. It also appears as the clickable headline in Google search results.

<title>HTML Beginner Course – Free Lessons | eStudy247</title>

Meta Tags

A <meta> tag provides metadata about the HTML document. Meta tags are self-closing and are placed inside the <head> section.

1. Character Encoding

Defines the character set used by the page. UTF-8 supports virtually every language in the world.

<meta charset="UTF-8">

2. Viewport (Mobile Responsiveness)

Controls how the page is scaled and displayed on mobile devices. Without this tag, the page may appear zoomed out on phones.

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

3. Description

Provides a short summary of the page content. Search engines often use this text as the paragraph displayed below the page title in search results.

<meta name="description" content="Learn HTML from scratch with free beginner-friendly lessons and examples.">

4. Keywords (Deprecated)

Was once used to list keywords for search engines, but modern search engines no longer use this tag. It is rarely included today.

<meta name="keywords" content="HTML, web development, beginner, tutorial">

5. Author

Specifies the author or creator of the web page.

<meta name="author" content="John Smith">

6. Robots (Search Engine Indexing)

Tells search engine bots whether to index the page and follow its links.

<!-- Allow indexing and following links (default behavior) -->
<meta name="robots" content="index, follow">

<!-- Block indexing (private pages) -->
<meta name="robots" content="noindex, nofollow">

7. Page Refresh / Redirect

Automatically refreshes or redirects the page after a set number of seconds.

<!-- Refresh the current page every 30 seconds -->
<meta http-equiv="refresh" content="30">

<!-- Redirect to another URL after 5 seconds -->
<meta http-equiv="refresh" content="5; url=https://example.com">

Linking External Files

Linking a CSS Stylesheet

<link rel="stylesheet" href="styles.css">

Linking a Favicon (Browser Tab Icon)

A favicon is the small icon shown in the browser tab next to the page title.

<link rel="icon" href="favicon.ico" type="image/x-icon">

Linking JavaScript

<script src="script.js"></script>

Complete Head Section Example

<!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="Free HTML course for beginners with practical examples.">
  <meta name="author" content="eStudy247">
  <meta name="robots" content="index, follow">
  <title>HTML Course – Learn HTML for Free</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="icon" href="favicon.ico">
</head>
<body>
  <h1>Welcome to the HTML Course</h1>
</body>
</html>

Common Head Tags – Quick Reference

Tag	Purpose
`<title>`	Sets browser tab text and SEO headline
`<meta charset>`	Character encoding (UTF-8 recommended)
`<meta viewport>`	Makes page responsive on mobile
`<meta description>`	Search engine result description
`<meta author>`	Name of the page creator
`<meta robots>`	Controls search engine indexing
`<link rel="stylesheet">`	Links an external CSS file
`<link rel="icon">`	Sets the tab favicon
`<script src>`	Links an external JavaScript file

Key Points to Remember

The <head> section contains metadata, not visible content
Always include <meta charset="UTF-8"> and <meta name="viewport">
The <title> tag is critical for SEO and browser tab display
The description meta tag helps search engines show a useful summary
Link CSS files in the <head> and JavaScript files just before the closing </body> tag for best performance

Previous lessons

Back to courses

Next lessons