وثائق HTML قابلة للتشغيل: العناوين في HTML

Q: كم عدد وسوم العناوين في HTML؟

ستة: و و و و و . هو الأهم (عنوان الصفحة) و الأقل أهمية. لا يوجد ، ووسم كهذا يُعامل كعنصر سطري مجهول.

Q: ما الأحجام الافتراضية لعناوين HTML؟

مع نص افتراضي بحجم 16px، تعرض المتصفحات h1 بحجم 32px (2em)، وh2 بحجم 24px (1.5em)، وh3 بحجم 18.72px (1.17em)، وh4 بحجم 16px (1em)، وh5 بحجم 13.28px (0.83em)، وh6 بحجم 10.72px (0.67em)، وكلها عريضة.

Q: هل يمكن وضع أكثر من h1 في الصفحة؟

يسمح HTML بذلك، لكن واحدًا يسمّي الصفحة هو البنية الأوضح لمستخدمي قارئات الشاشة ولمحركات البحث. استخدم للأقسام الرئيسية تحته.

Q: كيف أغيّر حجم العنوان؟

اضبط font-size في CSS، مثل h2 { font-size: 20px; } أو فئة على عنوان واحد. لا تختر مستوى العنوان أبدًا بسبب حجمه الافتراضي.

العناوين في HTML: من h1 إلى h6، الأحجام والترتيب والتنسيق

في HTML ستة مستويات للعناوين، من <h1> إلى <h6>، وهي التي تعطي الصفحة مخططها. تعلّم الأحجام الافتراضية، وكيف ترتب العناوين، وكم وسم h1 تستخدم، وكيف تغيّر حجمها بـ CSS، وكيف تستخدمها قارئات الشاشة.

تحتوي هذه الصفحة على محررات قابلة للتشغيل - حرّر، شغّل، وشاهد النتيجة فوراً.

بقلم Kevin Spektor, Co-founder & CTO

نُشر في Sep 24, 2026

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

في HTML ستة مستويات للعناوين، من <h1> إلى <h6>. <h1> هو المستوى الأعلى (عنوان الصفحة) و<h6> الأدنى. تعرض المتصفحات كل مستوى أصغر من الذي قبله، وكلها عريضة، وكل عنوان في سطر مستقل:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Headings</title>
</head>
<body>
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>
  <p>A paragraph, for comparison.</p>
</body>
</html>

الوسم	الحجم الافتراضي	مع نص بحجم 16px
`<h1>`	2em	32px
`<h2>`	1.5em	24px
`<h3>`	1.17em	18.72px
`<h4>`	1em	16px
`<h5>`	0.83em	13.28px
`<h6>`	0.67em	10.72px

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

العناوين هي مخطط الصفحة

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

القاعدة بسيطة: <h1> واحد لعنوان الصفحة، و<h2> لكل قسم رئيسي، و<h3> للأقسام الفرعية داخل <h2>، وهكذا، من دون تخطي مستويات. هذا المثال يبني فهرس محتويات من العناوين، بالطريقة نفسها التي تراها بها الأدوات المساعدة:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Outline</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    #toc { background: #e5e7eb; padding: 8px 12px; border-radius: 6px; font-size: 14px; }
  </style>
</head>
<body>
  <div id="toc"></div>
  <h1>Pasta recipes</h1>
  <h2>Tomato sauce</h2>
  <h3>Ingredients</h3>
  <h3>Steps</h3>
  <h2>Pesto</h2>
  <h3>Ingredients</h3>
  <script>
    const lines = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')].map((h) => {
      const level = Number(h.tagName[1]);
      return '\u00a0'.repeat((level - 1) * 4) + h.tagName.toLowerCase() + ': ' + h.textContent;
    });
    document.getElementById('toc').innerHTML = lines.join('<br>');
  </script>
</body>
</html>

غيّر <h3> الثاني إلى <h5> وستظهر فجوة في المخطط: القارئ الذي يتنقل بالعناوين سيتساءل أين ذهب h4.

تغيير حجم العنوان

