عناصر الـ HTML الدلالية (Semantic HTML elements) هي العناصر التي تصف معناها بشكل واضح ومقروء بالنسبة للإنسان وللآلة كذلك.

عناصر مثل <header> و <footer> و <article> كلها تعتبر دلالية لأنها تصف بشكل دقيق الغاية منها, وتوضح ما هو نوع المحتوى الذي يتواجد بداخلها.

ما هي العناصر الدلالية؟

HTML تم إنشاؤه في الأصل كلغة ترميزية (markup language) لوصف الوثائق وذلك مع بداية ظهور الأنترنت. و مع نمو وتطور الأنترنت وتزايد استخدام الناس له, تغيرت احتياجاته كذلك.

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

ولأن الويب لم يتم إنشاؤه في الأصل لكي يخضع للتصميم, فإن المبرمجين كانوا يلجؤون لطرق مختلفة لجعل الأمور تسير كما يريدون. فمثلا, بدل استخدام <table></table> لوصف معلومة ما باستخدام الجدول, كان المبرمجون يستخدمونه لتحديد موضع عناصر أخرى على الصفحة.

ومع تزايد استخدام التخطيطات (layouts) المصممة بصريا, بدأ المبرمجون يستخدمون وساما عاما غير دلالي مثل <div>. كانوا غالبا ما يمدون عناصر <div> هذه بالخاصيات class أو id اللتان تسمحان لهم بوصف مقصودهم. وكمثال على ذلك, بدل استخدام <header>, كانوا غالبا ما يستخدمون <div class="header">.

The ultimate hiit cardio workout routine clenbuterol for sale adam driver’s ‘star wars: the rise of skywalker’ workout

ونظرا لكون HTML5 لا يزال جديدا نوعا ما, فإن استخدام العناصر غير الدلالية بهذه الطريقة لايزال حاضرا بقوة في المواقع إلى يومنا هذا.

لائحة العناصر الدلالية الجديدة

العناصر الدلالية التي تم إضافتها إلى HTML5 هي:

• <article>
• <aside>
• <details>
• <figcaption>
• <figure>
• <footer>
• <header>
• <main>
• <mark>
• <nav>
• <section>
• <summary>
• <time>

العناصر <header> و <nav> و <section> و <article> و <aside> و <footer> تتصرف إلى حد ما مثل العنصر <div> . فهي تجمع عناصر أخرى مع بعضها البعض لتشكل مقطعا أو قسما داخل الصفحة. وفي حين يستطيع العنصر <div> أن يقوم باحتواء أي نوع من المعلومات, فإنه من السهل تحديد ماهو نوع المعلومات التي يسمح بوضعها ضمن عنصر دلالي ك <header> مثلا.

مثال عن تخطيط للعناصر الدلالية من w3schools

لماذا نستخدم العناصر الدلالية؟

حتى نستطيع رؤية فوائد العناصر الدلالية, لدينا هنا مقطعان من كود (code) الـ HTML . المقطع الأول يستخدم العناصر الدلالية:

<header></header>
<section>
	<article>
		<figure>
			<img>
			<figcaption></figcaption>
		</figure>
	</article>
</section>
<footer></footer>

في حين يحتوي هذا المقطع الثاني على عناصر غير دلالية:

<div id="header"></div>
<div class="section">
	<div class="article">
		<div class="figure">
			<img>
			<div class="figcaption"></div>
		</div>
	</div>
</div>
<div id="footer"></div>

أول فرق بين المقطعين هو أنه من السهل جدا قراءة المقطع الأول مقارنة مع الثاني. من المرجح أن يكون هذا هو أول ما تلاحظه إذا ألقيت نظرة على المقطع الأول. و هذا مجرد مثال بسيط, ولكنك كمبرمج قد تجد نفسك في وضعية تقوم فيها بقراءة مئات الآلاف من سطور الكود. لذلك, فكلما كان الكود سهل القراءة والفهم, كلما كان عملك أسهل.

