ما هو HTML الدلالي ولماذا يجب عليك استخدامه

click fraud protection

من المبادئ المهمة في تصميم الويب فكرة استخدام عناصر HTML للإشارة إلى ماهيتها بالفعل ، بدلاً من كيفية ظهورها في المتصفح افتراضيًا. يُعرف هذا باستخدام HTML الدلالية.

ما هو HTML الدلالي؟

HTML الدلالي أو الترميز الدلالي هو HTML الذي يقدم معنى لصفحة الويب بدلاً من مجرد العرض. على سبيل المثال ، أ

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

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

تتضمن أمثلة علامات HTML الدلالية ما يلي:

  • علامات الرأس

     عبر

هناك العديد من علامات HTML الدلالية لاستخدامها أثناء إنشاء موقع ويب متوافق مع المعايير.

لماذا يجب أن تهتم بدلالات الألفاظ

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

instagram viewer

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

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

استخدام العلامات الدلالية بشكل صحيح

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

  • blockquote - بعض الناس يستخدمون ال علامة للمسافة البادئة للنص الذي ليس اقتباسًا. هذا بسبب وضع مسافة بادئة بين علامات الاقتباس بشكل افتراضي. إذا كنت تريد ببساطة وضع مسافة بادئة لنص ليس بلوك اقتباس ، استخدم هوامش CSS بدلاً من ذلك.
  • ص - يستخدم بعض محرري الويب ملفات (مساحة غير فاصلة مضمنة في فقرة) لإضافة مسافة إضافية بين عناصر الصفحة ، بدلاً من تحديد فقرات فعلية لنص تلك الصفحة. كما في المثال السابق ، يجب عليك استخدام خاصية نمط الهامش أو الحشوة بدلاً من ذلك لإضافة مساحة.
  • ماي - كما هو الحال مع
    ، وإرفاق النص داخل ملف
       علامة المسافة البادئة لهذا النص في معظم المتصفحات. هذا هو HTML غير صحيح من الناحية المعنوية وغير صالح على حد سواء ، لأن فقط
    •  العلامات صالحة داخل
        بطاقة شعار. مرة أخرى ، استخدم نمط الهامش أو الحشو لوضع مسافة بادئة للنص.
    • h1 و h2 و h3 و h4 و h5 و h6 - يمكنك استخدام علامات العناوين لجعل الخطوط أكبر وأكثر جرأة ، ولكن إذا لم يكن النص عنوانًا ، فاستخدم خصائص CSS لوزن الخط وحجم الخط بدلاً من ذلك.

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

     العلامات.

    ما هي علامات HTML الدلالية؟

    على الرغم من أن كل علامة HTML4 تقريبًا وجميع ملفات HTML5 العلامات لها معاني دلالية ، وبعض العلامات بالدرجة الأولى متعلق بدلالات الألفاظ.

    على سبيل المثال ، أعاد HTML5 تعريف معنى ملف  و  العلامات لتكون دلالية. ال  العلامة لا تنقل أهمية إضافية ؛ بدلاً من ذلك ، يتم عادةً تقديم النص الذي تم وضع علامة عليه بخط غامق. وبالمثل ، فإن  لا تنقل العلامة أهمية أو تركيزًا إضافيًا ؛ بدلاً من ذلك ، فهو يحدد النص الذي يتم تقديمه عادةً بخط مائل.

    علامات HTML الدلالية

    اختصار
    اختصار
    اقتباس طويل
    تعريف
    عنوان مؤلف (مؤلفي) المستند
    الاقتباس
    مرجع الكود
    نص Teletype
    التقسيم المنطقي
    حاوية نمط مضمنة عامة
    نص محذوف
    نص مدرج
    تشديد
    تأكيد قوي
    عنوان المستوى الأول
    عنوان المستوى الثاني
    عنوان المستوى الثالث
    العنوان الرابع
    عنوان من المستوى الخامس
    عنوان المستوى السادس

    استراحة موضوعية
    النص الذي سيدخله المستخدم
    نص منسق مسبقًا
    اقتباس مضمّن قصير
    إخراج العينة
    مخطوطة
    مرتفع
    متغير أو نص محدد من قبل المستخدم
instagram story viewer