تعلّم HTML من الصفرالدرس 7 من 8
HTML الدلالية: كيف تبني صفحة يفهمها جوجل وقارئ الشاشة
تعلم الوسوم الدلالية header وnav وmain وarticle وsection وaside وfooter، ولماذا تحسن السيو وإمكانية الوصول، مع قائمة فحص لصفحة صديقة لمحركات البحث.
محتويات الدرس
يمكنك بناء صفحة كاملة بوسم <div> فقط، وستبدو جيدة. لكن جوجل وقارئات الشاشة لن تعرف أين القائمة وأين المقال. الوسوم الدلالية (Semantic) تصف معنى كل جزء.
الوسوم الدلالية الأساسية
| الوسم | المعنى |
|---|---|
<header> |
رأس الصفحة أو رأس مقال: الشعار والعنوان |
<nav> |
قائمة تنقل رئيسية |
<main> |
المحتوى الرئيسي، مرة واحدة في الصفحة |
<article> |
محتوى مستقل يمكن نشره وحده: مقال، منشور، تعليق |
<section> |
قسم له عنوان داخل الصفحة |
<aside> |
محتوى جانبي: روابط ذات صلة، إعلان |
<footer> |
تذييل: حقوق، روابط، معلومات تواصل |
<time> |
تاريخ أو وقت بصيغة يفهمها الحاسوب |
صفحة مقال دلالية
جرّب بنفسكعدّل الكود ثم اضغط تشغيل
لماذا تهتم؟
- محركات البحث تفهم أن هذا مقال وأن هذه قائمة، فتعرض صفحتك بشكل أفضل.
- قارئات الشاشة تتيح للمكفوفين القفز مباشرة إلى
mainأوnav. - الكود أوضح لك ولمن يعمل معك.
قائمة فحص لصفحة صديقة لمحركات البحث
-
lang="ar" dir="rtl"على وسم html. -
<title>فريد ووصفي، وmeta descriptionجذاب. -
<h1>واحد يطابق موضوع الصفحة، ثم h2 وh3 بالترتيب. - كل صورة لها
altوصفي وwidthوheight. - روابط بنصوص واضحة، لا «اضغط هنا».
-
mainواحد، وnavللقوائم، وarticleللمقال. - رابط canonical إن كان للصفحة أكثر من عنوان:
<link rel="canonical" href="https://example.com/page">.
div وspan: متى نستخدمهما؟
عندما لا يوجد وسم دلالي مناسب، وتحتاج فقط «صندوقًا» للتنسيق: <div> لكتلة، و<span> لجزء داخل سطر.
الأسئلة الشائعة
هل section وarticle متشابهان؟
article محتوى مستقل له معنى وحده، وsection قسم من محتوى أكبر. المقال article، وأقسامه sections.
هل تؤثر الوسوم الدلالية على الترتيب في جوجل مباشرة؟
ليست عاملًا سحريًا، لكنها تساعد جوجل على فهم الصفحة، وتحسن إمكانية الوصول وتجربة الاستخدام، وكل ذلك يفيد.
الخلاصة
- استخدم header وnav وmain وarticle وsection وaside وfooter بدل div حين يناسب المعنى.
- الصفحة الدلالية أفضل للسيو وإمكانية الوصول.
- راجع قائمة الفحص قبل نشر أي صفحة.