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.
| Attribute | Value | Description |
| charset | character_set | Specifies the character encoding for the HTML document |
| content | text | Specifies the value associated with the http-equiv or name attribute |
| http-equiv | content-security-policy content-type default-style refresh |
Provides an HTTP header for the information/value of the content attribute |
| name | application-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.
