النصوص والقوائم في HTML — دليل شامل 2026

في المقال السابق، بنيت أول صفحة HTML وتعلمت الوسوم الأساسية. الآن سنتعمق في النصوص و القوائم — وهما العنصران الأكثر استخداماً في أي صفحة ويب.

في هذا الدليل العملي، سنأخذك خطوة بخطوة لفهم كل ما يتعلق بالنصوص والقوائم، مع تمارين وحلول.

العناوين (Headings)

العناوين هي هيكل الصفحة. تبدأ من <h1> (الأكبر) وتنتهي بـ <h6> (الأصغر).

<h1>عنوان الصفحة الرئيسي</h1>
<h2>قسم رئيسي</h2>
<h3>قسم فرعي</h3>
<h4>عنوان أصغر</h4>
<h5>عنوان أصغر</h5>
<h6>أصغر عنوان</h6>

قواعد استخدام العناوين

القاعدة	السبب
h1 مرة واحدة فقط	عنوان الصفحة الرئيسي (مهم لـ SEO)
تسلسل منطقي	h1 → h2 → h3 (لا تتخطى)
لا تستخدمها للحجم	الحجم يأتي من CSS
وصفية	تعكس المحتوى

❌ مثال خاطئ:

<h1>عنوان</h1>
<h3>قسم فرعي</h3>  <!-- تخطى h2! -->
<h1>عنوان آخر</h1>  <!-- h1 ثانٍ! -->

✅ مثال صحيح:

<h1>المدونة</h1>
<h2>مقالات React</h2>
<h3>أساسيات React</h3>
<h3>React Hooks</h3>
<h2>مقالات CSS</h2>
<h3>Flexbox</h3>

الفقرات (Paragraphs)

الفقرة <p> هي وحدة النص الأساسية.

<p>هذه فقرة نصية بسيطة.</p>
<p>هذه فقرة أخرى. يمكن أن تحتوي على نص طويل جداً، وتمتد لعدة أسطر في المتصفح، لكنها تبقى فقرة واحدة.</p>

خصائص الفقرات

• تلقائياً: كل <p> يبدأ بسطر جديد.
• المسافات: المتصفح يتجاهل المسافات الزائدة والأسطر الجديدة.
• الطول: يمكن أن تكون قصيرة أو طويلة.

المسافات في HTML

<p>هذا    نص
به    مسافات
كثيرة</p>

النتيجة: "هذا نص به مسافات كثيرة" — المتصفح يدمج كل المسافات في مسافة واحدة.

للحفاظ على المسافات:

<pre>
  هذا    نص
  محفوظ    كما هو
</pre>

أو استخدام   (مسافة غير قابلة للكسر):

<p>مسافة&nbsp;&nbsp;&nbsp;واسعة</p>

تنسيقات النص

1. النص العريض (Bold)

<p>هذا نص <strong>مهم جداً</strong>.</p>
<p>هذا نص <b>عريض</b> فقط.</p>

الوسم	المعنى	الاستخدام
<strong>	مهم دلالياً	تحذيرات، نقاط مهمة
<b>	عريض بصرياً	لأغراض بصرية فقط

2. النص المائل (Italic)

<p>هذا نص <em>مؤكد عليه</em>.</p>
<p>هذا نص <i>مائل</i> فقط.</p>

الوسم	المعنى	الاستخدام
<em>	تأكيد دلالي	كلمات أجنبية، مصطلحات
<i>	مائل بصرياً	أيقونات، أسماء

3. النص المسطّر

<p>السعر: <del>100 $</del> <ins>80 $</ins></p>

• <del>: نص محذوف (خط في الوسط).
• <ins>: نص مضاف (خط تحت).

4. النص المميز

<p>هذا نص <mark>مميز بخلفية صفراء</mark>.</p>

5. النص الصغير

<p>هذا نص <small>صغير</small> للحواشي.</p>

6. النص السفلي والعلوي

<p>الماء: H<sub>2</sub>O</p>
<p>المعادلة: E = mc<sup>2</sup></p>

• <sub>: منخفض (subscript).
• <sup>: مرتفع (superscript).

7. الاقتباسات

اقتباس قصير (inline):