الفرق الثاني هو أن المقطع الأول أكثر قربا من فهم المتلقي. فأنت لست الوحيد الذي يجد العناصر الدلالية سهلة الفهم. وإنما كذلك محركات البحث و الأجهزة التكنولوجية المساعدة ( كقارئات الشاشات الخاصة بالمستخدمين ذوي الضعف البصري),هي أيضا ستستطيع فهم سياق ومحتوى موقعك بشكل أفضل, الأمر الذي يعني حصول مستخدمي موقعك على تجربة أفضل.

علاوة على ذلك, فإن العناصر الدلالية تسمح بجعل الكود أكثر اتساقا. فعندما يرغب المبرمجون بإنشاء header بدون عناصر دلالية, قد يلجؤون إلى عدة طرق منها: <div class="header"> أو <div id="header"> أو <div class="head"> أو يكتبون بكل بساطة <div>. لذا فهناك طرق كثيرة جدا لإنشاء العنصر header, وكلها تعتمد على مايفضله المبرمج بشكل شخصي. وبالتالي فإن إنشاء عنصر دلالي نموذجي يسهل العمل على الجميع.

منذ أكتوبر 2014, تم ترقية HTML4 إلى HTML5, وتم معه ترقية بعض العناصر الدلالية الجديدة. و إلى غاية يومنا هذا, لا يزال منا من يحتار عندما يرى عناصر كثيرة جدا ويرى أن الفروقات بينها لا تكاد تذكر.

<section> و <article>

قد تسأل: “ماهو الفرق بينهما؟”. فكلا العنصرين يُستخدمان لتقسيم المحتوى, ويمكن استخدامهما بشكل متكافئ تماما. الأمر هنا يتعلق بالوضعية التي تتواجد فيها. فعندما يتعلق الأمر بـ HTML4, فإن كل ما تملك استخدامه كحاوية لمحتواك هو العنصر <div>. وهذا الأخير يمكن استخدامه كذلك في HTML5, ولكن HTML5 تمنحنا عنصرين جديدين هما <section> و <article>, وذلك رغبة في تعويض العنصر <div>.
وكما ذكرنا سابقا, فإن <section> و <article> يتشابهان دلاليا, ويمكن استخدام أحدهما بدل الآخر. وحتى تعرف أي واحد منهما يجب عليك أن تختار, خذ بعين الاعتبار ما يلي:

1. الغرض من الـ article هو أن يكون قابلا للتوزيع أو لإعادة الاستخدام بشكل مستقل.
2. أما الـ section فهي تجميع للمحتوى حسب موضوع ما.

<section>
  <p>أبرز المقالات </p>
  <section>
    <p>الأخبار</p>
    <article>المقال 1</article>
    <article>المقال 2</article>
    <article>المقال 3</article>
  </section>
  <section>
    <p>الرياضة</p>
    <article>المقال 1</article>
    <article>المقال 2</article>
    <article>المقال 3</article>
  </section>
</section>

<header> و <hgroup>

العنصر <header> يتواجد عموما في أعلى الوثيقة أو الـ section أو الـ article, ويحتوي عادة على العنوان الرئيسي و على بعض أدوات البحث والتصفح:

<header>
  <h1>الشركة أ</h1>
  <ul>
    <li><a href="/home">الرئيسية</a></li>
    <li><a href="/about">من نحن</a></li>
    <li><a href="/contact">تواصل معنا</a></li>
  </ul>
  <form target="/search">
    <input name="q" type="search" />
    <input type="submit" />
  </form>
</header>

أما العنصر <hgroup> فيجب إستخدامه عندما تكون في حاجة إلى عنوان رئيسي مع عنوان ثانوي واحد أو أكثر:

<hgroup>
  <h1>العنوان 1</h1>
  <h2>العنوان الثانوي 1</h2>
  <h2>العنوان الثانوي 2</h2>
</hgroup>

