تعلم كيفية استخدام الوسوم الدلالية لبناء صفحات يمكن الوصول إليها، وسهلة الصيانة، وصديقة لمحركات البحث. يغطي هذا الدليل الوسوم الأساسية، وأمثلة من الواقع، والأخطاء الشائعة، وخطوات الهجرة العملية.
يستخدم HTML الدلالي عناصر ذات معنى لوصف الهيكل والغرض. بدلاً من استخدام حاويات عامة في كل مكان، استخدم وسومًا مثل <header> و <nav> و <main> و <footer> لتوصيل أدوار المستند إلى المتصفحات ومحركات البحث وتقنيات المساعدة.
<header>...</header>
<main>...</main>
<footer>...</footer> > الهيكل الدلالي هو معزز لجودة المنتج: قابلية استخدام أفضل، وزيادة وضوح البحث، وتكلفة صيانة أقل.
تعتمد قارئات الشاشة ومستخدمي لوحة المفاتيح على المعالم وتسلسل العناوين. تحسن الوسوم الدلالية التن السياق.
يمكن لمحركات البحث تفسير تسلسل المحتوى والغرض من الصفحة بشكل أفضل، مما يحسن جودة الفهرس وملاءمته.
يقلل الهيكل الواضح من وقت التعلم، واحتكاك المراجعة، والتراجعات العرضية في قواعد التعليمات البرمجية الكبيرة.
تغطي هذه الوسوم معظم تخطيطات الإنتاج. استخدمها عن قصد قبل اللجوء إلى الحاويات العامة.
القسم العلوي لمقدمة الصفحة أو الكتلة: الشعار، العنوان، الملخص، الإجراءات المساعدة.
الروابط التنقلية الرئيسية فقط. تجنب تغليف كل قائمة روابط صغيرة باستخدام nav.
المحتوى الأساسي للصفحة. استخدم عنصر main واحدًا في كل مستند.
محتوى مجمع مع موضوع مشترك، عادة ما يقدمه عنوان.
محتوى مكتفٍ ذاتيًا يمكن إعادة استخدامه أو نشره بشكل مستقل.
محتوى ذو صلة ولكنه ثانوي: الأشرطة الجانبية، الروابط ذات الصلة، مربعات النص البارزة.
البيانات الوصفية والروابط المساعدة للصفحة أو القسم.
الرسوم التوضيحية، المخططات، لقطات الشاشة للكود مقترنة بـ figcaption.
انتقل من أغلفة div الفوضوية إلى هيكل دلالي في ثلاث خطوات موثوقة.
أدخل ترميز Vue/React/HTML الخاص بك كما هو تمامًا.
تعيين الحاويات الهيكلية إلى وسوم دلالية مع الحفاظ على سلامة الكود.
تحقق من المعالم والعناوين، ثم ادمجها في قاعدة الكود الخاصة بك.
استخدم أداة تنظيف HTML الدلالي لترقية الترميز القديم بسرعة وأمان. حافظ على كودك واضحًا وقابلًا للتوسع وصديقًا لمحركات البحث.
ابدأ تنظيف HTML