الفرق بين HTML العادي و Semantic HTML

مقدمة حول HTML العادي و Semantic HTML

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

من ناحية أخرى، فإن Semantic HTML هو تحسين لـ HTML العادي حيث يستخدم علامات تصف بشكل واضح دور ومحتوى العناصر داخل الصفحة. باستخدام Semantic HTML، يمكن للمطورين تحسين قابلية الوصول إلى الموقع وتحسين التفاعل مع محركات البحث، مما يؤدي إلى تحسين ترتيب الموقع في نتائج البحث.

فوائد استخدام Semantic HTML

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

مثال بسيط على ذلك هو استخدام علامة <header> لتعريف ترويسة الصفحة أو القسم بدلاً من استخدام علامة <div> عامة. يؤدي استخدام العلامات الدلالية إلى توضيح الغرض من العناصر داخل الصفحة بشكل أفضل.

<article>
    <header>
        <h2>ترويسة المقالة</h2>
    </header>
    <section>
        <p>هذا جزء من المقالة يوضح الفوائد المختلفة لاستخدام HTML الدلالي.</p>
    </section>
</article>

أمثلة على HTML العادي مقابل Semantic HTML

في HTML العادي، قد نستخدم علامات <div> و<span> بشكل متكرر لاحتواء النصوص أو الصور دون وصف دقيق لدور هذه العناصر. بينما في Semantic HTML، نستخدم علامات مثل <article> و<nav> لتوضيح دور المحتوى.

<div class=\"header\">
    <h1>عنوان الصفحة</h1>
</div>
<div class=\"content\">
    <p>هذا نص داخل قسم المحتوى.</p>
</div>

<header>
    <h1>عنوان الصفحة</h1>
</header>
<main>
    <p>هذا نص داخل قسم المحتوى.</p>
</main>

في النهاية، يمكن القول أن استخدام Semantic HTML يعزز من وضوح ودقة هيكلة الموقع، مما يسهل فهمه لكل من المستخدمين ومحركات البحث على حد سواء.