العناوين والأقسام

في القسم الأخير، تعلمت كيف، حتى إذا كنت لا تعرف ما تعنيه الكلمات الموجودة على الصفحة، عندما توفر العناصر الدلالية للمستند ببنية ذات مغزى، فسيفهم البعض الآخر - محرك البحث والتقنيات المساعدة والمشرف المستقبلي أو عضو الفريق الجديد - مخطط المستند.

في هذا القسم، ستكتشف بنية الوثيقة؛ سوف تلخص عناصر التقسيم من القسم السابق؛ وترميز المخطط لتطبيقك.

يعني اختيار العناصر المناسبة للوظيفة أثناء الترميز أنك لن تحتاج إلى إعادة هيكلة HTML أو التعليق عليها. إذا فكرت في استخدام العنصر المناسب للوظيفة، فستختار غالبًا العنصر المناسب للوظيفة. إذا لم تفعل، فمن المحتمل ألا تفعل.

والآن بعد فهم دلالات الترميز وإدراكك لأهمية اختيار العنصر الصحيح، بعد التعرّف على جميع العناصر المختلفة، ستختار بشكل عام العنصر الصحيح بدون أي جهد إضافي، إن وجد.

الموقع <header>

لنقم بإنشاء عنوان للموقع. ستبدأ بترميز غير دلالي، وستشق طريقك إلى حل جيد لتتمكن من معرفة مزايا قسم HTML وعناصر العناوين على طول الطريق.

إذا لم تفكر كثيرًا في الدلالة المتعلقة بالعنوان الخاص بنا، فقد تستخدم تعليمة برمجية مثل هذا:

<!-- start header -->
<div id="pageHeader">
  <div id="title">Machine Learning Workshop</div>
  <!-- navigation -->
  <div id="navigation">
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </div>
  <!-- end navigation bar -->
</div>
<!-- end of header -->

يمكن أن تجعل CSS أي ترميز يبدو صحيحًا (تقريبًا). ولكن استخدام <div> غير الدلالية في كل شيء يؤدي إلى زيادة جهدها. لاستهداف العديد من <div> باستخدام CSS، عليك استخدام معرّفات أو فئات لتحديد المحتوى. ويتضمن الرمز أيضًا تعليقًا لكل </div> إغلاق للإشارة إلى علامة الفتح التي تم إغلاقها كل </div>.

توفّر السمتان id وclass عناصر الجذب للتصميم وJavaScript، إلا أنّهما لا تضيفان أي قيمة دلالية لقارئ الشاشة ولمحرّكات البحث (في معظم الأحيان).

يمكنك تضمين سمات role لتوفير دلالات لإنشاء نموذج جيد لعناصر تسهيل الاستخدام (AOM) لبرامج قراءة الشاشة:

<!-- start header -->
<div role="banner">
  <div role="heading" aria-level="1">Machine Learning Workshop</div>
  <div role="navigation">
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </div>
  <!-- end navigation bar -->
<div>
<!-- end of header -->

يوفّر ذلك على الأقل دلالات ويفعِّل استخدام أدوات اختيار السمات في CSS، إلا أنه يضيف تعليقات لتحديد <div> التي يتم إغلاقها بعد </div>.

إذا كنت تعرف لغة HTML، فكل ما عليك فعله هو التفكير في الغرض من المحتوى. بعد ذلك، يمكنك كتابة هذا الرمز دلاليًا بدون استخدام role ودون الحاجة إلى التعليق على علامات الإغلاق:

<header>
  <h1>Machine Learning Workshop</h1>
  <nav>
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </nav>
</header>

يستخدم هذا الرمز معلمَين دلاليَين: <header> و<nav>.

هذا هو العنوان الرئيسي. العنصر <header> ليس دائمًا مَعلمًا. ولديه دلالات مختلفة بناءً على مكان دمجه. عندما يكون <header> هو المستوى الأعلى، فإنّه يمثّل الموقع الإلكتروني banner، وهو دور مَعلم قد تكون لاحظته في مجموعة رموز role. عند دمج <header> في <main> أو <article> أو <section>، يتم تحديدها فقط كعنوان لهذا القسم وهي ليست مَعلمًا.