تذكر, ال<header> قد يحتوي على أي محتوى, في حين أن <hgroup> يمكنه فقط احتواء عناوين أخرى, والتي هي من <h1> إلى <h6> إضافة إلى <hgroup> كذلك.

<aside>

الغرض من العنصر <aside> هو احتواء محتوى يظهر داخل النص دون أن يشكل جزءا من تسلسل هذا النص, ولكنه يظل متعلقا به بطريقة ما. يمكن اعتبار الـ <aside> كشريط جانبي لمحتواك الرئيسي.

<aside>
  <p> هذا شريط جانبي, قد يكون على سبيل المثال تعريفا لمصطلح ما, أو نبذة مقتضبة عن خلفية معلمة تاريخية.</p>
</aside>

قبل ظهور HTML5, كانت اللوائح تنشأ باستعمال <ul> و <li>. أما الآن, فإضافة إلى هذه الأخيرة, يمكننا عزل عناصر اللائحة باستخدام الـ <nav>, حتى نسمح للمستخدم بالتصفح بين الصفحات. يمكنك إضافة العدد الذي تريده من العناصر <nav> على صفحة ما. كمثال على ذلك, من المألوف أن نجد على نفس الصفحة لائحة تصفح شمولية في الأعلى (ضمن<header>) ولائحة تصفح موضعية على شريط جانبي (ضمن <aside>).

<nav>
  <ul>
    <li><a href="/home">الرئيسية</a></li>
    <li><a href="/about">من نحن</a></li>
    <li><a href="/contact">تواصل معنا</a></li>
  </ul>
</nav>

<footer>

إذا كان هناك <header> فحتما يجب أن يكون هناك <footer>. ال<footer> يتواجد عموما في أسفل الوثيقة أو الـ section أو الـ article. وكما هو الشأن بالنسبة لل<header>, فإن المحتوى داخل ال<footer> هو كذلك عبارة عن معلومات وصفية, كتفاصيل عن الكاتب مثلا, أو معلومات قانونية أو/و روابط لمعلومات ذات صلة.

<footer>&copy;الشركة أ</footer>

<small>

العنصر <small> غالبا ما يظهر بداخل ال <footer> أو ال<aside> و عادة ما يحتوي على معلومات عن حقوق النشر أو التنازلات القانونية وغيرها. والغرض من <small> ليس هو جعل النص أصغر, وإنما سمي هكذا لأجل وصف المحتوى بداخله وليس لوصف كيفية عرض هذا المحتوى. (small بالإنجليزية تعني صغير).

<footer><small>&copy;الشركة أ</small> Date</footer>

<time>

العنصر <time> يسمح بربط تاريخ غير مبهم بصيغة ISO 8601 مع تاريخ يمكن قراءته من قبل الانسان.

<time datetime="2017-10-31T11:21:00+02:00">الثلاثاء 31 أكتوبر 2017</time>

لماذا نحتاج العنصر <time> ؟ في الوقت الذي يستطيع فيه البشر أن يقرؤوا بشكل واضح التاريخ الذي كتب بالطريقة المعتادة, فإن الحواسيب تستطيع قراءة التاريخ الذي كتب بصيغة ISO 8601 ومن ثم التعرف على التاريخ والتوقيت والمنطقة الزمنية.

<figure> و <figcaption>

الغرض من العنصر <figure> هو الالتفاف حول محتوى صورتك, أما <figcaption> فهدفها هو التعليق على صورتك.

<figure>
  <img src="https://en.wikipedia.org/wiki/File:Shadow_of_Mordor_cover_art.jpg" alt="Mordor ظل " />
  <figcaption> Mordor فن الغلاف للأرض الوسطى: ظل </figcaption>
</figure>

تعرف أكثر على المزيد من عناصر الHTML5 الجديدة :

• w3schools يوفر شروحات وصفية واضحة وبسيطة للعديد من العناصر, كما يبين كيف ومتى يجب استخدامها.
• MDN يوفر مرجعا عظيما لجميع عناصر الHTML ويتعمق أكثر بداخل كل منها.