HTML <meta> تیگ

تعریف و کاربرد

<meta> برچسب تعریف می‌کند داده‌های metadata در مستند HTML. metadata داده‌های داده است (اطلاعات).

<meta> برچسب همیشه در عنصر <head> در داخل، معمولاً برای مشخص کردن کدگذاری حروف، توضیح صفحه، کلمات کلیدی، نویسنده مستند و تنظیمات ویدئو استفاده می‌شود:

metadata در صفحه نمایش داده نمی‌شود، اما می‌تواند توسط ماشین‌ها تجزیه شود.

برنامه‌های مرورگر (چگونه محتوا نمایش داده می‌شود یا صفحه بارگذاری مجدد می‌شود)، موتورهای جستجو (کلمات کلیدی) و سایر خدمات شبکه از داده‌های metadata استفاده می‌کنند.

توجه:meta دارای کاربردهای مختلفی است و می‌توان چندین عنصر meta در یک مستند HTML داشت.

توجه:از طریق <meta> برچسب، روشی برای کنترل ویدئو (یعنی فضایی که کاربر در وب‌سایت می‌تواند ببیند) وجود دارد (لطفاً به مثال زیر "تنظیم ویدئو" مراجعه کنید).

توجه داشته باشید که:هر عنصر meta فقط می‌تواند برای یک منظور استفاده شود. اگر بخواهید از ویژگی‌های بیشتری استفاده کنید، باید چندین عنصر meta در داخل عنصر head اضافه کنید.

لطفاً به: بروید

آموزش HTML:سربرگ HTML

دستورالعمل HTML DOM:مثل

مثال

<head>
  <meta charset="UTF-8">
  <meta name="description" content="آموزش‌های رایگان وب">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="Bill Gates">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

خود را امتحان کنید

ویژگی

ویژگی مقدار توضیح
charset ترجمه‌ی حروف مخصوصیت با تعیین کدگذاری حروف HTML مستند.
content متن مخصوصیت با پیوند به ویژگی http-equiv یا name.
http-equiv
  • content-security-policy
  • content-type
  • default-style
  • refresh
 content پرزن کی معلومات/مقدار کو HTTP سرسرہ کی اعلانیہ فراہم کرتا ہے۔
name
  • application-name
  • author
  • description
  • generator
  • keywords
  • viewport
 معلومات کا نام مقرر کرتا ہے۔

عالمی پرزن

<meta> تگ بھی ویب میں عالمی پرزن.

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 پرزن کا اترا نہیں ہے۔

علاوہ ازیں، اب meta عناصر کو ویب پگ کی زبان کا معین کرنے کے لئے استعمال نہیں کیا جاتا ہے。

ویجٹ پوائنٹ آؤٹ لائن سیٹ کر سکتے ہیں

HTML5 نے ایک طریقہ شروع کیا ہے جس سے ویب ڈیزائنر <meta> تگ کو شامل کرنا چاہیے تاکہ ویجٹ پوائنٹ آؤٹ لائن کنٹرول کیا جاسکے。

آپ کو تمام ویب پگ میں مندرجہ بالا <meta> ویجٹ پوائنٹ آؤٹ لائن:

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

این دستورالعمل‌ها را برای کنترل اندازه و مقیاس صفحه به مرورگر ارائه می‌دهد.

width=device-width بخشی از صفحه‌ای را به عرض صفحه نمایش دستگاه تنظیم می‌کند (بسته به دستگاه).

وقتی که مرورگر برای اولین بار صفحه را بارگذاری می‌کند،initial-scale=1.0 تنظیمات بخشی برای مقیاس اولیه.

در زیر مثال‌هایی از صفحات وب بدون تگ meta viewport و صفحات وب با تگ meta viewport آورده شده است:

توجه:اگر از تلفن یا تبلت برای مشاهده این صفحه استفاده می‌کنید، می‌توانید بر روی دو لینک زیر کلیک کنید تا تفاوت‌ها را ببینید.



بدون استفاده از تگ meta viewport


با استفاده از تگ meta viewport

تنظیمات CSS پیش‌فرض

هیچ‌یک.

پشتیبانی از مرورگر

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی