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

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

في هذا القسم، ستتعرّف على بنية المستند، وستراجع عناصر التقسيم من القسم السابق، وستضع علامات على المخطط التفصيلي لتطبيقك.

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

يؤدي استخدام علامات الإغلاق </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. وإلا، لن يكون للتذييل دور ضمني ولن يكون علامة، كما هو موضّح في لقطة الشاشة التالية لنموذج تسهيل الاستخدام في 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 وrole وsemantic)، يمكن تضمين الجانب ذي الصلة بشكل مماس في <aside>؛ ومثل معظمها، من المرجح أن يتم تقديم <aside> في شريط جانبي أو مربع وسيلة شرح. يُعدّ <aside> أيضًا معلمًا، وله دور ضمني في complementary.

<article>

أضفنا عنصرَي <article> متداخلَين في <main>. لم يكن هذا ضروريًا في المثال الأول عندما كان المحتوى الرئيسي مجرد كلمة واحدة، أو في العالم الحقيقي، قسم واحد من المحتوى. ولكن، إذا كنت تكتب مدونة، كما في المثال الثاني، فيجب أن يكون كل منشور في <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" إنشاء مخطط تفصيلي استنادًا إلى العناوين، ولكن لم تنفّذ المتصفحات هذه البنية مطلقًا، وتمت إزالة خوارزمية المخطط التفصيلي المقترَحة من مواصفات HTML. في السابق، كانت المتصفّحات تعرض عناصر <h1> المضمّنة في عناصر التقسيم بأحجام خطوط أصغر، ولكنّ المتصفّحات الحديثة أزالت هذه الأنماط التلقائية ولا تتيح التخطيط التلقائي للمستندات.

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

تحديد <body> من MLW.com

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

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

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

لِنختبر معلوماتكاختبري معلوماتكِاختبِر معلوماتكَ

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