يحدّد العنصر <nav> المحتوى كعنصر تنقُّل. وبما أنّ <nav> مُدمَج في عنوان الموقع الإلكتروني، فهو شريط التنقّل الرئيسي للموقع الإلكتروني. وإذا تم دمجه في <article> أو <section>، سيكون شريط التنقّل الداخلي لهذا القسم فقط. باستخدام العناصر الدلالية، يمكنك إنشاء نموذج كائن تسهيل الاستخدام أو AOM. يتيح AOM لقارئ الشاشة إعلام المستخدم بأنّ هذا القسم يتألف من كتلة تنقّل رئيسية يمكنه التنقّل من خلالها أو تخطّيها.

يؤدّي استخدام علامتَي الإغلاق </nav> و</header> إلى إلغاء الحاجة إلى التعليقات لتحديد العنصر الذي تمّ إغلاق كلّ علامة نهاية فيه. بالإضافة إلى ذلك، إنّ استخدام علامات مختلفة لعناصر مختلفة من شأنه أن يلغي الحاجة إلى عناصر الجذب id وclass. يمكن أن تكون أدوات اختيار لغة CSS منخفضة الدقة؛ فيمكنك على الأرجح استهداف الروابط باستخدام header nav a بدون القلق بشأن وجود تعارض.

لقد كتبت عنوانًا يحتوي على القليل جدًا من صفحات HTML بدون فئات أو معرّفات. وعند استخدام ترميز HTML الدلالي، ليس عليك إجراء ذلك.

الموقع <footer>

لنقم بترميز تذييل الموقع.

<footer>
  <p>&copy;2022 Machine Learning Workshop, LLC. All rights reserved.</p>
</footer>

كما هي الحال مع السمة <header>، يعتمد تحديد التذييل كمَعلم على مكان دمج التذييل. ويكون تذييل الموقع الإلكتروني مَعلمًا ويجب أن يحتوي على معلومات تذييل الموقع الإلكتروني التي تريدها في كل صفحة، مثل بيان حقوق الطبع والنشر ومعلومات الاتصال والروابط إلى سياسات الخصوصية وملفات تعريف الارتباط. السمة role الضمنية في تذييل الموقع الإلكتروني هي contentinfo. وبخلاف ذلك، ليس للتذييل دور ضمني وليس مَعلمًا، كما هو موضَّح في لقطة الشاشة التالية لنظام AOM في Chrome (التي تحتوي على <article> مع <header> و<footer> بين <header> و<footer>).

في لقطة الشاشة هذه، هناك تذييلان: أحدهما في <article> والثاني في المستوى الأعلى. ويُعد تذييل المستوى الأعلى مَعلمًا له الدور الضمني contentinfo. والتذييل الآخر ليس مَعلمًا. يعرضه Chrome على أنّه FooterAsNonLandmark. يعرضه Firefox كـ section.

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

عندما ينتمي <footer> إلى <article> أو <aside> أو <main> أو <nav> أو <section>، فهو لا يُعتبر مَعلمًا. وفي حال ظهور المشاركة تلقائيًا، استنادًا إلى الترميز، قد تتم ترقية هذا التذييل.

ستجد في التذييلات غالبًا معلومات الاتصال، التي يتم وضعها في عنصر <address>، وهو عنصر عنوان جهة الاتصال. هذا عنصر واحد لم تتم تسميته بشكل جيد؛ تُستخدم لتضمين معلومات الاتصال للأفراد أو المؤسسات، وليس العناوين البريدية الفعلية.

<footer>
  <p>&copy;2022 Machine Learning Workshop, LLC. All rights reserved.</p>
  <address>Instructors: <a href="/hal.html">Hal</a> and <a href="/eve.html">Eve</a></address>
</footer>

بنية المستند

