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">

HTML Metadata