HTML <meta> ਟੈਗ

  • ਪਿਛਲਾ ਪੰਨਾ <menu>
  • ਅਗਲਾ ਪੰਨਾ <meter>

course recommendation:

<meta> definition and usage

<meta> The tag defines metadata about the HTML document. Metadata is data about data (information). The tag is always located <head> element

usually used to specify charset, page description, keywords, document author, and viewport settings:

Metadata is not displayed on the page, but can be parsed by machines.

ਸੁਝਾਅ:browser (how content is displayed or a page is reloaded), search engines (keywords), and other web services use metadata.

ਸੁਝਾਅ:meta elements have various different uses, and multiple meta elements can be present in a single HTML document. <meta> By

There is a way for web designers to control the viewport (i.e., the area visible to the user in the web page) (see the "Set viewport" example below).note:

Each meta element can be used for only one purpose. If you want to use more than one feature, you should add multiple meta elements in the head element.

see also:HTML tutorial:

HTML headerHTML DOM reference manual:

Meta object

example
  <meta charset="UTF-8">
  <head>
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="description" content="免费的 Web 教程">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Bill Gates">

</head>

try it yourself

try it yourself attribute value
description charset ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਕਿ HTML ਦਸਤਾਵੇਜ਼ ਦੀ ਅੱਕਸ਼ਰ-ਸਮੂਹ ਹੈ।
content text ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਜੋ ਨਾਮ ਜਾਂ name ਵਿਸ਼ੇਸ਼ਤਾ ਨਾਲ ਜੁੜਿਆ ਹੋਇਆ ਹੈ।
http-equiv
  • content-security-policy
  • content-type
  • default-style
  • refresh
 content ਪ੍ਰਤੀਯੋਗੀ ਦੀ ਜਾਣਕਾਰੀ/ਮੁੱਲ ਨੂੰ HTTP ਬੁਲਾਰੀ ਹੈੱਡਰ ਦੇ ਰੂਪ ਵਿੱਚ ਪ੍ਰਦਾਨ ਕਰੋ。
name
  • application-name
  • author
  • description
  • generator
  • keywords
  • viewport
 ਮੇਟਾਡਾਟਾ ਦਾ ਨਾਮ ਨਿਰਧਾਰਿਤ ਕਰਦੀ ਹੈ。

ਵਿਸ਼ਵ ਪ੍ਰਤੀਯੋਗੀ

<meta> ਟੈਗ ਨੇ HTML ਵਿੱਚ ਵਿਸ਼ਵ ਪ੍ਰਤੀਯੋਗੀ.

meta ਐਲੀਮੈਂਟ ਦੀਆਂ ਤਿੰਨ ਤਰੀਕਾਂ ਦੀ ਵਰਤੋਂ ਹੁੰਦੀ ਹੈ:

  1. ਨਾਮ/ਮੁੱਲ ਪਾਰਟਨਰ ਨਿਰਧਾਰਿਤ ਕਰੋ
  2. ਚਾਰਕਟ ਐਂਕੋਡਿੰਗ ਨੂੰ ਐਲਾਨ ਕਰੋ
  3. HTTP ਬੁਲਾਰੀ ਫੀਲਡ ਨੂੰ ਸਮਾਨਤਾ ਪ੍ਰਦਾਨ ਕਰੋ

1: ਵੱਖ-ਵੱਖ ਨਾਮ/ਮੁੱਲ ਪਾਰਟਨਰ ਨਿਰਧਾਰਿਤ ਕਰੋ

meta ਐਲੀਮੈਂਟ ਨੂੰ ਨਾਮ/ਮੁੱਲ ਪਾਰਟਨਰ ਨਾਲ ਮੇਟਾਡਾਟਾ ਨਿਰਧਾਰਿਤ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ ਇਸ ਲਈ name ਅਤੇ content ਪ੍ਰਤੀਯੋਗੀਆਂ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਜਾਂਦੀ ਹੈ。

ਖੋਜ ਇੰਜਣ ਲਈ ਕੀਤੇ ਗਏ ਕੀਵਰਡਸ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰੋ:

