HTML – Meta Tags

Share

HTML meta tags allow the web developer to include metadata into an HTML document, which is, additional information about the web page. Meta tags typically use name/value pairs describing the respective properties of the web page. These could include information such as page author, keywords list, document description, document character set, viewport, etc.

The <meta> tag is an empty element therefore all its information is contained in the attributes. The meta tag should be placed in the head element of the HTML document.

Example

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes">
      <meta name="author" content="John Doe">
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata">
      <meta name = "description" content = "HTML Meta Tags explained">
   </head>
</html>

The metadata presented in HTML meta tags will not be displayed on the page but is machine parsable such as web browsers use it to decide how to display content, a search engine can use it to retrieve the keywords, social media sites can use it for custom data or information, etc.

Attributes

These are the attributes you can use in meta tags with the most common values indicated.

AttributeValueDescription
charsetcharacter_setSpecifies the character encoding for the HTML document
contenttextSpecifies the value associated with the http-equiv or name attribute
http-equivcontent-security-policy
content-type
default-style
refresh
Provides an HTTP header for the information/value of the content attribute
nameapplication-name
author
description
generator
keywords
viewport
Specifies a name for the metadata

Some Examples in Practice

Define keywords for search engines:

<meta name = "keywords" content = "HTML, Meta Tags, Metadata">

Define a description of your web page:

<meta name = "description" content = "HTML Meta Tags explained">

Specify the character set of your web page:

<meta charset="utf-8">

Define the author of a page:

<meta name="author" content="John Doe">

Used for responsive web design, set the viewport to make your website look good on all devices:

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

Specify when the web page was last edited:

<meta name="revised" content="Thursday, January 10th, 2022, 10:35 am">

You can read this page for a more extensive list of HTML Meta tags.

Share