برچسب <meta> HTML

تعریف و استفاده

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

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

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

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

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

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

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

لطفاً به: مراجعه کنید

تدریس HTML:سربرگ HTML

دستورالعمل DOM HTML:مفهوم Meta

مثال

<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> برچسب‌ها نیز از ویژگی‌های جهانی HTML.

عنصر meta سه کاربرد معمول دارد:

  1. تعیین نام/مقدارهای meta
  2. اعلام کدگذاری
  3. شبیه‌سازی فیلدهای سربرگ HTTP

1: تعیین مجموعه‌ای از نام/مقدارهای meta

عنصر meta می‌تواند با استفاده از نام/مقدار تعریف شود تا داده‌های 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 فقط می‌توان از مقادیر ذکر شده در این صفحه استفاده کرد.

ویژگی scheme در HTML4 اکنون در HTML5 استفاده نمی‌شود.

علاوه بر این، اکنون دیگر از عنصر 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
پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی