بنية المستند

تتضمّن مستندات HTML تعريفًا لنوع المستند وعنصر <html> الجذر. يتم تضمين رأس المستند ونص المستند في العنصر <html>. على الرغم من أنّ رأس المستند لا يظهر خارج الرمز، إلا أنّه ضروري لكي يعمل الموقع الإلكتروني. ويحتوي على جميع المعلومات الوصفية، بما في ذلك المعلومات الخاصة بمحركات البحث ونتائج وسائل التواصل الاجتماعي، والرموز الخاصة بعلامة تبويب المتصفح واختصار الشاشة الرئيسية على الأجهزة الجوّالة، وسلوك المحتوى وطريقة عرضه. في هذا القسم، سنتعرّف على المكوّنات التي تكون غير مرئية ولكنها تظهر في كل صفحة ويب تقريبًا.

لإنشاء موقع إلكتروني MachineLearningWorkshop.com (متعدد اللغات)، ابدأ بتضمين المكوّنات التي يجب اعتبارها أساسية لكل صفحة ويب: نوع المستند ولغة المحتوى التي يستخدمها البشر ودليل الرموز، وبالطبع عنوان الموقع الإلكتروني أو التطبيق أو اسمهما.

الإضافة إلى كل مستند HTML

هناك عدة عناصر أساسية لكل صفحة ويب، ويمكن للمتصفحات عرض المحتوى حتى إذا كانت هذه العناصر غير متوفرة، ولكن ننصحك بتضمينها.

<!DOCTYPE html>

أول عنصر في أي مستند HTML هو المقدّمة. بالنسبة إلى HTML، كل ما تحتاج إليه هو <!DOCTYPE html>. يبدو هذا العنصر كعنصر HTML، ولكنّه في الواقع عقدة خاصة تُعرف باسم DOCTYPE. يطلب DOCTYPE من المتصفح استخدام الوضع القياسي. وعندما يتم حذف DOCTYPE، تستخدم المتصفحات وضع عرض مختلفًا يُعرف باسم وضع Quirks. ويساعد تضمين DOCTYPE في منع وضع 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).

بين علامتَي الفتح والإغلاق <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>

البيانات الوصفية لإطار العرض

تُعدّ العلامة الوصفية viewport ضرورية لضمان استجابة الموقع الإلكتروني، فهي تضمن عرض المحتوى بشكل جيد بغض النظر عن عرض إطار العرض. على الرغم من أنّ علامة وصفية لإطار العرض متوفرة منذ عام 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 لأسباب تتعلّق بالأداء. قد يبدو ذلك غير منطقي، إذ قد تعتقد أنّك تريد تحميل المحتوى أولاً، ولكن من الأفضل أن يعرف المتصفّح كيفية عرض المحتوى عند تحميله. وتؤدي إضافة الأنماط أولاً إلى منع إعادة الطلاء غير الضرورية التي تحدث إذا تم تصميم عنصر بعد عرضه لأول مرة.

هناك طريقة واحدة لتضمين الأنماط التي لن تستخدمها أبدًا في <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 لإنشاء علاقات بين مستند 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 لتحديد اسم لهذا النمط البديل.

أساسية

في حال إنشاء عدة ترجمات أو إصدارات من &quot;ورشة تعلُّم الآلة&quot;، قد لا تتمكّن محركات البحث من تحديد المصدر الموثوق. استخدِم 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

لتضمين 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>، ما يؤدي إلى تحويل الرابط <a href="#ref"> إلى <a target="_top" href="https://machinelearningworkshop.com#ref">، وبالتالي يتم إرسال طلب HTTP إلى عنوان URL الأساسي مع إرفاق الجزء المقتطع.<base>

في ما يلي بعض المعلومات الإضافية حول "<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>
إجابة صحيحة.
السابق
نظرة عامة حول HTML
التالي
البيانات الوصفية