Courses / HTML · Advanced

HTML Metadata

Self-paced 40 sections 42 people viewed this
html html5 html tutorial learn html web development semantic html html forms html accessibility html seo html interview questions html projects beginner to advanced html

Section 23: Metadata, Title, Viewport and Character Encoding

Learning Objectives

  • Understand the head and body elements.
  • Use title, meta, link and script correctly.
  • Understand character encoding and the viewport.
  • Learn how metadata affects browsers, search engines and previews.

1. What Is Metadata?

Metadata provides information about an HTML document. Most document metadata belongs inside the head element and is not displayed as ordinary page content.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML Course | Codementrix</title>
  <meta name="description" content="Learn HTML with practical examples.">
</head>
<body>
  <h1>Welcome to HTML</h1>
</body>
</html>

2. The title Element

The title element defines the document title. Browsers commonly display it in the tab, and search engines may use it when presenting search results.

<title>Laravel Tutorials for Beginners | Codementrix</title>

Write a descriptive, unique title for each important page. The title element belongs inside head, not inside body.

3. Character Encoding

UTF-8 is the recommended character encoding for modern HTML documents. It supports a wide range of scripts and symbols.

<meta charset="utf-8">

Place the charset declaration near the beginning of head so browsers can identify the encoding early.

4. The Viewport Meta Tag

The viewport meta tag helps mobile browsers size the layout viewport appropriately.

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

Without an appropriate viewport declaration, a mobile browser may lay out a page using a wider virtual viewport and scale it down. The viewport tag does not by itself make a page responsive; CSS and flexible layouts are also needed.

5. Meta Description

<meta name="description" content="Learn HTML from scratch with practical examples, accessibility guidance and projects.">

The description can help search engines understand a page and may be used as a search-result snippet. Search engines may choose different text, so the description is not a guarantee of what appears in results.

6. The Link Element

The link element connects a document to an external resource, commonly a stylesheet or a favicon.

<link rel="stylesheet" href="/css/style.css">
<link rel="icon" href="/favicon.ico">

7. Loading JavaScript

External JavaScript can be included using script. The defer attribute allows a classic external script to download while HTML parsing continues and execute after parsing finishes.

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

For module scripts, defer-like deferred execution is the default behavior. Choose script loading options based on dependencies and execution requirements.

8. Open Graph Metadata

Open Graph metadata can provide information used when a page is shared on compatible social platforms.

<meta property="og:title" content="HTML Mastery | Codementrix">
<meta property="og:description" content="Learn HTML step by step with practical projects.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/html-mastery">
<meta property="og:image" content="https://example.com/images/html-course.jpg">

Replace example URLs with the real canonical page URL and a publicly accessible preview image.

9. Complete Head Example

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML Mastery Course | Codementrix</title>
  <meta name="description" content="Master HTML through examples, exercises and projects.">
  <link rel="stylesheet" href="/css/style.css">
  <link rel="icon" href="/favicon.ico">
  <meta property="og:title" content="HTML Mastery Course">
  <meta property="og:type" content="website">
</head>

Common Mistakes

  • Putting title or metadata in body instead of head.
  • Forgetting the UTF-8 charset declaration.
  • Assuming the viewport tag alone makes a website responsive.
  • Using the same title and description on every page.
  • Using placeholder URLs for social-sharing metadata on a live site.

Practice Exercises

  1. Create a complete head section for a portfolio website.
  2. Add a unique title and meta description for a blog article.
  3. Add a stylesheet link and favicon link.
  4. Add Open Graph title, description, URL and image metadata.

Revision Quiz

  1. Which element defines the browser document title?
  2. Which charset is recommended for modern HTML documents?
  3. Which meta tag helps establish the mobile layout viewport?
  4. Does a meta description guarantee the exact search-result snippet?
  5. Which element commonly links an external stylesheet?
  6. What does defer do for a classic external script?

Answer Key and Explanations

  1. title — It defines the document title.
  2. UTF-8 — It supports a broad range of characters and scripts.
  3. meta viewport — It helps browsers size the layout viewport for the device.
  4. No. A search engine may choose a different snippet.
  5. link — It connects the page to external resources such as stylesheets.
  6. Downloads without blocking HTML parsing and executes after parsing — For classic external scripts, defer also preserves document order among deferred scripts.