ترميز HTML الدلالي

مع وجود أكثر من 100 عنصر HTML والقدرة على إنشاء عناصر مخصصة، تتوفر طرق لا حصر لها لترميز المحتوى الخاص بك؛ ولكن بعض الطرق، وبالأخص دلاليًا، أفضل من غيرها.

تعني كلمة دلالة "العلاقة بالمعنى". تعني كتابة HTML الدلالي استخدام عناصر HTML لتنظيم المحتوى استنادًا إلى معنى كل عنصر، وليس مظهره.

لم تتناول هذه السلسلة العديد من عناصر HTML بعد، ولكن حتى بدون معرفة HTML، يوضّح مقتطفا الرمز التاليان كيف يمكن للترميز الدلالي توفير سياق للمحتوى. يستخدم كلاهما عدد الكلمات بدلاً من ipsum lorem لتوفير بعض التمرير. استخدِم خيالك لتوسيع "ثلاثون كلمة" إلى 30 كلمة:

يستخدم مقتطف الرمز الأول <div> و<span>، وهما عنصرين بدون قيمة دلالية.

<div>
  <span>Three words</span>
  <div>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </div>
</div>
<div>
  <div>
    <div>five words</div>
  </div>
  <div>
    <div>three words</div>
    <div>forty-six words</div>
    <div>forty-four words</div>
  </div>
  <div>
    <div>seven words</div>
    <div>sixty-eight words</div>
    <div>forty-four words</div>
  </div>
</div>
<div>
   <span>five words</span>
</div>

هل لديك فكرة عما تتوسع فيه هذه الكلمات؟ ليس فعلاً.

هيا نعيد كتابة هذه التعليمة البرمجية بالعناصر الدلالية:

<header>
  <h1>Three words</h1>
  <nav>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </nav>
</header>
<main>
  <header>
    <h1>five words</h1>
  </header>
  <section>
    <h2>three words</h2>
    <p>forty-six words</p>
    <p>forty-four words</p>
  </section>
  <section>
    <h2>seven words</h2>
    <p>sixty-eight words</p>
    <p>forty-four words</p>
  </section>
</main>
<footer>
  <p>five words</p>
</footer>

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

في مجموعة الرموز الثانية، يمكننا فهم البنية حتى بدون فهم المحتوى لأن العناصر الدلالية توفر معنى وبنية. يمكنك معرفة أنّ العنوان الأول هو بانر الموقع الإلكتروني، ومن المرجّح أن يكون <h1> هو اسم الموقع الإلكتروني. التذييل هو تذييل الموقع الإلكتروني: قد تكون الكلمات الخمس عبارة عن بيان حقوق الطبع والنشر أو عنوان نشاط تجاري.

لا يقتصر الترميز الدلالي على تسهيل قراءة الترميز على المطوّرين. يكون من المهم بشكل أساسي مساعدة الأدوات الآلية في فكّ ترميز الترميز. توضح أدوات المطوّرين كيف توفر العناصر الدلالية بنية قابلة للقراءة آليًا أيضًا.

نموذج عناصر تسهيل الاستخدام (AOM)

عندما يُجري المتصفح تحليلاً للمحتوى المستلم، ينشئ نموذج كائن المستند (DOM) ونموذج كائن CSS (CSSOM). ثم تقوم أيضًا بإنشاء شجرة إمكانية الوصول. تستخدم الأجهزة المساعِدة، مثل برامج قراءة الشاشة، نظام AOM لتحليل المحتوى وتفسيره. نموذج DOM هو عبارة عن شجرة تضم جميع العُقد في المستند. يشبه AOM النسخة الدلالية من DOM.

لنقارن كيفية عرض بنيتَي المستند هذين في لوحة إمكانية الوصول في Firefox:

في الشكل 2، هناك أربعة أدوار تاريخية في كتلة الرموز الثانية. ويستخدم هذا المصطلح معالِم دلالية تُعرف بسهولة باسم <header> و<main> و<footer> و<nav> لأغراض "التنقّل". وتوفر المعالم بنية لمحتوى الويب وتضمن التنقل في أقسام مهمة من المحتوى باستخدام لوحة المفاتيح لمستخدمي برامج قراءة الشاشة.

