HTML Tutorial by EezyTutorials

HTML - The head Element

Back to top ↑

Overview

Estimated time: 25–35 minutes

The <head> contains metadata about your document. Done right, it improves SEO, accessibility, and how your page appears when shared.

Learning Objectives

  • Set a good <title> and basic meta tags.
  • Add icons and a base URL when needed.
  • Understand what should and should not go in <head>.

Prerequisites

Common head elements

<title>Page Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A helpful description for search and sharing">
<link rel="icon" href="/favicon.ico">
<base href="https://example.com/">

Social sharing (Open Graph, Twitter)

<meta property="og:title" content="My Page">
<meta property="og:description" content="Summary">
<meta property="og:image" content="https://example.com/cover.jpg">
<meta name="twitter:card" content="summary_large_image">

Common Pitfalls

  • Missing or generic <title>.
  • No description meta; search results may be poor.
  • Putting visible content in <head> (it won’t render).

Checks for Understanding

  1. What does the viewport meta do?
  2. When would you use the <base> element?
Show answers
  1. Controls how your page scales on mobile; use it to make responsive layouts behave properly.
  2. When you want to set a base URL for resolving relative links across the document.

Exercises

  1. Add a meaningful title and description to your page and verify how it appears in the browser tab and search engine snippet (use a preview tool).
  2. Add Open Graph tags and test your URL in a social share previewer.
« Previous: HTML - Comments | Next: HTML - Page Title »