تبدأ هذه الوحدة بالرمزين <header> و<footer>، لأنهما تكونان أحيانًا عناصر كمَعلَمة أو "تقسيم". دعونا نتناول "بدوام كامل" من خلال مناقشة تخطيطات الصفحة الأكثر شيوعًا:

يُعرف التنسيق الذي به عنوان وشريطان جانبيان وتذييل باسم تخطيط الكأس المقدس. تتوفر عدة طرق لترميز هذا المحتوى، بما في ذلك:

<body>
  <header>Header</header>
  <nav>Nav</nav>
  <main>Content</main>
  <aside>Aside</aside>
  <footer>Footer</footer>
</body>

إذا كنت تنشئ مدونة، قد تكون لديك سلسلة من المقالات في <main>:

<body>
  <header>Header</header>
  <nav>Nav</nav>
  <main>
    <article>First post</article>
    <article>Second post</article>
  </main>
  <aside>Aside</aside>
  <footer>Footer</footer>
</body>

عند استخدام عناصر دلالية، يمكن للمتصفّحات إنشاء أشجار مفيدة لتسهيل الاستخدام، ما يتيح لمستخدمي برامج قراءة الشاشة التنقّل بسهولة أكبر. يتوفّر هنا banner وcontentinfo من خلال الموقعَين الإلكترونيَين <header> و<footer>. تشمل العناصر الجديدة المضافة هنا <main> و<aside> و<article>؛ أيضًا، <h1> و<nav> اللذان استخدمتهما سابقًا، و<section> التي لم تستخدمها بعد.

<main>

يتوفّر عنصر مَعلم <main> واحد. يحدّد العنصر <main> المحتوى الرئيسي في المستند. يجب ألا يكون هناك أكثر من <main> واحد في كل صفحة.

<aside>

تشير السمة <aside> إلى المحتوى المرتبط بشكل غير مباشر أو غير مباشر بالمحتوى الرئيسي في المستند. على سبيل المثال، تتناول هذه المقالة محتوى HTML. بالنسبة إلى قسم يتناول خصوصية أداة اختيار لغة CSS للأمثلة الثلاثة لعناوين الموقع الإلكتروني (div ودور ودلالة)، يمكن تضمين العنصر المرتبط بشكل خطّي في <aside>. وكما هي الحال في معظم الحالات، سيتم عرض <aside> في شريط جانبي أو مربّع وسيلة شرح. <aside> هو أيضًا مَعلم يؤدي الدور الضمني لـ complementary.

<article>

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

تمثّل السمة <article> قسمًا كاملاً أو مستقلاً من المحتوى يمكن إعادة استخدامه من حيث المبدأ بشكل مستقل. فكّر في المقالة كما تفعل في مقال في إحدى الصحف. في مطبوعة، مقالة إخبارية حول جاسيندا أرديرن، رئيسة وزراء نيوزيلندا، قد لا تظهر إلا في قسم واحد، ربما الأخبار العالمية. في الموقع الإلكتروني للصحيفة، قد تظهر المقالة الإخبارية نفسها في الصفحة الرئيسية، أو في قسم السياسة، أو في قسم أخبار أوشينا أو آسيا والمحيط الهادئ، وحسب موضوع الأخبار، وربما قسم الرياضة أو نمط الحياة أو التكنولوجيا. قد تظهر المقالة أيضًا على مواقع إلكترونية أخرى، مثل Pocket أو Yahoo News!

<section>

يُستخدم العنصر <section> لتضمين أقسام مستقلة عامة من المستند عندما لا يكون هناك عنصر دلالي أكثر تحديدًا لاستخدامه. يجب أن يكون للأقسام عنوان، مع استثناءات قليلة جدًا.

