ما فائدة semantic tags في html5؟

مروان محمود3 · 17 سبتمبر 2021

ما فائدة الsemantic tags في html5 حيث أنها ﻻ تعطي أي استايل للعنصر

شرف الدين حفني · 17 سبتمبر 2021

للsemantic tags اهمية كبرى تتمثل في عدة صفات مثل:

تجعل الشفرة البرمجية أسهل قراءةً وفهماً, فإذا قارننا هذه الشفرة

<html>

    <head>
        <title>Example</title>
    </head>

    <body>
        <div id="header">
        </div>

        <div id="main-content">
        </div>

        <div id="footer">
        </div>

    </body>

</html>

بهذه الشفرة :

<html>

    <head>
        <title>Example</title>
    </head>

    <body>
        <header>
      </header>

        <main>
        </main>

        <footer>
        </footer>

    </body>

</html>

سنﻻحظ أن الشفرة الثانية أوضح وأسهل للفهم, حيث للوسوم أسامي لها دلالات على وظيفتها

الsemantic tags تُحسن من الseo الخاص بالموقع , وتسهل عملية البحث من محركات البحث
تزيد من إمكانية الوصول(accessibility) وتساعد قارئ الشاشة على فهم محتوى الصفحة بشكل أفضل

تم التعديل في 20 سبتمبر 2021 بواسطة شرف الدين2
تنسيق الشفرة البرمجية

سامح أشرف · 17 سبتمبر 2021

أغلب العناصر من نوع semantic لا تختلف عن عنصر div وقد لا تضيف أي جديد للصفحة، لكن بالرغم من ذلك ينصح بإستخدام هذه العناصر كلما سنحت لك الفرصة وذلك لأن لها فائدة في تحسين السيو SEO الخاص بموقعك، وذلك لأن محركات البحث سوف تفهم تكوين الصفحة بشكل أكبر، فعنصر nav سيُفهم على أنه شريط التنقل الخاص بالموقع، وعنصر footer سيوضح آخر جزء من الصفحة .. إلخ.

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

كما أن إستخدام هذه العناصر سيسهل عليك عملية التطوير لأنك ستعرف مكان وفائدة الكود بمجرد النظر إلى اسم العنصر، في الماضي (في HTML 4 وما قبلها) كان يتم إستعمال عنصر div بكثرة لكي يتم إنشاء الأجزاء الرئيسية والفرعية في الموقع وكنتيجة لهذا الأمر كانت الصفحة ممتلئة بعناصر div مع أستعمال أصناف Classes ومعرفات IDs كثيرة ويصبح فهم الكود أصعب كلما زاد حجم الصفحة، لكن بعد ظهر عناصر semantic أصبح الأمر أسهل بكثير.

يمكنك أن تلقي نظرة على هذه الإجابة التي تشرح إستخدام مجموعة من عناصر semantic وأين يتم إستعمالها في الصفحة:

أسامة زيادة · 17 سبتمبر 2021

semantic tags (العناصر الدلالية) : هي مجموعة من عناصر HTML لها دلالة منطقية أو معنى .

الفائدة :-

في إصدارات سابقة في HTML كان يقسم الموقع عن طريق <div> وإعطاء <div> كلاس (class) معين يعبر عنه لكن مع semantic tags (العناصر الدلالية) أصبح يستفيد منها مطورين الويب في جعل محركات البحث فهم أجزاء الصفحة وأين توجد المعلومات ذات أهمية وتظهرها في نتائج البحث ، مما يساعد في ظهور موقعك في نتائج البحث الأولى في محركات البحث .

أمثلة على semantic tags ووظائفها :-

<header>: يوجد في راس الصفحة في الغالب يحتوي على اسم وشعار الموقع .
<nav> : الجزء الذي يحتوي على القائمة .
<section> : الجزء لذي يتم وضع المحتوى فيه .
<aside> : الشريط الجانبي للموقع .
<figure> : الأقسام التي تحتوي على صور وأشكال وغيرها .
<footer> : يوجد في أسفل الصفحة يتم وضع فيه معلومات عن الموقع .
<article> : تحتوي على المقالات .
<time> : لعرض الأوقات والتواريخ .
وغيرها من العناصر

هنا صورة توضح الأماكن الرئيسية لكيفية استخدام أهم العناصر الدلالية semantic:-

ما فائدة semantic tags في html5؟

السؤال

مروان محمود3

3 أجوبة على هذا السؤال

Recommended Posts

شرف الدين حفني

سامح أشرف

أسامة زيادة

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية