The <meta> component in HTML is a metadata tag that gives structured details about the doc, similar to character encoding, authorship, and viewport settings. It performs an important function in enhancing the accessibility and performance of net pages.
Syntax
The <meta> component is self-closing and has no closing tag. It’s positioned inside the <head> part of an HTML doc. Right here’s a fundamental syntax instance, exhibiting two <meta> tags, with numerous attributes:
1 |
<!DOCTYPE html>
|
2 |
<html>
|
3 |
<head>
|
4 |
<meta charset="UTF-8" /> |
5 |
<meta identify="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> component 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> component with the charset attribute is used to specify that the character encoding for the net web page is UTF-8, which may 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 under illustrate how the <meta> component can present helpful details about an online web page, management its habits, and improve its visibility in search engine outcomes.
<meta identify="viewport">
This meta tag is crucial for making net pages responsive to varied units and display screen sizes. It allows you to management the preliminary scale and zoom stage when a consumer views your net web page on a cellular machine.
1 |
<meta identify="viewport" content material="width=device-width, initial-scale=1.0" /> |
On this instance, width=device-width units the viewport’s width to match the machine’s display screen width, and initial-scale=1.0 units the preliminary zoom stage to 100%. This ensures that the net web page is displayed appropriately on cellular units.
<meta identify="description">
This meta tag is used to explain the net web page. Search engines like google and yahoo usually use this description in search outcomes.p>
1 |
<meta
|
2 |
identify="description" |
3 |
content material="An internet retailer for electronics and devices" |
4 |
/>
|
On this instance, the content material attribute briefly summarizes the net web page’s content material.
<meta identify="key phrases">
Though not as closely utilized by search engines like google and yahoo 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 identify="key phrases" content material="electronics, devices, on-line retailer, tech" /> |
On this instance, the content material attribute incorporates a comma-separated record of related key phrases.
<meta identify="writer">
This meta tag identifies the writer of the net web page.
1 |
<meta identify="writer" content material="John Doe" /> |
On this instance, the content material attribute specifies the identify of the writer.
<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 ought 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 usually used to make sure the net web page is displayed appropriately 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 best obtainable rendering mode.
The <meta> component helps global and numerous attributes that convey important details about the doc.
-
charset: Specifies the character encoding for the doc. For instance,UTF-8is broadly used for dealing with Unicode characters. -
identify: Defines the identify of the metadata property. Frequent values embracedescription,key phrases, andviewport. -
content material: Supplies the worth or content material related to the metadata property. For instance, the content material of adescriptionmetadata could be a short abstract of the web page’s content material. -
http-equiv: Permits the<meta>component to simulate an HTTP response header. Frequent values embracerefreshfor automated web page refreshes andX-UA-Suitablefor controlling the doc’s rendering mode. -
identifyandcontent materialare sometimes used collectively to supply structured details about the doc. For example, specifyingidentify="writer"andcontent material="John Doe"identifies the net web page’s writer.
Content material
The <meta> component incorporates no seen content material however offers structured information concerning the doc. It accepts textual content values for attributes like charset, identify, and content material.
Did You Know?
- The
<meta>component is crucial for SEO (web optimization). Search engines like google and yahoo use metadata likedescriptionto index and rank net pages. - The
viewportmeta tag is usually used for making net pages conscious of totally different display screen sizes and units. It helps management the web page’s preliminary scale and zoom stage when considered on cellular units. -
<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.
Trending Merchandise
[product_category category=”trending” per_page=”8″ columns=”2″ orderby=”date” order=”desc”].
