وثائق HTML قابلة للتشغيل: النص العريض والمائل

Q: كيف أجعل النص عريضًا في HTML؟

ضعه داخل عندما تكون الكلمات مهمة ( Warning: )، أو داخل عندما تريد فقط أن تبرز من دون أهمية إضافية، مثل اسم منتج. كلاهما يُعرض بخط عريض افتراضيًا.

Q: ما الفرق بين و ؟

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

Q: كيف أجعل النص مائلًا في HTML؟

استخدم للتأكيد الذي يغيّر معنى الجملة (مثل الضغط على كلمة بعينها عند النطق)، و للنص المكتوب بصوت مختلف: الكلمات الأجنبية والمصطلحات التقنية وأسماء السفن والأفكار الداخلية. كلاهما يُعرض مائلًا.

Q: كيف أجعل النص عريضًا ومائلًا في الوقت نفسه؟

ضع الوسمين أحدهما داخل الآخر: text . أغلقهما بعكس ترتيب فتحهما. وفي CSS اضبط font-weight: bold وfont-style: italic معًا على عنصر واحد.

Q: هل يمكنني جعل النص عريضًا بـ CSS بدلًا من ذلك؟

نعم: font-weight: bold (أو 700) على أي عنصر. استخدم CSS عندما يكون العريض بصريًا فقط، مثل تسمية زر أو نمط رأس جدول، واستخدم وسوم HTML عندما تكون الكلمات نفسها مهمة أو مؤكَّدة.

النص العريض والمائل في HTML: وسوم strong وb وem وi

اجعل النص عريضًا في HTML بـ أو ، ومائلًا بـ أو . تعلّم أي وسم تستخدم ومتى، وكيف تجمع بين العريض والمائل، وكيف تجعل النص عريضًا أو مائلًا بـ CSS بدلًا من ذلك.

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

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

نُشر في Sep 24, 2026

كيف تجعل النص عريضًا في HTML

ضع النص داخل  أو . كلاهما يجعله عريضًا:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bold</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
  </style>
</head>
<body>
  <p><strong>Warning:</strong> unplug the device before opening it.</p>
  <p>The <b>Pro</b> plan includes offline mode.</p>
</body>
</html>

شكلهما متطابق. الفرق فيما يقولانه عن النص.

الفرق بين strong وb

الوسم	المعنى	مثال
`<strong>`	محتوى مهم أو جاد أو عاجل	`<strong>Do not</strong> share your password.`
`<b>`	يبرز، لكن بلا أهمية إضافية	الكلمات المفتاحية في ملخص، اسم منتج، الكلمات الأولى في مقال

اختر  حين كنت سترفع صوتك أو تريد ألا يفوّت القارئ الكلام. واختر  حين يكون الخط العريض عرفًا بصريًا لهذا النوع من النص. وإن لم يناسب أي منهما وأردت مجرد تنسيق، فاستخدم  مع class وCSS.

النص المائل: em وi

يتبع زوج الوسوم المائلة الفكرة نفسها:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Italics</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
  </style>
</head>
<body>
  <p>I <em>never</em> said she took the money.</p>
  <p>I never said <em>she</em> took the money.</p>
  <p>The word <i lang="fr">déjà vu</i> comes from French, and the ship was the <i>Endurance</i>.</p>
</body>
</html>

الوسم	المعنى	مثال
`<em>`	تأكيد بالنبرة: نقله إلى كلمة أخرى يغيّر معنى الجملة	`I <em>never</em> said that.`
`<i>`	صوت مختلف: كلمات أجنبية، مصطلحات تقنية، أسماء سفن، أفكار داخلية	`<i lang="la">et cetera</i>`

الجملتان الأوليان أعلاه تستخدمان الكلمات نفسها وتعنيان شيئين مختلفين بسبب موضع . وعندما يحدد  عبارة بلغة أخرى، أضف السمة lang كي تنطقها قارئات الشاشة بشكل صحيح.

