ترميز 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</h2>
    <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.

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

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