في المقال اللي فات إتكلمنا عن الوسوم الدلالية بس عشان نستخدم وسوم النصوص في HTML ونتعلم تنسيقها بطريقة صحيحة،
هنعتمد على وسوم التنسيق الخاصة بالنصوص.
في HTML فيه وسوم بتُستخدم لكتابة العناوين أو الفقرات،
وعشان نفهم استخدامها كويس،
هنبدأ بشرح وسوم العناوين أولًا، وبعد كده وسوم الفقرات.
العناوين في HTML:#
العناوين في HTML بتتقسم لـ 6 مستويات مختلفة،
بتبدأ من <h1> لحد <h6>، وكل ما الرقم يزيد حجم الخط بيصغر.
<h1>العنوان 1</h1>
<h2>العنوان 2</h2>
<h3>العنوان 3</h3>
<h4>العنوان 4</h4>
<h5>العنوان 5</h5>
<h6>العنوان 6</h6>
خد بالك:
لما تستخدم وسم <h1>، خليه للعنوان الرئيسي للصفحة بس،
ومتكرروش أكتر من مرة.
ده بيساعد محركات البحث (زي جوجل مثلًا) تفهم ترتيب المحتوى وتنظّمه صح.
الفقرات في HTML:#
علشان تكتب فقرة في HTML، بتستخدم وسم <p> كده ببساطة:
<p>دي فقرة بسيطة في HTML.</p>
وتقدر تستخدم عدد الفقرات اللي انت عايزه في الصفحة.
كل فقرة بتظهر في سطر لوحدها،
وبيكون فيه مسافة بسيطة قبلها وبعدها علشان الشكل يطلع منسّق وواضح.
وسوم تنسيق النصوص في HTML:#
هناك وسوم تقدمها HTML تساعد في تنسيق النصوص. وهناخد شرح ومثال علي كل وسم في الفقرات التالية:
1. جعل النص بالخط العريض في HTML#
علشان تخلي النص يبان بالخط العريض في HTML،
عندك وسمين ممكن تستخدمهم:
- وسم
<strong> - وسم
<b>
الاتنين بيخلّوا النص شكله غامق،
لكن الفرق إن <strong> ليه معنى أقوى،
وبيفهمه المتصفح ومحركات البحث على إنه نص مهم أو مؤكد.
عشان كده الأفضل دايمًا تستخدم <strong> بدل <b>،
خصوصًا لو بتكتب معلومة مهمة أو عايز تركّز على جزء أساسي في المحتوى.
مثال:
<p>تعلم <strong>HTML</strong> خطوة بخطوة.</p>
2. جعل النص بالخط المائل في HTML#
علشان تخلي النص يبان بالخط المائل في HTML،
عندك وسمين ممكن تستخدمهم:
- وسم
<em> - وسم
<i>
الاتنين بيخلّوا النص شكله مائل،
لكن الفرق إن <em> ليه معنى دلالي أقوى،
يعني بيقول للمتصفح ومحركات البحث إن الجزء ده مؤكد أو عليه تركيز.
أما <i> فهو مجرد تنسيق شكلي بس،
بيغيّر شكل الخط من غير ما يضيف معنى للمحتوى.
مثال:
<p>الكلمة <em>المائلة</em> دي فيها تأكيد على المعنى.</p>
من الأخر:
لو عايز تركّز على كلمة أو توضح إنك بتقولها بنبرة تأكيد، استخدم <em>.
لكن لو مجرد عايز تغيّر شكل الخط، استخدم <i>.
3. جعل النص تحته خط في HTML#
علشان تخلي النص أو كلمة معينة يظهر تحتها خط في HTML،
بنستخدم وسم <u>.
مثال:
<p>ده مثال على <u>نص تحته خط</u> في HTML.</p>
الوسم <u> بيخلّي النص يبان وكأنه متسطّر،
وده مفيد لو عايز تلفت الانتباه لكلمة معينة في النص.
بس خد بالك:
حاول متستخدمش <u> في النصوص اللي فيها روابط،
علشان مايتلخبطش القارئ ويفتكرها لينك.
4. جعل النص متعلم بلون أصفر في HTML#
علشان تخلي النص أو كلمة معينة تبان كأنها متعلّمة بالهايلايتر الأصفر،
بنستخدم وسم <mark> في HTML.
مثال:
<p>ده مثال على <mark>نص متعلم</mark> بلون أصفر في HTML.</p>
الوسم <mark> بيظهر النص بخلفية لونها أصفر افتراضيًا،
وبيفيد جدًا لما تحب توضّح كلمة مهمة أو تلفت الانتباه لجزء معين في الصفحة.
5. جعل النص بخط صغير في HTML#
علشان تخلي النص أو كلمة معينة بخط أصغر من الحجم العادي في HTML،
بنستخدم وسم <small>.
مثال:
<p>ده مثال على <small>نص بخط صغير</small> في HTML.</p>
الوسم <small> بيصغّر حجم الخط شوية عن الحجم الطبيعي،
وبيُستخدم عادةً في الملاحظات الجانبية،
زي الحقوق، أو النصوص التوضيحية اللي مش أساسية في المحتوى.
6. جعل النص فوق أو تحت الخط في HTML#
في HTML عندنا وسمين شبه بعض في الشكل،
لكن كل واحد ليه وظيفة مختلفة:
- وسم
<sup> - وسم
<sub>
الاتنين بيستخدموا لتنسيق النصوص يا إمّا فوق السطر أو تحته.
الفرق بسيط جدًا:
- وسم
<sup>(حرف p التقيلة 😄) بيخلّي النص فوق السطر. - وسم
<sub>(حرف b الخفيفة) بيخلّي النص تحت السطر.
أمثلة:
<p>مثال على نص <sup>فوق السطر</sup> في HTML.</p>
<p>مثال على نص <sub>تحت السطر</sub> في HTML.</p>
الوسمين دول مفيدين جدًا في المعادلات الرياضية أو الصيغ الكيميائية،
زي كده مثلًا:
<p>H<sub>2</sub>O أو X<sup>2</sup> = 4</p>
7. وسم الحذف والإضافة في HTML#
في HTML عندنا وسمين مهمين جدًا لما نحب نوضّح تعديل حصل على النص،
زي إن في جملة اتغيّرت أو كلمة اتشالت واتضافت غيرها.
الوسمين دول هما:
- وسم
<del> - وسم
<ins>
وسم <del> بنستخدمه علشان نوضّح إن في نص اتحذف،
أما <ins> فبنستخدمه لما نحب نوضّح إن في نص اتضاف مكانه.
مثال بسيط:
<p>She <del>worked</del> <ins>works</ins> here.</p>
في المثال ده الكلمة “worked” هتظهر عليها خط،
علشان تبين إنها اتحذفت،
أما “works” فهتظهر بخط عادي (أو متسطّر خفيف حسب المتصفح)
علشان تبين إنها الإضافة الجديدة.
إضافة تفاصيل أكتر:
تقدر كمان تضيف تفاصيل أكتر باستخدام الخاصيتين cite وdatetime،
عشان توضّح سبب التعديل وتاريخه.
مثال متقدّم شوية:
<p>
تم تعديل الجملة من
<del cite="https://codezelo.com/change-log" datetime="2026-01-01">قديم</del>
إلى
<ins cite="https://codezelo.com/change-log" datetime="2026-10-01">جديد</ins>
</p>
كده أي حد أو حتى محركات البحث تقدر تفهم إمتى النص اتغير،
وجاي منين المصدر.
من الأخر:
- وسم
<del>= نص اتحذف - وسم
<ins>= نص اتضاف - وسم
cite= مصدر التعديل - وسم
datetime= تاريخ التعديل