<p>قال أحمد: <q>التعلم المستمر هو مفتاح النجاح</q>.</p>

اقتباس طويل (blockquote):

<blockquote>
  <p>التعلم المستمر هو مفتاح النجاح في عالم التقنية.</p>
  <cite>— أحمد محمد</cite>
</blockquote>

اقتباس مع رابط المصدر:

<blockquote cite="https://example.com/article">
  <p>نص الاقتباس هنا.</p>
</blockquote>

8. الكود

<p>استخدم وسم <code>&lt;h1&gt;</code> للعنوان الرئيسي.</p>

النتيجة: استخدم وسم <h1> للعنوان الرئيسي.

⚠️ لاحظ: < و > يجب كتابتهما كـ < و >.

الرموز الخاصة (HTML Entities)

بعض الأحرف محجوزة في HTML، لذا نستخدم رموزاً خاصة:

الرمز	الكود	النتيجة
أصغر من	&lt;	<
أكبر من	&gt;	>
علامة العطف	&amp;	&
علامة التنصيص	&quot;	"
مسافة	&nbsp;	مسافة
حقوق النشر	&copy;	©
علامة تجارية	&reg;	®
يورو	&euro;	€
قلب	&hearts;	♥

القوائم (Lists)

1. القائمة غير المرتبة (Unordered List)

<ul>
  <li>تفاح</li>
  <li>موز</li>
  <li>برتقال</li>
</ul>

النتيجة:

• تفاح
• موز
• برتقال

تغيير نوع النقاط (CSS):

<ul style="list-style-type: square;">
  <li>عنصر</li>
</ul>

الأنواع: disc (افتراضي), circle, square, none.

2. القائمة المرتبة (Ordered List)

<ol>
  <li>الخطوة الأولى</li>
  <li>الخطوة الثانية</li>
  <li>الخطوة الثالثة</li>
</ol>

النتيجة:

1. الخطوة الأولى
2. الخطوة الثانية
3. الخطوة الثالثة

تغيير نوع الترقيم:

<ol type="A">
  <li>أولاً</li>
  <li>ثانياً</li>
</ol>

الأنواع:

• 1 (أرقام — افتراضي)
• A (أحرف كبيرة)
• a (أحرف صغيرة)
• I (روماني كبير)
• i (روماني صغير)

بدء الترقيم من رقم آخر:

<ol start="5">
  <li>عنصر 5</li>
  <li>عنصر 6</li>
</ol>

3. القوائم المتداخلة (Nested Lists)

<ul>
  <li>فواكه
    <ul>
      <li>تفاح</li>
      <li>موز</li>
    </ul>
  </li>
  <li>خضروات
    <ul>
      <li>طماطم</li>
      <li>خيار</li>
    </ul>
  </li>
</ul>

النتيجة:

• فواكه
  • تفاح
  • موز
• خضروات
  • طماطم
  • خيار

4. قائمة التعريف (Description List)

<dl>
  <dt>HTML</dt>
  <dd>لغة ترميز لبناء صفحات الويب</dd>
  
  <dt>CSS</dt>
  <dd>لغة تنسيق لتجميل الصفحات</dd>
</dl>

النتيجة:

HTML لغة ترميز لبناء صفحات الويب

CSS لغة تنسيق لتجميل الصفحات

الوسوم:

• <dl>: القائمة (Description List).
• <dt>: المصطلح (Description Term).
• <dd>: التعريف (Description Details).

أمثلة عملية

1. مقال مدونة

<article>
  <h1>تعلم HTML في 30 يوماً</h1>
  <p>HTML هي <strong>أساس كل موقع ويب</strong>. في هذا المقال، سنتعلم كيف نبدأ.</p>
  
  <h2>ما هو HTML؟</h2>
  <p>HTML اختصار لـ <em>HyperText Markup Language</em>.</p>
  
  <h2>لماذا نتعلمه؟</h2>
  <ul>
    <li>سهل التعلم</li>
    <li>مطلوب في كل مكان</li>
    <li>أساس باقي التقنيات</li>
  </ul>
</article>

2. وصفة طبخ

