The <meta> factor in HTML is a metadata tag that gives structured details about the doc, reminiscent of character encoding, authorship, and viewport settings. It performs a vital function in enhancing the accessibility and performance of net pages.
Syntax
The <meta> factor is self-closing and has no closing tag. It’s positioned throughout the <head> part of an HTML doc. Right here’s a fundamental syntax instance, displaying two <meta> tags, with numerous attributes:
1 |
<!DOCTYPE html>
|
2 |
<html>
|
3 |
<head>
|
4 |
<meta charset="UTF-8" /> |
5 |
<meta title="description" content material="An outline of the net web page" /> |
6 |
</head>
|
7 |
<physique>
|
8 |
<!-- net web page content material goes right here -->
|
9 |
</physique>
|
10 |
</html>
|
Examples
The <meta> factor can be utilized for specifying the character encoding of an online web page:
1 |
<!DOCTYPE html>
|
2 |
<html>
|
3 |
<head>
|
4 |
<meta charset="UTF-8" /> |
5 |
<title>My Web site</title> |
6 |
</head>
|
7 |
<physique>
|
8 |
<!-- net web page content material goes right here -->
|
9 |
</physique>
|
10 |
</html>
|
On this instance, the <meta> factor with the charset attribute is used to specify that the character encoding for the net web page is UTF-8, which might deal with a variety of characters and symbols.
Browsers have a tendency to make use of UTF-8 by default, if no character encoding is specified. Nevertheless it’s beneficial that each HTML doc embrace a meta charset tag.
The extra examples beneath illustrate how the <meta> factor can present worthwhile details about an online web page, management its habits, and improve its visibility in search engine outcomes.
<meta title="viewport">
This meta tag is important for making net pages responsive to varied gadgets and display screen sizes. It enables you to management the preliminary scale and zoom degree when a person views your net web page on a cell system.
1 |
<meta title="viewport" content material="width=device-width, initial-scale=1.0" /> |
On this instance, width=device-width units the viewport’s width to match the system’s display screen width, and initial-scale=1.0 units the preliminary zoom degree to 100%. This ensures that the net web page is displayed accurately on cell gadgets.
<meta title="description">
This meta tag is used to explain the net web page. Engines like google typically use this description in search outcomes.p>
1 |
<meta
|
2 |
title="description" |
3 |
content material="A web-based retailer for electronics and devices" |
4 |
/>
|
On this instance, the content material attribute briefly summarizes the net web page’s content material.
<meta title="key phrases">
Though not as closely utilized by serps as previously, the key phrases meta tag can nonetheless be useful. It means that you can specify a listing of key phrases associated to the net web page’s content material.Â
1 |
<meta title="key phrases" content material="electronics, devices, on-line retailer, tech" /> |
On this instance, the content material attribute comprises a comma-separated listing of related key phrases.
<meta title="creator">
This meta tag identifies the creator of the net web page.
1 |
<meta title="creator" content material="John Doe" /> |
On this instance, the content material attribute specifies the title of the creator.
<meta http-equiv="refresh">
This meta tag instructs the browser to mechanically refresh or redirect the net web page after a specified time interval. Right here’s an instance that refreshes the web page each 5 seconds.
1 |
<meta http-equiv="refresh" content material="5;url=https://instance.com" /> |
On this instance, 5 represents the variety of seconds earlier than the refresh, and url=https://instance.com specifies the URL to which the web page needs to be redirected after the refresh.
<meta http-equiv="X-UA-Suitable">
This meta tag controls the compatibility mode for older variations of Web Explorer. It’s typically used to make sure the net web page is displayed accurately in IE.
1 |
<meta http-equiv="X-UA-Suitable" content material="IE=edge" /> |
On this instance, IE=edge forces Web Explorer to make use of the very best accessible rendering mode.
The <meta> factor helps international and numerous attributes that convey important details about the doc.
-
charset: Specifies the character encoding for the doc. For instance,UTF-8is extensively used for dealing with Unicode characters. -
title: Defines the title of the metadata property. Widespread values embracedescription,key phrases, andviewport. -
content material: Gives the worth or content material related to the metadata property. For instance, the content material of adescriptionmetadata is likely to be a quick abstract of the web page’s content material. -
http-equiv: Permits the<meta>factor to simulate an HTTP response header. Widespread values embracerefreshfor automated web page refreshes andX-UA-Suitablefor controlling the doc’s rendering mode. -
titleandcontent materialare sometimes used collectively to offer structured details about the doc. As an illustration, specifyingtitle="creator"andcontent material="John Doe"identifies the net web page’s creator.
Content material
The <meta> factor comprises no seen content material however offers structured knowledge concerning the doc. It accepts textual content values for attributes like charset, title, and content material.
Did You Know?
- The
<meta>factor is important for search engine marketing (search engine optimisation). Engines like google use metadata likedescriptionto index and rank net pages. - The
viewportmeta tag is often used for making net pages conscious of completely different display screen sizes and gadgets. It helps management the web page’s preliminary scale and zoom degree when seen on cell gadgets. -
<meta>components with thehttp-equivattribute can be utilized to specify character encoding, set refresh intervals, and outline compatibility modes for older variations of Web Explorer.
