Meta Information

Provide metadata like character set, viewport, and description.

Syntax<meta name="description" content="Free tutorials">

The <meta> element provides metadata about the HTML document. Metadata is data about data — it is not displayed but is used by browsers and search engines.

Common meta tags

  • <meta charset="UTF-8"> — sets the character encoding.
  • <meta name="viewport"> — controls responsive layout on mobile.
  • <meta name="description"> — a summary for search engines.

Example

Try it yourself
Loading editor…
Press Run to see the result.

When to use it

  • An SEO team adds <meta name="description"> to every page to control the text shown in Google search results.
  • A developer adds <meta name="viewport"> to ensure the site scales correctly on mobile devices.
  • A security engineer adds <meta http-equiv="Content-Security-Policy"> to restrict which scripts the page can load.

More examples

Charset and viewport meta tags

charset sets the character encoding; viewport makes the layout responsive on mobile screens.

Example · html
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

SEO description and author meta

These meta tags provide search engines with a description, author, and topic keywords for the page.

Example · html
<head>
  <meta name="description" content="Learn HTML from scratch with interactive examples.">
  <meta name="author" content="SoundsCode Team">
  <meta name="keywords" content="HTML, tutorial, web development">
</head>

Robots and refresh meta tags

robots controls search-engine crawling; http-equiv refresh redirects users to a new URL after a delay.

Example · html
<head>
  <meta name="robots" content="index, follow">
  <!-- Redirect to new URL after 5 seconds -->
  <meta http-equiv="refresh" content="5; url=https://example.com/new-page">
</head>

Discussion

  • Be the first to comment on this lesson.
Meta Information — HTML | SoundsCode