<meta>

The <meta> tag specifies metadata about the document — such as character encoding, description, and viewport settings. Place it inside <head>. It does not affect what is directly displayed on the page, but it influences how browsers and search engines behave.

Syntax

<!-- Specify character encoding -->
<meta charset="UTF-8">

<!-- Combination of name and content attributes -->
<meta name="description" content="A description of the page.">

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

<!-- http-equiv attribute -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

Attribute List

Attribute	Description
charset	Specifies the character encoding of the document. Use `UTF-8` for modern web pages.
name	Specifies the type of metadata. Common values include `description`, `keywords`, and `viewport`.
content	Specifies the value corresponding to the `name` or `http-equiv` attribute.
http-equiv	Specifies information equivalent to an HTTP header. Common values include `X-UA-Compatible`.
property	Used with extended metadata such as OGP (Open Graph Protocol).

Common name Values

name value	Description
description	A description of the page. May appear in search engine results.
keywords	Keywords for the page. Largely ignored by major modern search engines.
viewport	Controls the display settings on mobile devices such as smartphones.
robots	Provides instructions to search engine crawlers. Values include `noindex` and `nofollow`.
author	Specifies the author of the page.

Sample Code

<head>
  <!-- Character encoding: always place this first inside <head> -->
  <meta charset="UTF-8">

  <!-- Viewport: required for smartphone support -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Page description (shown in search results) -->
  <meta name="description" content="A beginner-friendly guide to using HTML.">

  <!-- OGP (controls how the page appears when shared on social media) -->
  <meta property="og:title" content="Page Title">
  <meta property="og:description" content="A description of the page.">
  <meta property="og:image" content="https://example.com/ogp.png">
</head>

Result

The code above does not produce any visible output on the page, but it communicates page information to browsers, social media platforms, and search engines. On smartphones, the viewport setting ensures the page is displayed at the appropriate width.

Notes

Always place <meta charset="UTF-8"> at the very beginning of <head>. If the character encoding declaration appears too late, the browser may misidentify the encoding and display garbled text.

<meta name="viewport" content="width=device-width, initial-scale=1.0"> is required for responsive design on smartphones. Without it, smartphones will render the page at a desktop width and scale it down.

OGP (property="og:...") is a mechanism that controls the title, description, and image displayed when a URL is shared on social media such as Facebook or X (formerly Twitter). It is a good idea to configure this when publishing a website.