HTML Academy · درس

العناوين h1-h6 وتسلسلها الهرمي

استخدم مستويات العناوين لإنشاء بنية ذات معنى للمستند

العناوين h1-h6 وتسلسلها الهرمي درس مجاني في HTML Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML Academy 4 دروس في المجموع.

مستويات العناوين الستة

يوفّر HTML ستة عناصر للعناوين، من <h1> إلى <h6>:

h1 — العنوان الرئيسي للصفحة (الأكثر أهمية)
h2 — الأقسام الرئيسية
h3 — الأقسام الفرعية
h4, h5, h6 — الأقسام الفرعية الأعمق (نادراً ما تكون مطلوبة)

يتناقص حجمها بصرياً، لكن الحجم تتحكم فيه CSS — وليس رقم العنوان.

التسلسل الهرمي الدلالي

تنشئ العناوين مخططاً للمستند — أي جدول محتويات لصفحتك:

<h1>HTML Fundamentals</h1>
  <h2>Document Structure</h2>
    <h3>The html Element</h3>
    <h3>The head Element</h3>
  <h2>Text Elements</h2>
    <h3>Headings</h3>
    <h3>Paragraphs</h3>

قاعدة h1

أفضل الممارسات المتعلقة بـ <h1>:

استخدم عنصر <h1> واحداً بالضبط في كل صفحة
ينبغي أن يطابق عنصر <title> أو يرتبط به ارتباطاً وثيقاً
يمثل الموضوع الأساسي للصفحة
توليه محركات البحث أهمية كبيرة لتحسين محركات البحث (SEO)

لا تتجاوز المستويات

يجب استخدام مستويات العناوين بالترتيب — فلا تنتقل من h2 إلى h4:

<!-- Bad: skips h3 -->
<h2>Section</h2>
<h4>Subsection</h4>

<!-- Good: sequential order -->
<h2>Section</h2>
<h3>Subsection</h3>
<h4>Detail</h4>
<!-- Screen readers use outline order to navigate. Skipping breaks navigation. -->

العناوين للتنقل

يعتمد مستخدمو قارئات الشاشة على العناوين للتنقل في الصفحات الطويلة:

ينتقلون بين العناوين باستخدام المفتاح H
تعرض قارئات الشاشة جميع العناوين كما لو كانت جدول محتويات
يجعل التسلسل الهرمي الصحيح الصفحة قابلة للتنقل دون الحاجة إلى رؤيتها

المظهر مقابل الدلالة

لا تختر مستوى العنوان بناءً على حجمه البصري — استخدم CSS للتحكم في ذلك:

<!-- Bad: using h4 because it looks right -->
<h4 style="font-size: 2rem">Big Heading</h4>

<!-- Good: correct level, sized with CSS -->
<h1>Big Heading</h1>
<!-- CSS: h1 { font-size: 2rem; } -->

العناوين ضمن الأقسام

عند استخدام عناصر تقسيم الصفحة في HTML5، يبدأ تسلسل العناوين من جديد في كل قسم:

<article>
  <h2>Article Title</h2>    <!-- h2 within article -->
  <section>
    <h3>Subtopic</h3>       <!-- h3 within section -->
  </section>
</article>

<aside>
  <h2>Related Links</h2>   <!-- h2 in aside, independent section -->
</aside>

نصائح لإتاحة العناوين

اتبع قواعد العناوين التالية لضمان الإتاحة:

يجب أن تحتوي كل صفحة على عنوان واحد على الأقل
ينبغي أن تبدأ منطقة المحتوى الرئيسي بعنصر <h1>
لا تستخدم العناوين لمجرد جعل النص عريضاً أو كبيراً
لا تستخدم النص العريض بديلاً عن العناوين

تحسين محركات البحث والعناوين

تستخدم محركات البحث العناوين لفهم محتوى الصفحة:

يحمل <h1> أكبر وزن في تحسين محركات البحث
أدرج الكلمات المفتاحية المستهدفة في العناوين بشكل طبيعي
تجزّئ العناوين المحتوى وتحسّن مؤشرات قابلية القراءة
تعرض محركات البحث العناوين في النتائج (المقتطفات المميزة)

الأنماط الافتراضية للمتصفح

تطبّق المتصفحات أنماطاً افتراضية على العناوين:

/* Default browser heading sizes (approximate) */
h1 { font-size: 2em;   font-weight: bold; }
h2 { font-size: 1.5em; font-weight: bold; }
h3 { font-size: 1.17em;font-weight: bold; }
h4 { font-size: 1em;   font-weight: bold; }
h5 { font-size: 0.83em;font-weight: bold; }
h6 { font-size: 0.67em;font-weight: bold; }

العناوين في التنقل

يمكن أيضاً استخدام العناوين ضمن معالم التنقل:

<nav aria-labelledby="nav-heading">
  <h2 id="nav-heading">Main Navigation</h2>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

تحقق سريع

كم عنصراً من نوع h1 ينبغي أن تحتوي عليه عادةً صفحة جيدة التنظيم؟

مراجعة: العناوين

أساسيات التسلسل الهرمي للعناوين:

ستة مستويات: من h1 إلى h6
عنصر h1 واحد لكل صفحة — وهو العنوان الرئيسي
استخدم المستويات بالترتيب — ولا تتجاوز أي مستوى
تنشئ العناوين مخططاً متاحاً للمستند
استخدم CSS للتحكم في الحجم البصري، لا أرقام العناوين

الأسئلة الشائعة

هل درس «العناوين h1-h6 وتسلسلها الهرمي» مجاني؟

نعم — نص درس «العناوين h1-h6 وتسلسلها الهرمي» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML Academy، انتقل إلى CoddyKit PRO. تتضمن دورة HTML Academy 4 دروس في المجموع.

ماذا ستتعلم في «العناوين h1-h6 وتسلسلها الهرمي»؟

استخدم مستويات العناوين لإنشاء بنية ذات معنى للمستند تتمرن على HTML Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ HTML Academy؟

لا تُشترط خبرة سابقة. HTML Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «العناوين h1-h6 وتسلسلها الهرمي»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس HTML Academy هذا؟

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

جميع الدروس في هذه الدورة

← العودة إلى HTML Academy