فهم الكود الدلالي

إن فهم الاستخدام الصحيح للشفرة الدلالية في HTML الخاص بك سيقطع شوطًا طويلاً للتأكد من تقديم كل المحتوى الخاص بك تمامًا كما كان مقصودًا. في حين أنه غالبًا ما يكون من المغري استخدامه ببساطة p or div عناصر لكل شيء ، في كثير من الأحيان هناك عنصر أكثر ملاءمة ودلالي لاستخدامه. على سبيل المثال ، بينما قد يكون من الأسهل استخدام علامات الفقرة لجميع كتل النص ، li, h1 من خلال h6 أو أي عناصر أخرى قد تكون اختيارًا أكثر ملاءمة للنص المطروح. ستلقي هذه المشاركة نظرة على سبب أهمية الشفرة الدلالية ، وبعض العناصر التي قد تستخدمها عادة في كتابة HTML.

كود HTML الدلالي

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

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

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

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

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

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

 

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

تحتوي علامات HTML5 ومعظم علامات HTML4 على معنى دلالي. الهدف من استخدام علامات HTML هو نقل المعنى المقصود دون أخطاء. عندما يتعلق الأمر بعلامات HTML ، فلا داعي للقلق بشأن “كيف” تبدو صفحة الويب. بدلاً من ذلك ، ينصب التركيز على المعايير التي تخطط لاتباعها لاستخدام كل علامة.

في HTML5 ، تم إعادة تعريف المعنى الدلالي لـ

– يمثل ارتباط تشعبي
– يدل على عنصر زر
و و و و – عناوين الصفحات بترتيب تنازلي
و – يسلط الضوء على أهمية النص داخل الكود
و – يمثل تصنيف صفحة الويب
و – يشير إلى القوائم المنظمة وغير المنظمة

كيف تكتب دلالات في HTML؟

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

بنية المستند أو تخطيط الصفحة

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

دلالات النص المضمنة

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

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

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

هل HTML الدلالي أفضل؟

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

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

HTML الدلالي SEO

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

باستخدام لغة HTML الدلالية ، يمكن لمحركات البحث فهرسة المحتوى “الصحيح” وتحديد أولوياته. على سبيل المثال ، يمكنك استخدام العرض عناصر لقوائم مقتطفات Google. على مدار السنوات القليلة الماضية ، استمرت لغة HTML الدلالية في التطور وتكمل ممارسات تحسين محركات البحث القياسية التي تتوافق مع قواعد Google.

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

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

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

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

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

لماذا نهتم بالشفرة الدلالية

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

أمثلة شائعة للكود الدلالية

الاختصارات

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

شبيبة WWW

 

النصوص المرتفعة والمرتفعة

تُستخدم المخطوطات المنخفضة والمرتفعة بشكل شائع للتدوين العلمي واصطلاحات الطباعة واستخدامات أخرى. بعض الأمثلة النموذجية:

ح 2 0 المركز الثاني

 

كود القصاصات

غالبًا ما يكون من المفيد أن تكون قادرًا على تمثيل مقتطفات من التعليمات البرمجية على صفحة HTML – نقوم بذلك بانتظام في دروسنا هنا في هذه المدونة. ال code من يدخل الي المتجر بغرض الشراء pre يمكن استخدام كل من العناصر لمقتطفات التعليمات البرمجية. code هو أفضل للقيم الفردية أو الكلمات التي يجب أن تؤخذ كجزء من الكود (على غرار كيفية عمل span يعمل العنصر). تستخدم مع pre, code سيعرض بعد ذلك كتلًا كاملة من التعليمات البرمجية ، مع التنسيق المناسب للمسافات البيضاء وفواصل الأسطر:

يجب عليك دائمًا استخدام علامة img لعناصر الصورة. p {  font-family: Helvetica;  font-size: 16px;  color: blue; }

 

فواصل الأسطر وفواصل الكلمات

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

811 شارع السابع لوس أنجلوس، كاليفورنيا الولايات المتحدة الأمريكية https: // sunlight media.org

 

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