بعض الوسوم الأخرى مائلة افتراضيًا: <cite> (عنوان عمل)، و<dfn> (مصطلح يجري تعريفه)، و<address> و<var>. استخدمها حين تناسب ودع تنسيقها الافتراضي يتولى الباقي.

العريض والمائل معًا

ضع أحد الوسمين داخل الآخر، وأغلقهما بالترتيب العكسي:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bold italic</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
  </style>
</head>
<body>
  <p><strong><em>Bold and italic</em></strong></p>
  <p><em>Italic with a <strong>bold</strong> word inside</em></p>
  <p><b><i>b and i together</i></b></p>
</body>
</html>

text (الإغلاق بترتيب خاطئ) يُعرض مع ذلك، لكن المتصفح يضطر إلى إصلاح الشجرة وقد يقسّم عناصرك، راجع الوسوم لترى كيف يبدو ذلك الإصلاح.

العريض والمائل بـ CSS

عندما يكون التنسيق بصريًا فقط (عنوان بطاقة، سعر، تسمية)، استخدم CSS على العنصر نفسه بدلًا من إضافة وسم. font-weight تتحكم في العريض وfont-style في المائل:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS bold and italic</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    .price { font-weight: bold; color: #16a34a; }
    .semi { font-weight: 600; }
    .note { font-style: italic; color: #4b5563; }
    .calm strong { font-weight: normal; color: #dc2626; }
  </style>
</head>
<body>
  <p>Price: <span class="price">$12</span></p>
  <p class="semi">font-weight: 600</p>
  <p class="note">A note set in italics with font-style.</p>
  <p class="calm"><strong>Still strong</strong>, shown in red instead of bold.</p>
</body>
</html>

يوضح السطر الأخير أن المعنى والمظهر منفصلان: يحتفظ  بمعناه بينما ينسّقه CSS بشكل مختلف. تشرح صفحة font-weight في CSS النطاق الكامل للأوزان (من 100 إلى 900).

إمكانية الوصول

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

أخطاء شائعة

استخدام العريض كعنوان. سطر من نص  فوق قسم ليس عنوانًا بالنسبة لقارئات الشاشة. استخدم <h2> أو <h3> ونسّقه.
استخدام  للتنسيق. إذا لم يكن في النص شيء مهم، فاستخدم  أو CSS.
جعل فقرة كاملة عريضة. التأكيد ينجح حين يكون نادرًا. اجعل عبارة واحدة عريضة، لا الفقرة كلها.
إغلاق الوسوم بترتيب خاطئ. x، وليس x أبدًا.
الوسوم القديمة. الوسم  الموجود في الدروس القديمة مهجور. استخدم الوسوم أعلاه أو font-weight.

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

كيف أجعل النص عريضًا في HTML؟

ضعه داخل  عندما تكون الكلمات مهمة (Warning:)، أو داخل  عندما تريد فقط أن تبرز من دون أهمية إضافية، مثل اسم منتج. كلاهما يُعرض بخط عريض افتراضيًا.

ما الفرق بين و؟

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

كيف أجعل النص مائلًا في HTML؟

استخدم  للتأكيد الذي يغيّر معنى الجملة (مثل الضغط على كلمة بعينها عند النطق)، و للنص المكتوب بصوت مختلف: الكلمات الأجنبية والمصطلحات التقنية وأسماء السفن والأفكار الداخلية. كلاهما يُعرض مائلًا.

كيف أجعل النص عريضًا ومائلًا في الوقت نفسه؟

ضع الوسمين أحدهما داخل الآخر: text. أغلقهما بعكس ترتيب فتحهما. وفي CSS اضبط font-weight: bold وfont-style: italic معًا على عنصر واحد.

هل يمكنني جعل النص عريضًا بـ CSS بدلًا من ذلك؟

نعم: font-weight: bold (أو 700) على أي عنصر. استخدم CSS عندما يكون العريض بصريًا فقط، مثل تسمية زر أو نمط رأس جدول، واستخدم وسوم HTML عندما تكون الكلمات نفسها مهمة أو مؤكَّدة.

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