اختر المستوى بحسب موقعه في المخطط، ثم اضبط المظهر بـ CSS. قد يحتاج عنوان الشريط الجانبي أن يكون <h2> لكن بمظهر صغير، وقد يكون عنوان الواجهة الرئيسية <h1> كبيرًا جدًا:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Heading size</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    h1 { font-size: 44px; margin-bottom: 4px; }
    h2 { font-size: 18px; color: #2563eb; text-transform: uppercase; letter-spacing: 0.05em; }
    .quiet { font-weight: 500; font-size: 16px; color: #4b5563; }
  </style>
</head>
<body>
  <h1>Big hero title</h1>
  <h2>Small section label</h2>
  <p>Still an h2 for screen readers, whatever it looks like.</p>
  <h2 class="quiet">A quiet h2 with a class</h2>
</body>
</html>

والعكس صحيح أيضًا: لا تستخدم وسم عنوان لمجرد تكبير النص أو جعله عريضًا. للكلمات العريضة داخل جملة استخدم <strong>، وللنص الكبير الذي ليس عنوانًا استخدم <p> مع class. راجع النص العريض لمعرفة وسوم النص.

العناوين الفرعية والشعارات النصية

العنوان الفرعي الموجود مباشرة تحت عنوان ليس عادةً عنوانًا بحد ذاته: فهو لا يبدأ قسمًا جديدًا. استخدم فقرة، واجمع الاثنين بـ <hgroup> إن أردت:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Subtitle</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    hgroup h1 { margin-bottom: 0; }
    hgroup p { margin-top: 4px; color: #4b5563; font-size: 18px; }
  </style>
</head>
<body>
  <hgroup>
    <h1>Coffee Guide</h1>
    <p>Everything about brewing at home</p>
  </hgroup>
  <h2>Grinding</h2>
</body>
</html>

يبقى المخطط نظيفًا (h1 واحد، ثم أقسام h2)، ويبقى الشعار النصي بصريًا مع العنوان.

الربط بعنوان

أعطِ العنوان id، وأي رابط يحتوي على #id في href سينتقل إليه مباشرة. هكذا تعمل فهارس المحتويات وأزرار «نسخ رابط القسم»:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Heading links</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    section { min-height: 400px; border-top: 2px solid #e5e7eb; }
  </style>
</head>
<body>
  <nav><a href="#install">Install</a> | <a href="#usage">Usage</a></nav>
  <section><h2 id="install">Install</h2></section>
  <section><h2 id="usage">Usage</h2></section>
</body>
</html>

أخطاء شائعة

اختيار المستوى بسبب حجمه. اختر بحسب الموقع في المخطط، ثم نسّق بـ CSS.
تخطي المستويات. الانتقال من <h2> مباشرة إلى <h4> يفسد التنقل لمستخدمي قارئات الشاشة.
عناوين للتأكيد. السطر العريض داخل فقرة هو <strong>، وليس <h4>.
غياب <h1>، أو شعار الموقع وحده كـ <h1>. يجب أن يسمّي <h1> محتوى الصفحة، مثل عنوان المقال أو المنتج.
عناوين فارغة. العنوان الذي لا يحتوي إلا على أيقونة أو لا شيء يُعلن عنه كفراغ. ضع فيه نصًا حقيقيًا.

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

كم عدد وسوم العناوين في HTML؟

ستة: <h1> و<h2> و<h3> و<h4> و<h5> و<h6>. <h1> هو الأهم (عنوان الصفحة) و<h6> الأقل أهمية. لا يوجد <h7>، ووسم كهذا يُعامل كعنصر سطري مجهول.

ما الأحجام الافتراضية لعناوين HTML؟

مع نص افتراضي بحجم 16px، تعرض المتصفحات h1 بحجم 32px (2em)، وh2 بحجم 24px (1.5em)، وh3 بحجم 18.72px (1.17em)، وh4 بحجم 16px (1em)، وh5 بحجم 13.28px (0.83em)، وh6 بحجم 10.72px (0.67em)، وكلها عريضة.

هل يمكن وضع أكثر من h1 في الصفحة؟

يسمح HTML بذلك، لكن <h1> واحدًا يسمّي الصفحة هو البنية الأوضح لمستخدمي قارئات الشاشة ولمحركات البحث. استخدم <h2> للأقسام الرئيسية تحته.

هل يمكنني تخطي مستويات العناوين، مثل الانتقال من h2 إلى h4؟

تجنّب ذلك. مستخدمو قارئات الشاشة يتنقلون بحسب مستوى العنوان، والقفز من h2 إلى h4 يوحي بوجود قسم مفقود. اختر المستوى بحسب موقعه في المخطط وغيّر الحجم بـ CSS.

كيف أغيّر حجم العنوان؟

اضبط font-size في CSS، مثل h2 { font-size: 20px; } أو فئة على عنوان واحد. لا تختر مستوى العنوان أبدًا بسبب حجمه الافتراضي.

مفاهيم ذات صلة