يُرجى العِلم أنّ <header> و<footer> هما مَعلمان، ويؤدي الدوران banner وcontentinfo على التوالي، في حال عدم دمجهما في مَعالم أخرى. ويظهر هذا الرسم البياني في AOM في Chrome على النحو التالي:

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

من الواضح تمامًا أن استخدام العناصر الدلالية يساعد في سهولة الوصول، واستخدام العناصر غير الدلالية يقلل من إمكانية الوصول. يمكن الوصول إلى HTML بشكلٍ عام تلقائيًا. ومهمتنا كمطوّرين هي حماية الطبيعة التلقائية التي يمكن الوصول إليها من HTML وضمان زيادة إمكانية وصول المستخدمين إلى أقصى حدّ. يمكنك فحص AOM في أدوات المطوّرين.

السمة role

تصف السمة role دور العنصر في سياق المستند. السمة role هي سمة عامة، أي أنّها صالحة لكل العناصر، ويتم تحديدها من خلال مواصفات ARIA بدلاً من مواصفات HTML WhatWG، حيث يتم تحديد كل العناصر الأخرى في هذه السلسلة تقريبًا.

ولكل عنصر من العناصر الدلالية دور ضمني، ويعتمد بعضها على السياق. كما رأينا في لقطة الشاشة الخاصة بأدوات مطوّري برامج تسهيل الاستخدام في Firefox، كانت المستويات الأعلى <header> و<main> و<footer> و<nav> جميعها معالم، بينما كانت السمة <header> المدمجة في <main> قسمًا. تسرد لقطة شاشة Chrome هذه العناصر أدوار ARIA: <main> هي main و<nav> هي navigation و<footer>، حيث إنها كانت تذييل المستند، وهي contentinfo. عندما يكون <header> هو عنوان المستند، يكون الدور التلقائي banner، الذي يعرّف القسم على أنّه عنوان الموقع العام. عندما يتم تضمين <header> أو <footer> في عنصر قسم، لا يُعتبر ذلك دورًا مَعلمًا. كلتا أداتَي المطوّرين" ولقطات الشاشة ذلك.

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

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

باستخدام السمة role، يمكنك منح أي عنصر دورًا، بما في ذلك دور مختلف عن الذي تشير إليه العلامة. على سبيل المثال، يؤدي <button> الدور الضمني كـ button. باستخدام role="button"، يمكنك تحويل أي عنصر دلاليًا إلى زر: <p role="button">Click Me</p>.

في حين أنّ إضافة role="button" إلى عنصر ستعلم برامج قراءة الشاشة بأنّ العنصر هو زر، لن يغيّر مظهره أو وظائفه. يوفّر العنصر button العديد من الميزات بدون الحاجة إلى اتخاذ أي إجراء. تتم إضافة العنصر button تلقائيًا إلى تسلسل ترتيب المستند باستخدام مفتاح التبويب (Tab)، ما يعني أنّه يمكن التركيز عليه تلقائيًا باستخدام لوحة المفاتيح. يؤدي مفتاحا Enter ومفتاح المسافة إلى تفعيل الزر. تتضمّن الأزرار أيضًا جميع الطرق والخصائص التي توفّرها واجهة HTMLButtonElement. إذا كنت لا تستخدم الزر الدلالي للزر، فيجب عليك برمجة جميع هذه الميزات مرة أخرى. من الأسهل كثيرًا استخدام <button>.

ارجع إلى لقطة شاشة AOM الخاصة بمجموعة الرموز غير الدلالية. ستلاحظ أن العناصر غير الدلالية ليس لها أدوار ضمنية. يمكننا جعل النسخة غير الدلالية دلالية من خلال تعيين دور لكل عنصر:

<div role="banner">
  <span role="heading" aria-level="1">Three words</span>
  <div role="navigation">
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </div>
</div>

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

العناصر الدلالية

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

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

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

بعد ذلك، ستستخدم العناصر الدلالية لإنشاء بنية المستند

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

اختبر معلوماتك حول HTML الدلالي.