العناوين والفقرات وتنسيق النص في HTML (من h1 إلى h6 وstrong وem)

العناوين تصنع المخطط

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

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

الفقرات والأسطر الجديدة والمسافات

ضع كل فقرة داخل <p>. والمتصفح يدمج المسافات: فالمسافات المتعددة أو الأسطر الجديدة في شيفرتك تصبح مسافة واحدة في الصفحة. وهذا يعني أنك تستطيع إزاحة شيفرتك بحرية، لكنه يعني أيضاً أن الضغط على Enter في الشيفرة لا ينشئ سطراً جديداً في الصفحة.

استخدم <br> فقط حيث يكون السطر الجديد جزءاً من المحتوى، مثل العنوان البريدي أو القصيدة. ولا تستخدم عدة وسوم <br> لإنشاء فراغ بين الكتل، بل استخدم فقرات منفصلة وهوامش CSS. ويشير <hr> إلى تغيّر الموضوع بين الفقرات، ويظهر خطاً افتراضياً.

وعندما يجب الحفاظ على المسافات كما هي، كما في الشيفرات أو الرسوم النصية، استخدم <pre>، فهو يحفظ كل مسافة وكل سطر جديد. وللشيفرات ضع <code> داخل <pre>.

كلمات ذات معنى

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

وما زال <b> و<i> موجودين للنص الذي يُنسَّق بشكل مختلف دون أهمية إضافية: <b> للكلمات المفتاحية أو أسماء المنتجات في مراجعة، و<i> لمصطلح تقني أو فكرة أو عبارة بلغة أخرى. وعندما تتردد اسأل: "هل هذا أهم؟" (strong) أم "هل هو مميز فقط؟" (b أو i).

وإليك عناصر أخرى ستقابلها كثيراً: <code> للشيفرة داخل الجملة، و<blockquote> للاقتباس الطويل مع <cite> لعنوان المصدر، و<q> للاقتباس القصير داخل السطر، و<abbr title="..."> للاختصار مع شكله الكامل، و<mark> للنص المميز، و<small> للملاحظات الجانبية مثل الملاحظات القانونية.

أخطاء شائعة

• اختيار العناوين حسب الحجم

  استخدام <h4> لأنه "يبدو مناسباً" يكسر المخطط. اختر المستوى حسب موقعه في الصفحة، ثم نسّقه باستخدام CSS.

• جعل النص عريضاً باستخدام عنوان

  الجملة العريضة داخل الفقرة ليست عنواناً. استخدم <strong> (أو CSS) بدلاً من ذلك، وإلا ستعرضها قارئات الشاشة كأنها قسم.

• تكديس وسوم br لصنع الفراغ

  <br><br><br> ينشئ أسطراً فارغة قد تعلنها قارئات الشاشة وتنكسر على الشاشات الصغيرة. والفقرات المنفصلة مع هوامش CSS تؤدي ذلك بالشكل الصحيح.

تمرين

اكتب مقالاً قصيراً: عنوان h1 واحد، وقسمين h2 على الأقل في كل منهما فقرة، وتحذير واحد داخل strong، واختصار واحد بسمة title تذكر شكله الكامل.

<h1>My city</h1>
<p>A short guide to Sharjah.</p>

<h2>Food</h2>
<p>Try the fish market. <strong>Go early:</strong> it gets busy after 10 am.</p>

<h2>Getting there</h2>
<p>Sharjah is in the <abbr title="United Arab Emirates">UAE</abbr>, next to Dubai.</p>

اختبار سريع

أسئلة يطرحها الناس

المصادر

روجعت المعلومات في هذا الدرس وفق هذه الصفحات الرسمية بتاريخ 20 أكتوبر 2026.

• MDN: Headings and paragraphs
• MDN: The strong element
• WHATWG HTML: Text-level semantics
• W3C WAI: Page structure, headings

تبقى أمثلة الشيفرة بالإنجليزية وتعمل في بيئة معزولة على جهازك. والنص العربي بانتظار المراجعة من متحدث أصلي. وإذا لاحظت خطأ فأخبرنا عبر صفحة التواصل.