بالعودة إلى مثال جاسيندا أرديرن، سيتضمّن البانر على الصفحة الرئيسية للصحيفة اسم الصحيفة، متبوعًا بعلامة <main> واحدة، مقسّمًا إلى عدّة <section>، على أن يتضمّن كلّ منها عنوانًا، مثل "أخبار العالم". و"السياسة"؛ وستجد في كل قسم سلسلة من <article>. ضمن كل <article>، قد يظهر لك أيضًا عنصر واحد أو أكثر من عناصر <section>. إذا ألقيت نظرة على هذه الصفحة، يمكن أن تظهر "الرؤوس والأقسام" بالكامل هو <article>. بعد ذلك، يتم تقسيم <article> إلى عدة قيم <section>، بما في ذلك site header وsite footer وبنية المستند. تحتوي المقالة نفسها على عنوان، كما هو الحال مع كل قسم من الأقسام.

لا يُعتبر <section> مَعلمًا ما لم يكن له اسم يسهل الوصول إليه. وإذا كان له اسم يمكن الوصول إليه، يكون الدور الضمني هو region. يجب استخدام أدوار العلامة باعتدال لتحديد الأقسام الكلية الأكبر في المستند. قد يؤدي استخدام عدد كبير جدًا من أدوار المعالم إلى حدوث "تشويش" في برامج قراءة الشاشة، ما يجعل من الصعب فهم التصميم العام للصفحة، إذا كان <main> يحتوي على قسمين فرعيين أو ثلاثة أقسام فرعية مهمة، مع تضمين اسم يمكن الوصول إليه لكل <section>.

العناوين: <h1>-<h6>

هناك ستة عناصر لعناوين الأقسام: <h1> و<h2> و<h3> و<h4> و<h5> و<h6>. يمثل كل مستوى أحد المستويات الستة لعناوين الأقسام، حيث يمثل <h1> المستوى الأعلى أو الأكثر أهمية للقسم، و<h6> الأدنى.

عندما يتم تضمين عنوان في بانر المستند <header>، يكون عنوان التطبيق أو الموقع. وعند دمجه في <main>، سواء كان مدمجًا في <header> في <main> أم لا، يكون عنوان تلك الصفحة هو عنوان الصفحة وليس الموقع الإلكتروني بأكمله. وعند دمجه في <article> أو <section>، يكون عنوان هذا القسم الفرعي من الصفحة.

يوصى باستخدام مستويات العناوين بشكل مشابه لمستويات العناوين في محرِّر النصوص: بدءًا من <h1> كعنوان رئيسي و<h2> كعناوين للأقسام الفرعية و<h3> إذا كانت هذه الأقسام الفرعية تحتوي على أقسام. تجنب تخطي مستويات العناوين. يمكنك الاطّلاع على مقالة مفيدة حول عناوين الأقسام هنا.

يصل بعض مستخدمي برامج قراءة الشاشة إلى العناوين لفهم محتوى الصفحة. في الأصل، كان من المفترض أن تحدد العناوين مستندًا، تمامًا كما يمكن لـ MS Word أو "مستندات Google" إنشاء مخطط تفصيلي استنادًا إلى العناوين، ولكن لم تنفذ المتصفحات هذه البنية مطلقًا. بينما تعرض المتصفحات عناوين متداخلة بأحجام خطوط أصغر بشكل متزايد كما هو موضح في المثال التالي، فإنها لا تدعم في الواقع الخطوط العريضة.

لديك الآن معلومات كافية لتحديد موقع MachineLearningWorkshop.com:

توضيح <body> لموقع MLW.com

في ما يلي مخطط المحتوى المرئي لموقع ورشة عمل التعلم الآلي:

بما أنّ المحتوى <section> لا يشكّل جزءًا من المحتوى المستقل والكامل، فهو أكثر ملاءمة من <article>. مع أنّ كل قسم يتضمّن عنوانًا، ما مِن قسم يستحق علامة <footer>.

ينبغي أن بدون ذكر هذه النقطة، ولكن لا تستخدم العناوين لجعل النص غامقًا أو كبيرًا؛ نستخدم CSS بدلاً من ذلك. إذا كنت تريد التأكيد على النص، فهناك عناصر دلالية للقيام بذلك أيضًا. سوف نغطي ذلك ونملأ معظم محتوى الصفحة بينما نناقش أساسيات النص. بعد التعمق في السمات.

التحقق من فهمك

اختبر معلوماتك عن العناوين والأقسام.