عناوين HTML
يمكنك بالفعل كتابة العناصر والسمات. تركز هذه الحصة على العناوين — الوسوم التي تسمّي العنوان الرئيسي وعناوين أقسام الصفحة. العناوين الجيدة تساعد القارئ على مسح الصفحة وتساعد المتصفحات وأدوات المساعدة على فهم المخطط.
ما هي عناوين HTML؟
عناوين HTML ستة مستويات: h1 وh2 وh3 وh4 وh5 وh6. h1 أعلى مستوى عنوان في الصفحة. h6 الأدنى. هذه الوسوم للمعنى والبنية. يمكن تغيير الحجم المرئي لاحقاً بـ CSS؛ لا تختر مستوى العنوان فقط لأنك تريد نصاً أكبر أو أصغر.
إجابة مباشرة
استخدم العناوين لبناء مخطط واضح. فضّل h1 واحداً واضحاً لموضوع الصفحة. استخدم h2 للأقسام الرئيسية تحت ذلك الموضوع، ثم h3 للأقسام الفرعية، وهكذا. أبقِ المستويات مرتبة قدر الإمكان — القفز من h1 مباشرة إلى h4 غالباً يجعل المخطط أصعب متابعة.
مستويات العناوين
html<h1>العنوان الرئيسي للصفحة</h1>
<h2>عنوان القسم</h2>
<h3>عنوان القسم الفرعي</h3>
<p>نص فقرة تحت القسم الفرعي.</p>قراءة المثال
h1يقدّم موضوع الصفحة كلهh2يبدأ قسماً رئيسياً تحت ذلك الموضوعh3يبدأ جزءاً أصغر داخل ذلك القسم- الفقرة نص عادي للجسم وليست عنواناً
لماذا يهم ترتيب العناوين
تنشئ العناوين مخطط مستند، يشبه جدول المحتويات. تستخدم قارئات الشاشة وبعض أدوات SEO ذلك المخطط. إذا تخطيت المستويات للمظهر فقط، تصبح البنية مربكة حتى لو بدت الصفحة «جيدة» لك.
h1 واحد ثم الأقسام
لصفحات المبتدئين في هذه الدورة، أبقِ h1 واحداً واضحاً. ثم نظّم المحتوى بـ h2 ومستويات أعمق عند الحاجة. ستلتقي بأنماط مخطط أكثر تقدماً لاحقاً؛ أتقن أولاً هذا النمط البسيط المقروء.
مخطط صفحة صغير
html<h1>دليل المدينة</h1>
<h2>التنقل</h2>
<p>نصائح للحافلات والقطارات.</p>
<h2>الطعام</h2>
<h3>طعام الشارع</h3>
<p>وجبات خفيفة محلية سريعة.</p>
<h3>مطاعم للجلوس</h3>
<p>أماكن لوجبة أطول.</p>العناوين ليست للمسافات الفارغة
لا تستخدم وسوم عنوان فارغة لصنع فراغ عمودي. لا تلف كل عبارة عريضة في عنوان. إذا لم يكن النص عنواناً حقيقياً لقسم، استخدم فقرة أو عنصراً مناسباً آخر.
جرّب بنفسك
- أنشئ أو افتح ملف HTML بالهيكل الأساسي
- أضف
h1واحداً يسمّي موضوع الصفحة - أضف قسمي
h2مع فقرة قصيرة تحت كل منهما - تحت أحد
h2أضفh3وفقرة قصيرة - احفظ وافتح الصفحة — تحقق أن المخطط سهل المسح
أخطاء شائعة
- اختيار مستويات العنوان حسب حجم الخط فقط بدل البنية
- القفز من
h1إلىh4بلا سبب - استخدام عدة
h1في صفحة مبتدئ بسيطة عندما يكفي عنوان رئيسي واحد واضح - وضع فقرات طويلة داخل وسوم العنوان
- استخدام العناوين كمباعدات زخرفية بلا عنوان قسم حقيقي
ملخص
- تستخدم العناوين
h1إلىh6لتحديد مستويات العنوان - تبني البنية والمخطط لا الحجم المرئي فقط
- فضّل
h1واحداً واضحاً ثم أقسامh2–h6مرتبة - تجنّب تخطي المستويات للتصميم فقط
- أبقِ نص العنوان قصيراً وشبيهاً بالعنوان
- نسّق الحجم لاحقاً بـ CSS؛ أبقِ عناوين HTML دلالية
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى