Dofactory.com
Dofactory.com

HTML <meta> Tag

The <meta> tag provides metadata (data about data) about a page.

This information is used by the browser to properly render the page.

Meta tags are placed in the <head> section of the page.

Example

#

An example with two <meta> tags.
One specifies the character set, and the other the viewport.

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

Using <meta>

Metadata is additional information about the page, such as:

  • Author information
  • Character set
  • Page title, description
  • Keywords
  • Expiry date
  • Viewport settings

<meta> is an empty element and carries information within its attributes.

Web pages commonly have multiple <meta> elements placed inside their <head> sections. Browsers, screen-readers, and search engines all use metadata to better interpret the page.

Note: Meta tags are not visible to the user.

More Examples

Several <meta> tags that are commonly used in web pages.

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="author" content="Debbie Anderson">

  <meta name="title" content="Web Developer Tutorials">
  <meta name="description" content="HTML, CSS, JavaScript Tutorials for Web Developers.">
  <meta name="keywords" content="HTML, CSS, JavaScript, Tutorials">
</head>

Code Explanation

<meta> - defines a metadata element

charset - sets the HTML document character encoding

name - sets the metadata name

content - sets the value of the metadata


Attributes for <meta>

This table lists the <meta> tag attributes.

Attribute Value Description
name application-name
author
description
generator
keywords
viewport
Metadata name
content text Gives the value associated with the http-equiv or name attribute
http-equiv content-type
default-style
refresh
HTTP header for the information/value of the content attribute
charset character_set HTML document character encoding
id   identifier Defines a unique identifier for the meta element.

For additional global attributes see our global attributes list.


Additional Examples


Title

#

A <meta> tag that sets the page title.
Very important for SEO (Search Engine Optimization).

<meta name="title" content="Tutorials for Web Developers">

Description

#

A <meta> tag with a short description on what the page is all about.

<meta name="description" content="HTML Tutorials in C#, .Net, ASP.NET Core">

Keywords

#

A <meta> tag with keywords associated with the page.
Keywords are comma-separated.

<meta name="keywords" content="HTML, CSS, Bootstrap, C#">

Author

#

A <meta> tag that specifies the author of the page.
Can be a person or organization.

<meta name="author" content="Debbie Anderson">

Refresh

#

A <meta> tag that refreshes the web page every 30 seconds.

<meta http-equiv="refresh" content="30">

Viewport

#

A <meta> tag that sets the user's visible area of the page according to the device size.

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

Code Explanation:

The viewport meta tag tells the browser how to control the web page's dimensions and scaling.

width=device-width - sets the web page width to follow the device screen width

initial-scale=1.0 - sets the initial zoom level when the page is first loaded

Note: The viewport <meta> element is important, especially for mobile responsive design.


Page Tags

The <meta> tag is part of a group of tags that define the structure of a web page. This group is referred to as the Page tag group. Together, they allow you to create solid, well-structured web pages.

Here is the complete list.

Element Description
<!DOCTYPE> Must appear on the first line of a page. Specifies the HTML version
<html> Defines the root container for an HTML document
<head> Creates a head container that holds page-level metadata elements
<meta> Provides metadata about a web page
<link> Defines a link to an external source, such as a style sheet
<base> Sets the base URL for all relative URLs on a page
<script> Adds JavaScript to a page. Either client- or server-side
<style> Adds CSS style elements to a page
<title> Specifies the page title that displays in the browser's tab
<body> Specifies a container for the content of the page, with text, links, images, etc.

Browser support

Here is when <meta> support started for each browser:

Chrome
1.0 Sep 2008
Firefox
1.0 Sep 2002
IE/Edge
1.0 Aug 1995
Opera
1.0 Jan 2006
Safari
1.0 Jan 2003

You may also like


Author: Jack Poorte
Published: Jun 20 2021
Last Reviewed: Sep 30 2023


What's your favorite/least favorite part of Dofactory?


Guides