شرح عناصر HTML5 الدلالية

عناصر HTML الدلالية هي تلك التي تصف بوضوح معناها بطريقة يمكن للإنسان والآلة قراءتها.

عناصر مثل ، و تعتبر كل الدلالي لأنها تصف بدقة الغرض من عنصر ونوع المحتوى الذي بداخلها.

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

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

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

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

لوصف المعلومات باستخدام جدول ، سيستخدمها المبرمجون لوضع عناصر أخرى على الصفحة.

مع تقدم استخدام التخطيطات المصممة بصريًا ، بدأ المبرمجون في استخدام علامة عامة "غير دلالية" مثل . غالبًا ما يقومون بإعطاء هذه العناصر classأو idسمة لوصف الغرض منها. على سبيل المثال ، بدلاً من هذا تمت كتابته غالبًا باسم .

نظرًا لأن HTML5 لا يزال جديدًا نسبيًا ، فإن استخدام العناصر غير الدلالية لا يزال شائعًا جدًا على مواقع الويب اليوم.

قائمة العناصر الدلالية الجديدة

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

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

مثال على تخطيط العنصر الدلالي بواسطة w3schools

العناصر الدلالية التي تضع صفحة بواسطة w3schools

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

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

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

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

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

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

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

و

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

و و عناصر متشابهة من الناحية المفاهيمية وقابلة للتبديل. لتحديد أي منها يجب عليك اختياره ، لاحظ ما يلي:

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

Top Stories

News

Story 1 Story 2 Story 3

Sport

Story 1 Story 2 Story 3

و

يوجد العنصر بشكل عام في الجزء العلوي من مستند أو قسم أو مقالة وعادة ما يحتوي على العنوان الرئيسي وبعض أدوات التنقل والبحث.

Company A

  • Home
  • About
  • Contact us

و يجب استخدام عنصر حيث كنت ترغب في العنوان الرئيسي مع واحد أو أكثر من العناوين الفرعية.

Heading 1

Subheading 1

Subheading 2

تذكر أن العنصر يمكن أن يحتوي على أي محتوى ، لكن العنصر يمكن أن يحتوي فقط على رؤوس أخرى ، أي

إلى

بما في ذلك .

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

This is a sidebar, for example a terminology definition or a short background to a historical figure.

قبل HTML5 ، تم إنشاء قوائمنا بامتداد

    و
  • 'س. الآن ، جنبًا إلى جنب مع هؤلاء ، يمكننا فصل عناصر القائمة الخاصة بنا باستخدام أ ، للتنقل بين صفحاتك. يمكن أن يكون لديك أي عدد من العناصر على الصفحة ، على سبيل المثال ، من الشائع أن يكون لديك تنقل عام عبر الجزء العلوي (في ) والتنقل المحلي في شريط جانبي (في عنصر).

    
           
    • Home
    • About
    • Contact us

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

    ©Company A

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

    ©Company A Date

    و يسمح عنصر واضح لا لبس فيه تاريخ ISO 8601 ترفق إلى إصدار الذي يمكن قراءته من ذلك التاريخ.

    Tuesday, 31 October 2017

    لماذا تهتم ؟ بينما يمكن للبشر قراءة الوقت الذي يمكن أن يزيل الغموض من خلال السياق بالطريقة العادية ، يمكن لأجهزة الكمبيوتر قراءة تاريخ ISO 8601 ومعرفة التاريخ والوقت والمنطقة الزمنية.

    و

    هو التفاف محتوى صورتك حوله ، وهو لتعليق صورتك.

    Shadow of Mordor Cover art for Middle-earth: Shadow of Mordor 

    تعرف على المزيد حول عناصر HTML5 الجديدة:

    • توفر w3schools وصفًا بسيطًا وواضحًا للعديد من عناصر الأخبار وكيف / أين يجب استخدامها.
    • يوفر MDN أيضًا مرجعًا رائعًا لجميع عناصر HTML ويتعمق في كل منها.