HTML <meta> Tag
We will look at HTML Tag meta with examples in this post. It should meet the learning needs.
The HTML <meta> tag is a metadata element that provides information about a web page. It is placed within the <head> section of an HTML document and is not visible to the user.
Metadata within HTML documents can be described as follows:
Example:
Search engine keywords are classified as follows:
Example:
Provide a brief description of your website as follows:
Example:
A page’s author can be stated as follows:
Example:
The document should be refreshed every 45 seconds as follows:
Example:
You can make your website look good on all devices by setting the viewport as follows:
Example:
Here is example of the <meta> tag with all of its uses:
Example:
Tag Meta Usage
The Tag meta <meta> specifies metadata for an HTML document. The term metadata refers to data (information) about data.
The <meta> tags are generally included within the <head> element. They are primarily used to identify the character set, page details, keywords, author of a document and viewport settings.
The metadata will not appear on the page but will be processed by the computer.
The browser relies on metadata (to determine how to render content or reload pages), search engines (keywords), and various web services.
A Tag <meta> gives web designers access to the viewport (the area visible to users) via the <meta> tag (for an example, see “Setting The Viewport” below).
Sure, here are some common uses of the HTML <meta> tag :
- Describing the web page for search engines and social media shares.
- Specifying the character encoding used in the document.
- Setting the viewport for mobile devices.
- Controlling search engine indexing and following or nofollowing links.
- Providing author information for the web page.
- Specifying relevant keywords for search engine optimization (SEO).
- Redirecting the user to a different page after a specified amount of time.
Attributes
Global
The Tag <meta> includes the Global Attributes in HTML.
Attributes List
| Attribute | Value | Overview |
|---|---|---|
| content | text | Provides the value that corresponds to the http-equiv or name attributes. |
| charset | character_set | This attribute indicates the character encoding used in HTML documents. |
| http-equiv | content-security-policy content-type default-style refresh | Incorporates content attribute information into an HTTP header. |
| name | application-name author description generator keywords viewport | Indicates the metadata’s name. |
Configuring the Viewport
A viewport is a web page section presented to the user when discussing Tag <meta>.
A mobile phone display will be narrower than a computer display – the size differs with the device. Every time you create a web page, you will need to use the following <meta> element:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>.
The browser uses these guidelines to manage the dimensions and scaling of the page.
It enables the width of the page to be determined by the screen-width of the device (which will differ from device to device).
As soon as the browser retrieves the page, the initial-scale=1.0 part determines the zoom level.
The following is an example of a web page lacking the viewport meta tag and the same web page containing it – Please click on the two links at the bottom to see the variations if you are viewing this page on a phone or tablet.
Without the
viewport meta tag
With the
viewport meta tag
Browser Compatibility
| Element |  |  |  |  |  |
|---|---|---|---|---|---|
| <meta> | Yes | Yes | Yes | Yes | Yes |
HTML <meta> Tag Advantages
Here are some advantages of using the HTML <meta> tag:
- By using the <meta> tag to specify relevant keywords and descriptions for the web page, web developers can improve its visibility in search engine results pages (SERPs) and drive more traffic to the site.
- By setting the viewport using the <meta> tag, web developers can ensure that the web page is displayed properly on mobile devices, which improves the user experience and reduces bounce rates.
- By specifying the character encoding using the <meta> tag, web developers can ensure that special characters and symbols are displayed correctly on the web page, which improves its readability and usability.
- By providing alternative text for images and other media using the <meta> tag, web developers can improve the accessibility of the web page for users with disabilities.
- By using the <meta> tag to specify caching policies and other performance optimizations, web developers can improve the loading times of the web page, which enhances the user experience and reduces bounce rates.
