The `<meta>` tag is an HTML tag that is used to provide metadata about an HTML document. Metadata is information about data, and it is used to help search engines, social media platforms, and other applications understand what the webpage is about. In this tutorial, we will explain how to use the `<meta>` tag and its attributes.
Syntax
The `<meta>` tag is a self-closing tag and does not require a closing tag. Here is the syntax:
<meta attribute1=”value1″ attribute2=”value2″>
Here, `attribute1` and `attribute2` are the attributes of the `<meta>` tag, and `value1` and `value2` are the values for those attributes.
Common attributes of the `<meta>` tag
`name`
The `name` attribute is used to specify the type of metadata. For example, the `name` attribute can be set to `description` to provide a brief description of the webpage. Here is an example:
<meta name=”description” content=”This is a tutorial on the <meta> tag.”>
`content`
The `content` attribute is used to specify the value of the metadata. For example, if the `name` attribute is set to `description`, the `content` attribute can be set to the actual description of the webpage. Here is an example:
<meta name=”description” content=”This is a tutorial on the <meta> tag.”>
`charset`
The `charset` attribute is used to specify the character encoding of the document. For example, the `charset` attribute can be set to `UTF-8` to specify that the document is encoded using UTF-8. Here is an example:
<meta charset=”UTF-8″>
`http-equiv`
The `http-equiv` attribute is used to provide an HTTP header for the document. For example, the `http-equiv` attribute can be set to `refresh` to specify that the document should be refreshed after a certain amount of time. Here is an example:
<meta http-equiv=”refresh” content=”5;url=https://example.com/”>
This example will refresh the page after 5 seconds and redirect the user to `https://example.com/`.
Common uses of the `<meta>` tag
Setting the title of the webpage
The `<title>` tag is used to specify the title of the webpage. However, search engines and social media platforms often display the title of the webpage based on the `<meta>` tag. Here is an example:
<head>
<title>My webpage title</title>
<meta name=”title” content=”My webpage title”>
</head>
Providing a description of the webpage
The `<meta>` tag can be used to provide a brief description of the webpage. This description is often displayed by search engines and social media platforms. Here is an example:
<meta name=”description” content=”This is a tutorial on the <meta> tag.”>
Specifying keywords for the webpage
The `<meta>` tag can be used to specify keywords for the webpage. However, search engines no longer use keywords as a major factor in their ranking algorithms. Here is an example:
<meta name=”keywords” content=”HTML, tutorial, meta tag”>
Conclusion
The `<meta>` tag is an important HTML tag that provides metadata about a webpage. The `name` and `content` attributes are the most commonly used attributes of the `<meta>` tag. The `<meta>` tag can be used to specify the title and description of the webpage, as well as keywords for the webpage.
