علامة HTML <meta>
مثال
وصف البيانات الوصفية في مستند HTML:
<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>البيانات الوصفية حول مستند HTML. البيانات الوصفية هي بيانات (معلومات) حول البيانات.
<meta>تدخل العلامات دائمًا داخل عنصر <head> ، وعادة ما تُستخدم لتحديد مجموعة الأحرف ووصف الصفحة والكلمات الرئيسية ومؤلف المستند وإعدادات منفذ العرض.
لن يتم عرض البيانات الوصفية على الصفحة ، لكنها قابلة للتحليل آليًا.
يتم استخدام البيانات الوصفية بواسطة المستعرضات (كيفية عرض المحتوى أو إعادة تحميل الصفحة) ومحركات البحث (الكلمات الرئيسية) وخدمات الويب الأخرى.
هناك طريقة للسماح لمصممي الويب بالتحكم في منفذ العرض (المنطقة المرئية للمستخدم لصفحة الويب) ، من خلال <meta>العلامة (راجع مثال "إعداد منفذ العرض" أدناه).
دعم المتصفح
| Element | |||||
|---|---|---|---|---|---|
| <meta> | Yes | Yes | Yes | Yes | Yes |
صفات
| Attribute | Value | Description |
|---|---|---|
| charset | character_set | Specifies the character encoding for the HTML document |
| content | text | Specifies the value associated with the http-equiv or name attribute |
| http-equiv | content-security-policy content-type default-style refresh |
Provides an HTTP header for the information/value of the content attribute |
| name | application-name author description generator keywords viewport |
Specifies a name for the metadata |
السمات العالمية
تدعم <meta>العلامة أيضًا السمات العامة في HTML .
مزيد من الأمثلة
تحديد الكلمات الأساسية لمحركات البحث:
<meta name="keywords" content="HTML, CSS, JavaScript">
حدد وصفًا لصفحة الويب الخاصة بك:
<meta name="description" content="Free Web tutorials for
HTML and CSS">
حدد مؤلف الصفحة:
<meta name="author" content="John Doe">
قم بتحديث المستند كل 30 ثانية:
<meta http-equiv="refresh" content="30">
تعيين منفذ العرض لجعل موقع الويب الخاص بك يبدو جيدًا على جميع الأجهزة:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
ضبط منفذ العرض
منفذ العرض هو المنطقة المرئية للمستخدم لصفحة الويب. يختلف باختلاف الجهاز - سيكون أصغر على الهاتف المحمول منه على شاشة الكمبيوتر.
يجب عليك تضمين <meta>العنصر التالي في جميع صفحات الويب الخاصة بك:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
يوفر هذا إرشادات للمتصفح حول كيفية التحكم في أبعاد الصفحة وقياسها.
يضبط الجزء width=device-widthعرض الصفحة لتتبع عرض شاشة الجهاز (والذي سيختلف تبعًا للجهاز).
يضبط الجزء initial-scale=1.0مستوى التكبير الأولي عند تحميل الصفحة لأول مرة بواسطة المتصفح.
فيما يلي مثال لصفحة ويب لا تحتوي على العلامة الوصفية لإطار العرض ، ونفس صفحة الويب التي تحتوي على العلامة الوصفية لإطار العرض:
نصيحة: إذا كنت تتصفح هذه الصفحة بهاتف أو كمبيوتر لوحي ، فيمكنك النقر فوق الرابطين أدناه لمعرفة الفرق.
يمكنك قراءة المزيد حول منفذ العرض في برنامج تصميم الويب سريع الاستجابة - برنامج منفذ العرض التعليمي .
الصفحات ذات الصلة
دروس HTML: HTML Head
مرجع DOM HTML: Meta Object
إعدادات CSS الافتراضية
لا أحد.