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

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

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

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

أصبحت لديك الآن معلومات كافية لتحديد الخطوط العريضة لموقع MachineLearningWorkshop.com:

تحديد <body> في MLW.com

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

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

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

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

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