<meta name="keywords" content="HTML, CSS, JavaScript">

ਵੈੱਬਸਾਈਟ ਬਾਰੇ ਵਿਸ਼ੇਸ਼ ਵਰਣਨ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰੋ:

<meta name="description" content="Free Web tutorials for HTML and CSS">

ਪੰਨੇ ਦੇ ਲੇਖਕ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰੋ:

<meta name="author" content="John Doe">

ਵਿਜ਼ੂਅਲ ਪੋਰਟ ਨੂੰ ਸੈਟ ਕਰੋ ਅਤੇ ਵੈੱਬਸਾਈਟ ਦੇ ਵੱਖ-ਵੱਖ ਉਪਕਰਣਾਂ 'ਤੇ ਦਿਸ਼ਾ-ਦਰਸ਼ਨ ਵਿੱਚ ਸੁਧਾਰ ਕਰੋ:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2: ਚਾਰਕਟ ਐਂਕੋਡਿੰਗ ਨੂੰ ਐਲਾਨ ਕਰੋ

charset ਪ੍ਰਤੀਯੋਗੀ ਦੀ ਵਰਤੋਂ ਨਾਲ ਇਹ ਪੰਨਾ UTF-8 ਚਾਰਕਟ ਐਂਕੋਡਿੰਗ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ:

<meta charset="UTF-8">

3: HTTP ਬੁਲਾਰੀ ਫੀਲਡ ਨੂੰ ਸਮਾਨਤਾ ਪ੍ਰਦਾਨ ਕਰੋ

http-equiv ਪ੍ਰਤੀਯੋਗੀ ਅਤੇ content ਪ੍ਰਤੀਯੋਗੀ ਦੀ ਵਰਤੋਂ ਨਾਲ ਹਰ 30 ਸੈਕੰਡ ਵਿੱਚ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਤਾਜ਼ਾ ਕਰੋ:

<meta http-equiv="refresh" content="30">

HTML5 ਵਿੱਚ ਬਦਲਾਅ

charset ਪ੍ਰਤੀਯੋਗੀ HTML5 ਵਿੱਚ ਨਵੇਂ ਆਯੋਜਿਤ ਕੀਤਾ ਗਿਆ ਹੈ。

HTML4 ਵਿੱਚ http-equiv ਪ੍ਰਤੀਯੋਗੀ ਨੂੰ ਕਿਸੇ ਵੀ ਵੱਖ-ਵੱਖ ਮੁੱਲ ਨਾਲ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਸੀ। ਪਰ ਹੁਣ HTML5 ਵਿੱਚ ਸਿਰਫ਼ ਹੇਠ ਲਿਖੇ ਮੁੱਲਾਂ ਨੂੰ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ。

HTML4 ਵਿੱਚ ਦੁਆਰਾ ਵਰਤਿਆ ਜਾਣ ਵਾਲਾ scheme ਪ੍ਰਤੀਯੋਗੀ ਹੁਣ HTML5 ਵਿੱਚ ਵਰਤਿਆ ਨਹੀਂ ਜਾਂਦਾ。

ਇਲਾਵਾ ਹੁਣ ਮੇਟਾ ਐਲੀਮੈਂਟ ਨੂੰ ਵੈੱਬਸਾਈਟ ਵਿੱਚ ਵਰਤਿਆ ਜਾਣ ਵਾਲੇ ਭਾਸ਼ਾ ਨੂੰ ਸੈਟ ਕਰਨ ਲਈ ਵਰਤਿਆ ਨਹੀਂ ਜਾਂਦਾ。

ਸੈਟ ਕਰ ਸਕਦੇ ਹਨ。

HTML5 ਨੇ ਇੱਕ ਤਰੀਕਾ ਦਿੱਤਾ ਹੈ ਜਿਸ ਨਾਲ Web ਡਿਜ਼ਾਇਨਰ ਵਿਜ਼ੂਅਲ ਪੋਰਟ ਨੂੰ <meta> ਟੈਗ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ ਤਾਕਿ ਵਿਜ਼ੂਅਲ ਪੋਰਟ ਨੂੰ ਕੰਟਰੋਲ ਕੀਤਾ ਜਾ ਸਕੇ。