<article>
  <h1>وصفة الكيك الإسفنجي</h1>
  
  <h2>المكونات</h2>
  <ul>
    <li>2 كوب دقيق</li>
    <li>1 كوب سكر</li>
    <li>3 بيضات</li>
    <li>نصف كوب زبدة</li>
  </ul>
  
  <h2>الخطوات</h2>
  <ol>
    <li>اخلط الزبدة والسكر</li>
    <li>أضف البيض واحدة تلو الأخرى</li>
    <li>أضف الدقيق تدريجياً</li>
    <li>اخبز لمدة 30 دقيقة على 180°C</li>
  </ol>
  
  <p><strong>ملاحظة:</strong> تأكد من تسخين الفرن مسبقاً.</p>
</article>

3. صفحة FAQ

<section>
  <h1>الأسئلة الشائعة</h1>
  
  <dl>
    <dt>ما هو HTML؟</dt>
    <dd>لغة ترميز لبناء صفحات الويب.</dd>
    
    <dt>ما هو CSS؟</dt>
    <dd>لغة تنسيق لتجميل الصفحات.</dd>
    
    <dt>هل أحتاج خبرة سابقة؟</dt>
    <dd>لا، يمكنك البدء من الصفر.</dd>
  </dl>
</section>

تمارين عملية

تمرين 1: مقال شخصي

اكتب مقالاً عن نفسك يحتوي على:

• عنوان رئيسي.
• 3 فقرات.
• نص عريض ومائل.

الحل:

<h1>من أنا</h1>
<p>اسمي <strong>أحمد</strong>، وأنا <em>مطور ويب</em>.</p>
<p>أحب تعلم <strong>التقنيات الحديثة</strong> مثل React و TypeScript.</p>
<p>هدفي هو بناء <em>منصات تعليمية</em> بالعربية.</p>

تمرين 2: قائمة مهام

أنشئ قائمة مهام مع عناصر منجزة ومعلقة.

الحل:

<h2>مهامي اليوم</h2>
<ul>
  <li><del>الاستيقاظ مبكراً</del></li>
  <li><del>ممارسة الرياضة</del></li>
  <li>تعلم HTML</li>
  <li>كتابة مقال</li>
</ul>

تمرين 3: وصفة طبخ

أنشئ وصفة تحتوي على مكونات وخطوات.

الحل:

<h1>وصفة السلطة</h1>
<h2>المكونات</h2>
<ul>
  <li>خس</li>
  <li>طماطم</li>
  <li>خيار</li>
  <li>زيتون</li>
</ul>
<h2>الخطوات</h2>
<ol>
  <li>اغسل الخضار</li>
  <li>قطعها إلى قطع صغيرة</li>
  <li>أضف الزيت والليمون</li>
  <li>قدمها باردة</li>
</ol>

تمرين 4: قائمة متداخلة

أنشئ قائمة متداخلة للفئات والمنتجات.

الحل:

<h2>منتجاتنا</h2>
<ul>
  <li>إلكترونيات
    <ul>
      <li>لابتوبات</li>
      <li>هواتف</li>
    </ul>
  </li>
  <li>ملابس
    <ul>
      <li>رجالية</li>
      <li>نسائية</li>
    </ul>
  </li>
</ul>

تمرين 5: اقتباس مع مصدر

أنشئ صفحة تعرض اقتباساً مع مصدره.

الحل:

<h1>اقتباس اليوم</h1>
<blockquote>
  <p>النجاح ليس نهائياً، والفشل ليس قاتلاً، الشجاعة للاستمرار هي ما يهم.</p>
  <cite>— ونستون تشرشل</cite>
</blockquote>

تمرين 6: رموز خاصة

أنشئ صفحة تعرض رموزاً خاصة (©، ®، €).

الحل:

<h1>رموز خاصة</h1>
<p>حقوق النشر: &copy; 2026</p>
<p>علامة تجارية: &reg;</p>
<p>السعر: 100 &euro;</p>
<p>5 &lt; 10 &gt; 3</p>
<p>استخدم &amp; للربط</p>

تمرين 7: صفحة معجم

أنشئ صفحة تعرض مصطلحات تقنية.

الحل:

