تتضمّن مستندات HTML تعريفًا لنوع المستند وعنصر <html> الجذر. يتم تضمين رأس المستند ونص المستند في العنصر <html>.
على الرغم من أنّ رأس المستند لا يظهر خارج الرمز، إلا أنّه ضروري لكي يعمل الموقع الإلكتروني. ويحتوي على جميع المعلومات الوصفية، بما في ذلك المعلومات الخاصة بمحركات البحث ونتائج وسائل التواصل الاجتماعي، والرموز الخاصة بعلامة تبويب المتصفح واختصار الشاشة الرئيسية على الأجهزة الجوّالة، وسلوك المحتوى وطريقة عرضه. في هذا القسم، سنتعرّف على المكوّنات التي تكون غير مرئية ولكنها تظهر في كل صفحة ويب تقريبًا.
لإنشاء موقع إلكتروني MachineLearningWorkshop.com (متعدد اللغات)، ابدأ بتضمين المكوّنات التي يجب اعتبارها أساسية لكل صفحة ويب: نوع المستند ولغة المحتوى التي يفهمها البشر ومجموعة الأحرف، وبالطبع عنوان أو اسم الموقع الإلكتروني أو التطبيق.
الإضافة إلى كل مستند HTML
هناك عدة عناصر أساسية لكل صفحة ويب. تعرض المتصفحات المحتوى حتى إذا كانت هذه العناصر غير متوفّرة، ولكن ننصحك بتضمينها.
<!DOCTYPE html>
أول شيء في أي مستند HTML هو المقدمة. بالنسبة إلى HTML، كل ما تحتاجه هو
<!DOCTYPE html>. يبدو هذا العنصر كأحد عناصر HTML، ولكنّه في الواقع عقدة خاصة تُعرف باسم doctype. يطلب نوع المستند من المتصفّح استخدام الوضع المتوافق مع المعايير.
في حال عدم تضمينها، تستخدم المتصفحات وضع عرض مختلفًا يُعرف باسم
وضع Quirks.
يساعد تضمين نوع المستند في منع وضع Quirks.
<html>
العنصر <html> هو عنصر الجذر لمستند HTML. وهو العنصر الرئيسي لكل من <head> و<body>، ويحتوي على كل العناصر في مستند HTML باستثناء نوع المستند. في حال عدم تضمينها، سيتم تحديد اللغة ضمنيًا، ولكن عليك تضمينها لتحديد لغة المستند.
لغة المحتوى
تحدّد السمة lang
في العلامة <html> اللغة الرئيسية للمستند. القيمة هي رمز لغة ISO متبوع بمنطقة اختيارية.
على سبيل المثال، رمز اللغة الفرنسية في كندا هو fr-CA، بينما في بوركينا فاسو هو fr-BF. يساعد هذا التعريف برامج قراءة الشاشة ومحرّكات البحث وخدمات الترجمة في تحديد لغة المستند.
يمكنك استخدام السمة lang في علامات أخرى لتحديد استثناءات للغة الأساسية للمستند. وكما هو الحال عند استخدامها في العنوان الرئيسي، ليس للسمة lang أي تأثير مرئي ضمن النص الأساسي. تضيف هذه السمة دلالات، ما يتيح للتقنيات المساعدة والخدمات المبرمَجة تحديد لغة محتوى معيّن.
بالإضافة إلى ضبط لغة المستند والاستثناءات من تلك اللغة الأساسية، يمكن استخدام السمة في أدوات اختيار CSS.
يمكن استهداف <span lang="fr-fr">Ceci n'est pas une pipe.</span> باستخدام
سمة وأدوات اختيار اللغة
[lang|="fr"]
و:lang(fr).
<head>
بين علامتَي الفتح والإغلاق <html>، نجد العنصرَين الثانويَين:
<head> و<body>:
<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
<body>
</body>
</html>
يحتوي <head> على بيانات وصفية لموقع إلكتروني أو تطبيق، بينما يحتوي <body> على محتوى مرئي. يركّز الجزء المتبقي من هذا القسم على المكوّنات المضمّنة داخل العنصر <head>.
المكوّنات المطلوبة داخل <head>
تتوفّر بيانات المستند الوصفية، بما في ذلك عنوان المستند ومجموعة الأحرف وإعدادات نافذة العرض والوصف وعنوان URL الأساسي وروابط أوراق الأنماط والرموز، في العنصر <head>. على الرغم من أنّك قد لا تحتاج إلى كل هذه الميزات، احرص دائمًا على تضمين إعدادات مجموعة الأحرف والعنوان ونافذة العرض.
ترميز الأحرف
يجب أن يكون العنصر الأول في <head> هو تعريف charset لترميز الأحرف. يجب أن يسبق العنوان لضمان أن يتمكّن المتصفّح من عرض الأحرف في هذا العنوان وجميع الأحرف في بقية المستند.
الترميز التلقائي
في معظم المتصفحات هو windows-1252، وذلك حسب اللغة. ومع ذلك، ننصحك باستخدام UTF-8، الذي يتيح ترميز جميع الأحرف باستخدام بايت واحد إلى أربعة بايتات.
لضبط ترميز الأحرف على UTF-8، أدرِج ما يلي:
<meta charset="utf-8" />
من خلال تعريف UTF-8 (غير حساسة لحالة الأحرف)، يمكنك حتى تضمين إيموجي في عنوانك.
يتم تضمين ترميز الأحرف في كل العناصر في المستند، بما في ذلك <style> و<script>. يعني هذا التصريح الصغير أنّه يمكنك تضمين رموز إيموجي في أسماء الفئات وفي selectorAPI. إذا كنت تستخدم رموز إيموجي، احرص على استخدامها بطريقة تحسّن سهولة الاستخدام بدون التأثير سلبًا في إمكانية الوصول.
عنوان المستند
يجب أن يكون لكل صفحة، بما في ذلك الصفحة الرئيسية وجميع الصفحات الإضافية، عنوان فريد.
يتم عرض محتوى عنوان المستند والنص بين علامتَي <title> الفتح والإغلاق في علامة تبويب المتصفّح وقائمة النوافذ المفتوحة والسجلّ ونتائج البحث، وفي بطاقات وسائل التواصل الاجتماعي ما لم تتم إعادة تعريفه باستخدام علامات <meta>.
<title>Machine Learning Workshop</title>
البيانات الوصفية لإطار العرض
تُعدّ العلامة الوصفية لإطار العرض ضرورية لضمان استجابة الموقع الإلكتروني، فهي تضمن عرض المحتوى بشكل جيد بغض النظر عن عرض إطار العرض. على الرغم من أنّ علامة وصفية لإطار العرض متوفرة منذ عام 2007، لم يتم توثيقها في مواصفات إلا مؤخرًا. وهي تتحكّم في حجم إطار العرض ومقياسه، ما يمنع المحتوى من التصغير ليتناسب مع الشاشات الأصغر.
<meta name="viewport" content="width=device-width" />
يعني الرمز السابق "اجعل الموقع الإلكتروني متجاوبًا، وذلك من خلال جعل عرض المحتوى هو عرض الشاشة". بالإضافة إلى width، يمكنك ضبط مستوى التكبير/التصغير وإمكانية التكيّف، ولكن يتم ضبط كليهما تلقائيًا على قيم يسهل الوصول إليها. إذا أردت أن تكون صريحًا، عليك تضمين ما يلي:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1" />
منطقة عرض الصفحة هي جزء من تدقيق تسهيل الاستخدام في Lighthouse. سيكون موقعك الإلكتروني متوافقًا إذا كان قابلاً لتغيير الحجم ولم يتم ضبط حد أقصى لحجمه.
حتى الآن، المخطط التفصيلي لملف HTML هو:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Machine Learning Workshop</title>
<meta name="viewport" content="width=device-width" />
</head>
<body>
</body>
</html>
محتوى <head> آخر
هناك الكثير من التفاصيل التي تتضمّنها <head>. جميع البيانات الوصفية في الواقع
مع أنّ معظم العناصر التي ستجدها في <head> مشمولة في هذه الوحدة، سنشارك المزيد في وحدة بيانات التعريف.
لقد رأيت مجموعة الأحرف الوصفية وعنوان المستند، ولكن هناك الكثير من البيانات الوصفية خارج علامات <meta> التي يجب تضمينها.
CSS
<head> هو المكان الذي يتم فيه تضمين الأنماط في HTML. يتوفّر
مسار تعليمي مخصّص لـ CSS إذا أردت التعرّف على الأنماط،
ولكن عليك معرفة كيفية تضمينها في مستندات HTML.
هناك ثلاث طرق لتضمين CSS: <link> و<style> والسمة style.
الطريقتان الرئيسيتان لتضمين الأنماط في ملف HTML هما تضمين مورد خارجي باستخدام عنصر <link> مع ضبط السمة rel على stylesheet، أو تضمين CSS مباشرةً في رأس المستند ضمن علامتَي <style> الفتح والإغلاق.
العلامة <link> هي الطريقة المفضّلة لتضمين أوراق الأنماط. إنّ ربط ورقة أنماط خارجية واحدة أو بضع أوراق أنماط خارجية هو أمر جيد لكل من تجربة المطوّر وأداء المواقع الإلكترونية: يمكنك الاحتفاظ بملف CSS في مكان واحد بدلاً من توزيعه في كل مكان، ويمكن للمتصفحات تخزين الملف الخارجي مؤقتًا، ما يعني أنّه لن يتم تنزيله مرة أخرى مع كل عملية التنقل في الصفحة.
البنية هي <link rel="stylesheet" href="styles.css">، حيث يمثّل styles.css اسم الملف والموقع النسبي لورقة الأنماط. قد تظهر لك السمة type="text/css"، ولكنّها ليست مطلوبة. تحدّد السمة rel العلاقة، وهي stylesheet في هذه الحالة. في حال حذف السمة rel، لن يتم ربط CSS.
ستتعرّف قريبًا على بعض قيم rel الأخرى، ولكن أولاً، سنشرح لك طرقًا أخرى لتضمين CSS.
إذا أردت أن تكون أنماط ورقة الأنماط الخارجية ضمن طبقة متتالية ولكن ليس لديك إذن بتعديل ملف CSS، عليك تضمين CSS مع @import داخل <style>:
<style>
@import "styles.css" layer(firstLayer);
</style>
عند استخدام @import لاستيراد أوراق الأنماط إلى المستند، بشكل اختياري إلى طبقات متتالية، يجب أن تكون عبارات @import هي العبارات الأولى في <style> أو ورقة الأنماط المرتبطة، خارج تعريف مجموعة الأحرف.
على الرغم من أنّ طبقات التتالي لا تزال جديدة إلى حدّ ما وقد لا تلاحظ @import في <style>، ستظهر غالبًا خصائص مخصّصة تم تعريفها في كتلة نمط الرأس:
<style>
:root {
--theme-color: #226DAA;
}
</style>
يجب وضع الأنماط المضافة باستخدام <link> أو <style> أو كليهما في قسم head. يمكن استخدامها عند تضمينها في نص المستند، ولكن يجب إضافة الأنماط في الرأس لأسباب تتعلق بالأداء. قد يبدو ذلك غير منطقي، إذ قد تعتقد أنّك تريد تحميل المحتوى أولاً. ولكن من الأفضل أن يعرف المتصفّح كيفية عرض المحتوى عند تحميله. تؤدي إضافة الأنماط أولاً إلى منع إعادة الطلاء غير الضرورية التي تحدث إذا تم تصميم عنصر بعد عرضه لأول مرة.
هناك طريقة واحدة لتضمين أنماط لن تستخدمها أبدًا في <head> من مستندك، وهي الأنماط المضمّنة. من غير المرجّح أن تستخدم أنماطًا مضمّنة في العنوان
لأنّ أوراق الأنماط الخاصة ببرامج وكيل المستخدم تخفي العنوان تلقائيًا. ولكن إذا أردت إنشاء أداة تعديل CSS بدون JavaScript، مثلاً، لتتمكّن من اختبار العناصر المخصّصة في صفحتك، يمكنك إظهار العنوان باستخدام display: block، ثم إخفاء كل شيء في العنوان، ثم استخدام السمة style المضمّنة لإظهار كتلة الأنماط القابلة للتعديل.
<style contenteditable style="display: block; font-family: monospace; white-space: pre;">
head { display: block; }
head * { display: none; }
:root {
--theme-color: #226DAA;
}
</style>
يمكنك إضافة أنماط مضمّنة إلى العنصر <style>.
استخدامات أخرى للعنصر <link>
يُستخدم العنصر link لإنشاء علاقات بين مستند HTML والمراجع الخارجية. يمكن تنزيل بعض هذه الموارد، بينما البعض الآخر مخصّص لتقديم المعلومات. يتم تحديد نوع العلاقة من خلال قيمة السمة rel. تتوفّر 25 قيمة لسمة rel
يمكن استخدامها مع <link> و<a> و<area> أو <form>، مع بعض القيم التي
يمكن استخدامها مع كل العلامات. من الأفضل تضمين تلك المرتبطة بالمعلومات الوصفية في رأس الصفحة، وتلك المرتبطة بالأداء في <body>.
ستتضمّن الآن ثلاثة أنواع أخرى في العنوان: icon وalternate وcanonical. ستضيف نوعًا رابعًا،
rel="manifest"، في الوحدة التالية.
الرمز المفضل
استخدِم العلامة <link> مع rel="icon" لتحديد رمز الموقع المفضّل لمستندك. الـ favicon هي أيقونة صغيرة تظهر في علامة تبويب المتصفّح، وعادةً ما تظهر على يمين عنوان المستند. عندما تصبح علامات التبويب أصغر، قد يختفي العنوان، ولكن يظل الرمز مرئيًا. معظم الرموز المفضّلة هي شعارات شركات أو تطبيقات.
إذا لم تحدّد رمزًا مفضّلاً، سيبحث المتصفّح عن ملف باسم favicon.ico في الدليل ذي المستوى الأعلى (المجلد الجذر للموقع الإلكتروني). باستخدام
<link>، يمكنك استخدام اسم ملف وموقع جغرافي مختلفَين:
<link rel="icon" sizes="16x16 32x32 48x48" type="image/png" href="/images/mlwicon.png" />
يقول الرمز السابق "استخدِم mlwicon.png كرمز للسيناريوهات التي يكون فيها 16 بكسل أو 32 بكسل أو 48 بكسل مناسبًا". تقبل السمة "الأحجام" القيمة any
للرموز القابلة للتوسيع أو قائمة مفصولة بمسافات لقيم widthXheight مربّعة،
حيث تكون قيم العرض والارتفاع 16 أو 32 أو 48 أو أكبر في هذا التسلسل الهندسي،
ويتم حذف وحدة البكسل، ويكون الحرف X غير حساس لحالة الأحرف.
<link rel="apple-touch-icon" sizes="180x180" href="/images/mlwicon.png" />
<link rel="mask-icon" href="/images/mlwicon.svg" color="#226DAA" />
هناك نوعان خاصان غير عاديين من الرموز لمتصفّح Safari:
apple-touch-icon لأجهزة iOS وmask-icon لعلامات التبويب المثبّتة على macOS.
لا يتم تطبيق apple-touch-icon إلا عندما يضيف المستخدم موقعًا إلكترونيًا إلى الشاشة الرئيسية:
يمكنك تحديد رموز متعددة باستخدام sizes مختلف للأجهزة المختلفة.
لن يتم استخدام mask-icon إلا إذا ثبّت المستخدم علامة التبويب في متصفّح Safari على الكمبيوتر المكتبي: يجب أن يكون الرمز نفسه بتنسيق SVG أحادي اللون، وتملأ السمة color الرمز باللون المطلوب.
على الرغم من إمكانية استخدام <link> لتحديد صورة مختلفة تمامًا على كل صفحة أو حتى في كل مرة يتم فيها تحميل الصفحة، ننصحك بعدم فعل ذلك. للحفاظ على التناسق وتقديم تجربة جيدة للمستخدم، استخدِم صورة واحدة. تستخدم Google رموز مفضّلة مختلفة لكل تطبيق من تطبيقاتها المختلفة، مثل رمز البريد الإلكتروني ورمز التقويم. لكن جميع رموز Google تستخدم نظام الألوان نفسه. يمكنك معرفة محتوى علامة التبويب المفتوحة من خلال الرمز.
الإصدارات البديلة من الموقع الإلكتروني
استخدِم القيمة alternate للسمة rel لتحديد الترجمات أو التمثيلات البديلة للموقع الإلكتروني.
لنفترض أنّ لدينا نُسخًا من الموقع الإلكتروني مترجمة إلى الفرنسية والبرتغالية البرازيلية:
<link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
عند استخدام alternate للترجمة، يجب ضبط السمة hreflang.
لا تقتصر القيمة البديلة على الترجمات فقط. على سبيل المثال، يمكن أن تحدّد السمة type معرّف الموارد الموحّد البديل لخلاصة RSS عندما تكون السمة type مضبوطة على application/rss+xml أو application/atom+xml.
رابط إلى نسخة PDF وهمية من الموقع الإلكتروني:
<link rel="alternate" type="application/x-pdf" href="https://machinelearningworkshop.com/mlw.pdf" />
إذا كانت قيمة rel هي alternate stylesheet، فإنّها تحدّد
ورقة أنماط بديلة
ويجب ضبط السمة title لتحديد اسم لهذا النمط البديل.
أساسية
في حال إنشاء عدة ترجمات أو إصدارات من "ورشة تعلُّم الآلة"، قد لا تتمكّن محركات البحث من تحديد المصدر الموثوق. استخدِم rel="canonical"
لتحديد عنوان URL المفضّل للموقع الإلكتروني أو التطبيق.
أدرِج عنوان URL الأساسي في جميع صفحاتك المترجَمة وفي الصفحة الرئيسية، مع الإشارة إلى عنوان URL المفضّل لدينا:
<link rel="canonical" href="https://www.machinelearning.com" />
يُستخدم rel="canonical" الرابط الأساسي في أغلب الأحيان لنشر المحتوى بشكل متبادل مع المنشورات ومنصات التدوين من أجل الإشارة إلى المصدر الأصلي. عندما يعيد موقع إلكتروني نشر المحتوى، يجب أن يتضمّن رابطًا أساسيًا إلى المصدر الأصلي.
النصوص البرمجية
تتضمّن العلامة <script> نصوصًا برمجية. النوع التلقائي هو JavaScript. إذا كنت تستخدم لغة برمجة نصية أخرى، أدرِج السمة type مع نوع MIME، أو type="module" لوحدة JavaScript.
يتم تحليل وتنفيذ JavaScript ووحدات JavaScript فقط.
يمكن استخدام علامات <script> لتضمين الرمز البرمجي أو لتنزيل ملف خارجي. في MLW، لا يوجد ملف نصي خارجي لأنّه، على عكس الاعتقاد الشائع، لا تحتاج إلى JavaScript لإنشاء موقع إلكتروني يعمل بشكل جيد. هذا مسار تعليمي خاص بلغة HTML، وليس JavaScript.
ستضمّن جزءًا صغيرًا من JavaScript لإنشاء بيضة عيد الفصح لاحقًا:
<script>
document.getElementById('switch').addEventListener('click', function() {
document.body.classList.toggle('black');
});
</script>
ينشئ هذا المقتطف معالج أحداث لعنصر يحمل المعرّف switch.
باستخدام JavaScript، عليك تجنُّب الإشارة إلى عنصر قبل أن يكون متوفّرًا. بما أنّ
switch غير متوفّر بعد، لن نضمّن معالج الأحداث بعد.
عندما نضيف عنصر مفتاح الإضاءة، سنضيف <script> في أسفل <body> بدلاً من <head>. لماذا؟ هناك سببان. نريد التأكّد من توفّر العناصر قبل مواجهة النص البرمجي الذي يشير إليها، لأنّنا لا نستند في هذا النص البرمجي إلى حدث DOMContentLoaded.
والأهم من ذلك، أنّ JavaScript ليس يحظر العرض فحسب، بل إنّ المتصفّح يتوقف عن تنزيل جميع مواد العرض عند تنزيل النصوص البرمجية، ولا يستأنف تنزيل مواد العرض الأخرى إلا بعد انتهاء تنفيذ JavaScript. لهذا السبب، غالبًا ما تجد طلبات JavaScript في نهاية المستند بدلاً من بدايته.
هناك سمتان يمكن أن تقلّلا من طبيعة الحظر التي تتسبّب بها عملية تنزيل JavaScript وتنفيذها، وهما defer وasync. باستخدام defer، لا يتم حظر عرض HTML أثناء التنزيل، ولا يتم تنفيذ JavaScript إلا بعد انتهاء عرض المستند. باستخدام async، لا يتم حظر العرض أثناء التنزيل أيضًا، ولكن بعد انتهاء تنزيل النص البرمجي، يتم إيقاف العرض مؤقتًا أثناء تنفيذ JavaScript.
async. ملاحظة: يتم تفعيل defer تلقائيًا في نصوص البرامج الخاصة بالوحدات التي يتم تحميلها باستخدام <script type="module">.
لتضمين JavaScript الخاص بـ MLW في ملف خارجي، يمكنك كتابة ما يلي:
<script src="js/switch.js" defer></script>
تؤدي إضافة السمة defer إلى تأجيل تنفيذ النص البرمجي إلى ما بعد عرض كل المحتوى، ما يمنع النص البرمجي من التأثير سلبًا في الأداء. لا تكون السمتان async وdefer صالحتَين إلا في النصوص البرمجية الخارجية.
المجموعة الأساسية
هناك عنصر آخر لا يمكن العثور عليه إلا في <head>.. يتيح العنصر <base> الذي لا يُستخدم كثيرًا ضبط عنوان URL ورابط تلقائيين. تحدّد السمة href عنوان URL الأساسي لجميع الروابط النسبية.
تحدّد السمة target، الصالحة على <base> وعلى الروابط والنماذج، المكان الذي يجب أن تفتح فيه هذه الروابط. يؤدي الخيار التلقائي _self إلى فتح الملفات المرتبطة في السياق نفسه الذي يظهر فيه المستند الحالي. تشمل الخيارات الأخرى _blank، الذي يفتح كل رابط في نافذة جديدة، و_parent الخاص بالمحتوى الحالي، والذي قد يكون هو نفسه إذا لم يكن العنصر الذي يفتح النافذة عبارة عن iframe، أو _top، الذي يظهر في علامة تبويب المتصفح نفسها، ولكن يتم إخراجه من أي سياق ليحتل علامة التبويب بأكملها.
يضيف معظم المطوّرين السمة target إلى عدد قليل من الروابط، إن وُجدت، التي يريدون فتحها في نافذة جديدة على الروابط أو النماذج نفسها، بدلاً من استخدام <base>.
<base target="_top" href="https://machinelearningworkshop.com" />
إذا كان موقعنا الإلكتروني مضمّنًا في إطار iframe على موقع إلكتروني مثل Yummly،
سيعني تضمين العنصر <base> أنّه عندما ينقر المستخدم على أي روابط داخل
المستند الخاص بنا، سيتم تحميل الرابط خارج إطار iframe، وسيحتل نافذة المتصفّح بأكملها.
من عيوب هذا العنصر أنّه يتم حلّ روابط الارتساء باستخدام
<base>. يحوّل <base> الرابط <a href="#ref"> إلى <a target="_top" href="https://machinelearningworkshop.com#ref">، ما يؤدي إلى إرسال طلب HTTP إلى عنوان URL الأساسي مع إضافة الجزء المجزّأ.
في ما يلي بعض المعلومات الإضافية حول "<base>":
- لا يمكن أن يكون هناك سوى عنصر
<base>واحد في المستند. - يجب أن يظهر قبل استخدام أي عناوين URL نسبية، بما في ذلك مراجع النصوص البرمجية أو أوراق الأنماط المحتملة.
يبدو الرمز الآن على النحو التالي:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Machine Learning Workshop</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="css/styles.css" />
<link rel="icon" type="image/png" href="/images/favicon.png" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
<link rel="canonical" href="https://www.machinelearning.com" />
</head>
<body>
<!-- <script defer src="scripts/lightswitch.js"></script>-->
</body>
</html>
تعليقات HTML
يتم تضمين النص البرمجي بين أقواس زاوية وشرطات وعلامة تعجّب، وهي الطريقة التي يتم بها إيقاف HTML. لا يظهر أي محتوى بين <!-- و--> ولا يتم تحليله. يمكنك وضع تعليقات HTML في أي مكان على الصفحة، باستثناء النصوص البرمجية أو أقسام الأنماط، حيث يجب استخدام تعليقات JavaScript وCSS.
لقد تعرّفت على أساسيات ما يتم إدخاله في <head>، ولكنك تريد معرفة المزيد. في الأقسام التالية، سنتعرّف على العلامات الوصفية وكيفية التحكّم في المحتوى الذي يظهر عند مشاركة رابط موقعك الإلكتروني على وسائل التواصل الاجتماعي.
اختبِر معلوماتكَ
اختبِر معلوماتك حول بنية المستند.
كيف يتم تحديد لغة المستند؟
language إلى علامة HTML.lang إلى علامة HTML.Add the <lang> إلى <head>.اختَر العناصر التي يمكن تضمينها في <head>.
<p><title><meta>