علامة <meta> في HTML

  • الصفحة السابقة <menu>
  • الصفحة التالية <meter>

تعريف وطرق الاستخدام

<meta> علامة تعريف المعلومات المتعلقة بوثيقة HTML. المعلومات المتعلقة بالمعلومات (المعلومات).

<meta> علامة دائمًا ما تكون في <head> علامة داخل، عادة ما يتم استخدامها لتحديد نظام الترميز، ووصف الصفحة، الكلمات المفتاحية، مؤلف الوثيقة وضبط viewport:

لا تظهر المعلومات المقدمة في المetadata على الصفحة، ولكن يمكن أن تتم معالجتها من قبل الآلات.

استخدمها المتصفح (كيفية عرض المحتوى أو إعادة تحميل الصفحة) ومحركات البحث (الكلمات المفتاحية) وخدمات الإنترنت الأخرى.

نصيحة:يمكن استخدام meta بطرق متعددة، ويمكن أن تحتوي وثيقة HTML على عدة عناصر meta.

نصيحة:من خلال <meta> يوجد طريقة واحدة لتحكم مصمم الصفحة في viewport (المنطقة المرئية للمستخدم في الصفحة) (انظر مثال "ضبط viewport" أدناه).

ملاحظة:يمكن استخدام كل عنصر meta لمستخدم واحد فقط. إذا كنت ترغب في استخدام أكثر من خاصية واحدة، فعليك إضافة عناصر meta متعددة إلى عنصر head.

انظر أيضًا:

دليل HTML:رأس HTML

دليل HTML DOM:مفهوم Meta

مثال

<head>
  <meta charset="UTF-8">
  <meta name="description" content="免费的 Web 教程">
  <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
 تقديم معلومات/القيم للخصائص من خلال رأس HTTP.
name
  • application-name
  • author
  • description
  • generator
  • keywords
  • viewport
 تحديد اسم البيانات.

الخصائص العالمية

<meta> يدعم العلامة الخصائص العالمية في HTML.

يستخدم عنصر meta ثلاثة استعمالات رئيسية:

  1. تحديد مجموعة متنوعة من بيانات الاسم/القيمة
  2. إعلان ترميز النص
  3. محاكاة حقل رأس HTTP

1: تحديد مجموعة متنوعة من زوجات البيانات الاسم/القيمة

يمكن استخدام عنصر 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.

يمكن أن يكون هناك العديد من القيم المختلفة لـ http-equiv في HTML4. وفي 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
الدعم الدعم الدعم الدعم الدعم
  • الصفحة السابقة <menu>
  • الصفحة التالية <meter>