<h1>معجم المصطلحات</h1>
<dl>
  <dt>HTML</dt>
  <dd>لغة ترميز النص التشعبي</dd>
  
  <dt>CSS</dt>
  <dd>أوراق الأنماط المتتالية</dd>
  
  <dt>JS</dt>
  <dd>JavaScript — لغة برمجة للويب</dd>
</dl>

تمرين 8: مقال كامل

اكتب مقالاً عن "تعلم البرمجة" يحتوي على كل ما تعلمته.

الحل:

<article>
  <h1>كيف تبدأ تعلم البرمجة؟</h1>
  <p>تعلم البرمجة هو <strong>رحلة ممتعة</strong>، لكنها تحتاج <em>صبراً وممارسة</em>.</p>
  
  <h2>الخطوات</h2>
  <ol>
    <li>اختر لغة برمجة</li>
    <li>تعلم الأساسيات</li>
    <li>طبق مشاريع صغيرة</li>
    <li>شارك في مجتمعات</li>
  </ol>
  
  <h2>نصائح مهمة</h2>
  <ul>
    <li>مارس يومياً</li>
    <li>لا تخف من الأخطاء</li>
    <li>ابحث عن حلول</li>
  </ul>
  
  <blockquote>
    <p>أفضل طريقة للتعلم هي الممارسة.</p>
    <cite>— مبرمج مجهول</cite>
  </blockquote>
  
  <p><small>© 2026 — جميع الحقوق محفوظة</small></p>
</article>

حل المشاكل الشائعة

🔴 المشكلة 1: النص يظهر كرموز

السبب: عدم تحديد charset="UTF-8".

الحل:

<meta charset="UTF-8">

🔴 المشكلة 2: المسافات لا تظهر

السبب: HTML يدمج المسافات.

الحل:

<p>مسافة&nbsp;&nbsp;واسعة</p>

أو استخدم <pre>.

🔴 المشكلة 3: الوسوم تظهر كنص

السبب: استخدام < و > مباشرة.

الحل:

&lt;h1&gt;  <!-- بدلاً من <h1> -->

🔴 المشكلة 4: القوائم لا تظهر

السبب: نسيان <li>.

الحل: تأكد من أن كل عنصر داخل <li>:

<ul>
  <li>عنصر</li>
</ul>

🔴 المشكلة 5: h1 متعدد

السبب: استخدام h1 أكثر من مرة.

الحل: استخدم h1 مرة واحدة، واستخدم h2 للأقسام.

جدول الوسوم

الوسم	الوظيفة
<h1>-<h6>	العناوين
<p>	فقرة
<strong>	نص مهم
<em>	نص مؤكد
<mark>	تمييز
<del>	محذوف
<ins>	مضاف
<sub>	منخفض
<sup>	مرتفع
<blockquote>	اقتباس
<code>	كود
<ul>	قائمة غير مرتبة
<ol>	قائمة مرتبة
<li>	عنصر قائمة
<dl>	قائمة التعريف

قائمة تحقق نهائية

المهمة	الحالة
استخدام العناوين بشكل صحيح	⬜
تنسيق النصوص (strong, em, mark)	⬜
إنشاء قوائم ul و ol	⬜
القوائم المتداخلة	⬜
قائمة التعريف (dl)	⬜
استخدام الرموز الخاصة	⬜
حل التمارين الثمانية	⬜

ماذا بعد هذا المقال؟

الآن بعد أن أتقنت النصوص والقوائم، أنت جاهز للمقال التالي:

1. الصور والروابط — إضافة الوسائط.
2. النماذج والجداول — العناصر التفاعلية.
3. الوسوم الدلالية — HTML احترافي.

الخلاصة

في هذا المقال، تعلمت:

• ✅ العناوين (h1-h6) وقواعد استخدامها.
• ✅ الفقرات والمسافات.
• ✅ تنسيقات النصوص (strong, em, mark, del, ins).
• ✅ الاقتباسات (q, blockquote).
• ✅ الرموز الخاصة (HTML Entities).
• ✅ القوائم (ul, ol, dl).
• ✅ القوائم المتداخلة.
• ✅ حل 8 تمارين عملية.

تذكر: النصوص والقوائم هي جسد المحتوى. أتقنها جيداً.