ਤੁਸੀਂ ਸਾਰੇ ਵੈੱਬਸਾਈਟਾਂ ਵਿੱਚ ਹੇਠ ਲਿਖੇ <meta> ਵਿਜ਼ੂਅਲ ਪੋਰਟ

<meta name="viewport" content="width=device-width, initial-scale=1.0">

ਇਹ ਬਰਾਉਜ਼ਰ ਨੂੰ ਪੰਨੇ ਦੇ ਮਾਪ ਅਤੇ ਜ਼ੋਮ ਦੀ ਕਿਵੇਂ ਕੰਟਰੋਲ ਕਰਨਾ ਹੈ ਇਸ ਬਾਰੇ ਜਾਣਕਾਰੀ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।

width=device-width ਕੁਝ ਨੂੰ ਪੰਨੇ ਦੀ ਚੌਡਾਈ ਨੂੰ ਉਪਕਰਣ ਦੀ ਸਕਰੀਨ ਦੀ ਚੌਡਾਈ ਨਾਲ ਸਮਾਨ ਕਰ ਦਿੱਤਾ ਗਿਆ ਹੈ (ਉਪਕਰਣ ਨਾਲ ਨਿਰਭਰ ਹੈ)。

ਜਦੋਂ ਬਰਾਉਜ਼ਰ ਪਹਿਲੀ ਵਾਰ ਪੰਨੇ ਨੂੰ ਲੋਡ ਕਰਦਾ ਹੈ ਤਾਂinitial-scale=1.0 ਕੁਝ ਸੈਟਿੰਗਾਂ ਨੂੰ ਮੁੱਢਲੀ ਜ਼ੋਮ ਲੈਵਲ ਸੈਟ ਕੀਤਾ ਗਿਆ ਹੈ。

ਹੇਠ ਵਿੱਚ ਵੱਖ-ਵੱਖ ਸੈਟਿੰਗਾਂ ਦੇ ਨਾਲ ਮੇਟਾ ਟੈਗ ਦੇ ਬਿਨਾ ਦੀ ਵੈੱਬਸਾਈਟ ਅਤੇ ਮੇਟਾ ਟੈਗ ਦੇ ਨਾਲ ਦੀ ਵੈੱਬਸਾਈਟ ਦੇ ਉਦਾਹਰਣ ਦਿੱਤੇ ਗਏ ਹਨ:

ਸੁਝਾਅ:ਅਗਰ ਤੁਸੀਂ ਸਮਾਰਟਫੋਨ ਜਾਂ ਟੇਬਲੇਟ ਉੱਤੇ ਇਹ ਪੰਨਾ ਦੇਖ ਰਹੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਹੇਠਲੇ ਦੋ ਲਿੰਕਾਂ 'ਤੇ ਕਲਿੱਕ ਕਰ ਸਕਦੇ ਹੋ ਕਿ ਵੱਖ-ਵੱਖ ਮੌਕਿਆਂ ਨੂੰ ਦੇਖ ਸਕੋ



ਵਿਜੂਅਲ ਪੋਰਟ ਮੇਟਾ ਟੈਗ ਦੇ ਬਿਨਾ


ਵਿਜੂਅਲ ਪੋਰਟ ਮੇਟਾ ਟੈਗ ਦੇ ਨਾਲ

ਮੂਲਤਬੀ CSS ਸੈਟਿੰਗ

ਨਹੀਂ ਹੈ。

ਬਰਾਉਜ਼ਰ ਸਮਰਥਨ

ਚਰਾਮਸ ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸੈਫਾਰੀ ਓਪੇਰਾ
ਚਰਾਮਸ ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸੈਫਾਰੀ ਓਪੇਰਾ
ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ
  • ਪਿਛਲਾ ਪੰਨਾ <menu>
  • ਅਗਲਾ ਪੰਨਾ <meter>