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

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

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

يعني اختيار العناصر المناسبة للوظيفة أثناء قيامك بالترميز أنك لن تضطر إلى إعادة بناء 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>

أضفنا عنصرَي <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

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

ملاحظة: لا يتضمن مقتطف الرمز هذا سوى محتوى <body>. تم تناول <!doctype> و<html> و<body> والمعلومات الوصفية في وقت سابق.

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

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

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

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

ما هو العنصر المستخدَم لاحتواء مساحة موقعك الإلكتروني التي تتضمّن شعار الموقع الإلكتروني أو عنوانه وطريقة التنقّل الرئيسية؟

<heading>

يُرجى إعادة المحاولة.

<header>

إجابة صحيحة

<title>

يُرجى إعادة المحاولة.

كم عدد عناصر <main> المسموح بها على صفحة واحدة؟

واحد

إجابة صحيحة

بلا عُري هذا العنصر غير صالح.

يُرجى إعادة المحاولة.

القدر المطلوب ما دامت تحتوي على اسم يمكن الوصول إليه.

يُرجى إعادة المحاولة.