العناوين والفقرات وتنسيق النص في HTML

أغلب محتوى الويب نصوص: مقالات، وشروحات، وأخبار. وحتى يكون النص مريحاً للقراءة، يجب تنظيمه في عناوين وفقرات واضحة. في هذا الدرس ستتعلم وسوم النصوص الأساسية، وكيف تميّز الكلمات المهمة، وستكتشف سراً صغيراً عن المسافات في HTML.

العناوين: من h1 إلى h6

في HTML ستة مستويات من العناوين، من الأهم إلى الأقل أهمية:

<h1>عنوان المستوى الأول</h1>
<h2>عنوان المستوى الثاني</h2>
<h3>عنوان المستوى الثالث</h3>
<h4>عنوان المستوى الرابع</h4>
<h5>عنوان المستوى الخامس</h5>
<h6>عنوان المستوى السادس</h6>

الحرف h اختصار لكلمة heading أي «عنوان». والمتصفح يعرض <h1> بأكبر خط، ويصغر الحجم تدريجياً حتى <h6>.

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

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

انتبه

لا تختر العنوان بسبب حجمه. إذا أردت نصاً كبيراً فهذا عمل CSS. اختر مستوى العنوان حسب أهميته في ترتيب الصفحة، ولا تقفز من <h2> إلى <h4> مباشرة.

ومن العادات الجيدة أن يكون في الصفحة عنوان <h1> واحد فقط، يصف موضوعها الرئيسي.

الفقرات

الفقرة تُكتب بالوسم <p>، والمتصفح يضع تلقائياً مسافة فوق كل فقرة وتحتها:

<p>تعلّم البرمجة يشبه تعلّم لغة جديدة: يحتاج إلى تدريب يومي.</p>
<p>ابدأ بخطوات صغيرة، وستتفاجأ بتقدمك بعد شهر واحد.</p>

سرّ المسافات في HTML

جرّب أن تكتب هذا:

<p>هذا      نص    فيه
مسافات      كثيرة
وأسطر جديدة.</p>

النتيجة في المتصفح ستكون سطراً عادياً: «هذا نص فيه مسافات كثيرة وأسطر جديدة.» لأن المتصفح يدمج أي عدد من المسافات والأسطر الجديدة في مسافة واحدة. هذا يمنحك حرية ترتيب الكود كما تحب، لكنه يعني أنك تحتاج وسوماً خاصة لتتحكم في الأسطر.

سطر جديد br وخط فاصل hr

إذا أردت النزول إلى سطر جديد داخل نفس الفقرة، مثل أبيات الشعر أو العناوين البريدية، استخدم <br>:

<p>
  مدرسة النور الإعدادية<br>
  شارع الجمهورية<br>
  القاهرة
</p>

وإذا أردت فصل موضوعين مختلفين بخط أفقي، استخدم <hr>:

<p>انتهى الجزء الأول من القصة.</p>
<hr>
<p>بعد مرور عام كامل...</p>

كلا الوسمين فارغ: ليس له محتوى ولا وسم إغلاق.

لا تستخدم br للمسافات

لا تكرر <br><br><br> لتصنع فراغاً بين الأجزاء. للفقرات المنفصلة استخدم <p>، وللمسافات استخدم CSS.

تمييز النص المهم

داخل الفقرة قد تحتاج إلى إبراز كلمة أو جملة:

الوسم	المعنى	الشكل الافتراضي
<strong>	نص مهم جداً	خط عريض
<em>	نص عليه تأكيد في النطق	خط مائل
<mark>	نص مظلَّل للفت النظر	خلفية صفراء
<small>	ملاحظة جانبية صغيرة	خط أصغر

<p><strong>تنبيه:</strong> الامتحان يوم الخميس.</p>
<p>أنا <em>متأكد</em> أنك ستنجح.</p>
<p>تذكّر أن <mark>المراجعة اليومية</mark> هي السر.</p>

ستجد أيضاً في المواقع القديمة الوسمين <b> و <i>، وهما يعطيان نفس الشكل تقريباً، لكن <strong> و <em> يحملان معنى تفهمه قارئات الشاشة ومحركات البحث، لذلك نفضّلهما.

جرّب بنفسك

هذه صفحة مقال صغيرة. جرّب أن تضيف عنوان <h3> جديداً، وأن تظلّل كلمة بـ <mark>، وأن تضيف مسافات كثيرة داخل فقرة لترى كيف يتجاهلها المتصفح:

جرّب بنفسكHTML

محرر الكود (HTML)<h1>رحلتي مع البرمجة</h1> <p>بدأت أتعلم البرمجة منذ <strong>ثلاثة أشهر</strong> فقط.</p> <h2>البداية</h2> <p>في الأسبوع الأول كتبت أول صفحة ويب، وكنت <em>سعيداً جداً</em>.</p> <h2>ماذا تعلمت؟</h2> <p>تعلمت أن <mark>التدريب اليومي</mark> أهم من الساعات الطويلة.</p> <hr> <p> كتبه: أحمد<br> <small>آخر تحديث: هذا الأسبوع</small> </p>

شغّلارجع للكود الأصليأو اضغط Ctrl + Enter

الناتج

أخطاء شائعة

• اختيار العنوان حسب الحجم: استخدام <h4> لأنه «أصغر وأجمل». رتّب العناوين حسب الأهمية، وغيّر الحجم بـ CSS.
• كتابة النص بدون فقرات: نص طويل داخل <body> مباشرة بلا <p> يصعب تنسيقه ويضعف فهم محركات البحث له.
• محاولة صنع أسطر جديدة بالضغط على Enter: المتصفح يتجاهلها. استخدم <p> لفقرة جديدة أو <br> لسطر جديد.

اختبر نفسك

سؤال

كتبت داخل p عدة أسطر بالضغط على Enter. كيف ستظهر في المتصفح؟

في سطر متصل لأن المتصفح يدمج المسافات والأسطرلن تظهر أبداًكما كتبتها تماماً بنفس الأسطر

سؤال

أي وسم يعبّر عن أن النص مهم جداً ويحمل هذا المعنى لقارئات الشاشة؟

<h6><strong><b>

الخلاصة

• العناوين ستة مستويات من <h1> إلى <h6>، وتُختار حسب الأهمية لا الحجم.
• اجعل في كل صفحة <h1> واحداً، ورتّب العناوين بلا قفز بين المستويات.
• الفقرات بـ <p>، والمتصفح يدمج المسافات والأسطر الزائدة.
• <br> لسطر جديد داخل الفقرة، و <hr> لفاصل بين موضوعين.
• <strong> للمهم، و <em> للتأكيد، و <mark> للتظليل.