برچسب <meta> در اچ‌تی‌ام‌ال

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
ابرداده را در مورد یک سند HTML تعریف می‌کند
معرفی شده در نسخهٔ:۲
حذف شده در نسخهٔ: هنوز در حال استفاده است
ویژگی‌های مجاز:به پائین مراجعه کنید
تنظیمات پیش‌فرض CSS:ندارد

{{منو اسکرول چپ|نام منو={{مرجع منو اچ‌تی‌ام‌ال|expanded=مرجع}}}}

مثال

فراداده‌های (metadata) درون یک سند اچ‌تی‌ام‌ال را تعریف کنید:

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Free Web tutorials">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="John Doe">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>


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

فراداده، داده‌هایی (اطلاعاتی) دربارهٔ داده‌است.[۱]

برچسب‌های <meta> همیشه به درون عنصر <head> می‌روند، و به ارائهٔ فراداده پیرامون سند اچ‌تی‌ام‌ال می‌پردازند.

برچسب‌های <meta> معمولاً برای مشخص کردن مجموعه کاراکترها، شرح صفحه، کلیدواژه‌ها، نگارندهٔ سند، و تنظیمات viewport استفاده می‌شوند.

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

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

یک روش برای اینکه طراحان، کنترل viewport (ناحیهٔ قابل مشاهده از یک صفحهٔ وب برای کاربر) را بدست بگیرند وجود دارد که از طریق برچسب <meta> است (مثال «تنظیم Viewport» در پایین را ببینید).

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

عنصر Chrome Internet Explorer / Edge Firefox Safari Opera
<meta> بله بله بله بله بله

ویژگی‌ها

ویژگی مقدار شرح
charset character_set رمزگذاری کاراکتر برای سند اچ‌تی‌ام‌ال را مشخص می‌کند
content text مقداری را می‌دهد که با http-equiv یا ویژگی name مرتبط است
http-equiv content-type

default-style

refresh

یک هدر HTTP، برای اطلاعات/مقدار ویژگی content ارائه می‌کند
name application-name

author

description

generator

keywords

viewport

یک نام برای فراداده مشخص می‌کند

ویژگی‌های سراسری

همچنین برچسب <meta> از ویژگی‌های سراسری (Global Attributes) در اچ‌تی‌ام‌ال پشتیبانی می‌کند.

چند مثال از <meta>

کلیدواژه‌ها را برای موتورهای جستجو تعریف کنید:

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


شرح صفحهٔ وب خود را تعریف کنید:

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

نگارندهٔ یک صفحه را تعریف کنید:

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

سند را هر ۳۰ ثانیه یک بار تازه‌سازی (refresh) کنید:

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

تنظیم viewport برای آنکه سایت شما در همهٔ دستگاه‌ها خوب دیده شود:

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

تنظیم Viewport

viewport ناحیهٔ قابل مشاهدهٔ یک صفحه وب است. بسته به دستگاه متغیر است - روی گوشی‌های موبایل کوچک‌تر است تا نسبت به صفحهٔ رایانه.

شما باید عنصر <meta> زیر را در همهٔ صفحات وب خود قرار دهید:

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

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

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

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

در اینجا مثالی از یک صفحهٔ وب بدون برچسب متایِ viewport است، و همان صفحهٔ وب با برچسب متایِ viewport.

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

بدون برچسب متای viewport

با برچسب متای viewport

شما می‌توانید در صفحهٔ طراحی وب پاسخگوی ما بیشتر دربارهٔ viewport بخوانید - آموزش Viewport.

صفحات مرتبط

آموزش اچ‌تی‌ام‌ال: Head در اچ‌تی‌ام‌ال (HTML Head)

مرجع DOM اچ‌تی‌ام‌ال: شیء Meta (Meta Object)

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

ندارد

منابع آموزشی