HTML bold: الخط العريض بوسم b وstrong وCSS

ما معنى HTML bold

يعني html bold نصًا يرسمه المتصفح بحروف أعرض. وهناك ثلاث طرق للحصول عليه. أولًا، الوسم <b>. ثم الوسم <strong>. وأخيرًا، يمكن لـ CSS أن يجعل أي نص عريضًا باستخدام font-weight.

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

يشرح هذا الدليل أيها تستخدم ومتى. بعد ذلك يوضح ما يقدمه html bold لتحسين محركات البحث، ومتى يصبح كثيرًا، وكيف تصلح صفحة يكاد كل سطر فيها يكون عريضًا. كما أن أداتنا المجانية SEO Checker تكشف هذه المشكلة الأخيرة، لذلك نشرح قاعدتها أيضًا.

وسم HTML bold: الوسم b

العنصر <b> هو أقدم وسم للخط العريض في HTML. تضع الكلمات داخله، ثم يعرضها المتصفح بخط عريض. وهذا أبسط مثال:

<p>Add <b>two cups</b> of flour.</p>

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

فمتى تستخدم الوسم b؟

استخدم <b> عندما تريد أن تتوقف العين عند كلمة، دون أن تحذّر أو تؤكد شيئًا. على سبيل المثال:

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

يصف معيار HTML Living Standard الوسم <b> بأنه الخيار الأخير. أي اختر أولًا وسمًا له معنى حقيقي. ثم استخدم <b> فقط عندما لا يناسب أي وسم آخر.

وسم strong

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

<p><strong>Warning:</strong> unplug the device before you open it.</p>

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

ومتى تستخدم وسم strong؟

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

يمكنك أيضًا وضع وسم داخل آخر. فالنص داخل وسمي <strong> يُعد أهم من النص داخل وسم واحد. ومع ذلك، نادرًا ما تحتاج صفحة إلى هذا. وإذا كنت تكرر التداخل كثيرًا، فالنص نفسه يحتاج غالبًا إلى إعادة كتابة.

strong أم b في HTML

يسأل كثيرون أيهما "أفضل". لكن السؤال الحقيقي في الواقع هو: أيهما صحيح لكلماتك؟ وهذه هي الإجابة المختصرة.

• <b> يعني "انظر هنا". يضيف الشكل فقط.
• <strong> يعني "هذا مهم". يضيف المعنى والشكل.
• كلاهما عريض افتراضيًا، لأن المتصفح يعرضهما هكذا.
• كلاهما HTML5 صالح. ولا أحد منهما قديم أو ممنوع.

لذلك اسأل نفسك سؤالًا واحدًا. لو قرأت الجملة بصوت عالٍ، هل كنت ستؤكد هذه الكلمات؟ إذا كانت الإجابة نعم، استخدم <strong>. وإذا أردت فقط لفت النظر، استخدم <b>. أما إذا كان الخط العريض جزءًا من التصميم، مثل نص زر، فاستخدم CSS.

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

الخط العريض باستخدام CSS

عندما يكون الخط العريض جزءًا من التصميم، فمكانه CSS. فالعناوين والأزرار وروابط القائمة ورؤوس الجداول أمثلة جيدة. والخاصية التي تحتاجها هي font-weight.

.price {
  font-weight: 700;
}

تبدأ القيم من 100، وهو رفيع، حتى 900، وهو عريض جدًا. النص العادي 400، والخط العريض 700. ويمكنك أيضًا كتابة bold بدل 700، لأنهما بالمعنى نفسه.

bold وbolder والأرقام

كلمة bolder تعني درجة أعرض من نص العنصر الأب. يبدو هذا مفيدًا. لكن النتيجة تعتمد على الخط. فإذا لم يكن في الخط وزن 800، قد يقلده المتصفح أو يتجاهله. لذلك تكون الأرقام الثابتة أسهل في التوقع.

ملاحظة عن الخطوط

لا يبدو خط الويب جميلًا بالخط العريض إلا إذا حمّلت ملفه العريض. وإلا فإن المتصفح يوسّع الحروف العادية ليقلده. وهذا الخط العريض المزيف يبدو ضبابيًا. لذلك حمّل وزن 700 لكل خط تنوي استخدامه عريضًا.

وأخيرًا، يمكن لـ CSS أيضًا إزالة الخط العريض. على سبيل المثال، تجعل القاعدة strong { font-weight: 600; } نص strong أخف قليلًا في الموقع كله. ويبقى المعنى، لأن الوسم ما زال موجودًا.

هل يساعد الخط العريض في السيو؟

قليلًا، وفقط عندما يكون صادقًا. فقد قالت Google إنها تقرأ النص العريض كتلميح عن موضوع الفقرة. لكنه تلميح صغير. فلن يرفع صفحة ضعيفة، ولن يحل أبدًا محل عناوين واضحة ونص جيد.

في الواقع، الخط العريض يساعد الناس أكثر. فمن يتصفح صفحة طويلة ينظر أولًا إلى العناوين، ثم إلى الكلمات العريضة. لذلك إذا لخّصت كلماتك العريضة كل قسم، يبقى القراء مدة أطول. وهذا بالضبط ما تريد محركات البحث رؤيته.

فمتى يضر الخط العريض إذن؟

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

متى يصبح الخط العريض كثيرًا

لا يوجد حد رسمي. ومع ذلك تتفق أدوات التدقيق على شكل المشكلة. فأداة SEO Checker عندنا تعدّ كل <b> وكل <strong> في الصفحة. ثم تعرض تحذيرًا في ثلاث حالات.

1. كثرة. في الصفحة أكثر من 20 مقطعًا عريضًا، وأكثر من مقطع لكل 40 كلمة.
2. تكرار. النص نفسه عريض أكثر من مرة، مثل كلمة مفتاحية في كل فقرة.
3. طول. مقطع عريض أطول من 70 حرفًا، أي جملة كاملة.

القاعدة الأولى تكبر مع حجم الصفحة. فدليل من 4000 كلمة يتحمل خطًا عريضًا أكثر من صفحة منتج من 300 كلمة. أما القاعدتان الثانية والثالثة فتنطبقان على كل صفحة، لأن التكرار أو الجملة العريضة لا يفيدان القارئ أبدًا.

ولماذا تكون الجملة العريضة الكاملة مشكلة؟

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

كيف تصلح الخط العريض الزائد

الإصلاح في معظمه تحرير للنص، وليس برمجة. لذلك تستغرق كل صفحة دقائق قليلة. وهذا هو الترتيب الذي نتبعه في مواقع عملائنا.

الخطوة 1: اعثر على كل مقطع عريض

افحص الصفحة باستخدام SEO Checker. ثم افتح تبويب Elements، حيث يظهر النص العريض مع عدده. أو ابحث في مصدر الصفحة عن <b> و<strong>.

الخطوة 2: احذف التكرار

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

الخطوة 3: اختصر المقاطع الطويلة

اختصر كل جملة عريضة إلى الكلمتين أو الثلاث التي تحملها. على سبيل المثال، بدل أن تجعل جملة "احفظ نسخة من ملفاتك قبل التحديث" عريضة كلها، اكتب "احفظ نسخة من ملفاتك قبل التحديث".

الخطوة 4: انقل الخط العريض التصميمي إلى CSS

التسميات والأسعار ورؤوس الجداول جزء من التصميم. لذلك أعطها صنفًا وقاعدة font-weight بدل الوسم. وبهذا لا تُحسب نصًا عريضًا في المحتوى.

<!-- Before -->
<p><b>Price:</b> $29</p>

<!-- After -->
<p><span class="label">Price:</span> $29</p>

.label { font-weight: 700; }

الخطوة 5: تحقّق من النتيجة

الصق الكود الجديد في محرر HTML أونلاين وقارنه بالقديم. ثم افحص الصفحة المنشورة مرة أخرى. يجب أن يختفي التحذير. ويعرض الفيديو أدناه العملية كاملة على صفحة مثال.

الخط العريض في ووردبريس وMarkdown والبريد

نادرًا ما يكتب أحد html bold بيده. بل يكتبه المحرر عنه غالبًا. لذلك من المفيد أن تعرف ماذا ينتج كل محرر.

ووردبريس

زر الخط العريض في محرر المكوّنات، أو Ctrl+B، يكتب <strong>. وهذا جيد للتأكيد الحقيقي. لكن كثيرًا من الكتّاب يضغطونه فقط لتحسين شكل النص. لذلك تنتهي مقالات ووردبريس غالبًا بخط عريض زائد. وفي هذه الحالة، استخدم عنوانًا أو مكوّنًا منسقًا بدلًا منه.

Markdown

في Markdown، تجعل نجمتان على كل جانب النص عريضًا: **هكذا**. ومعظم الأدوات تحوّله إلى <strong>. كما تعرض لك أداتنا محوّل Markdown إلى HTML كود HTML الناتج بالضبط.

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

أخطاء شائعة

• جعل كلمة مفتاحية عريضة في كل فقرة "لمساعدة السيو". يبدو ذلك حشوًا.
• جعل فقرة كاملة عريضة لتبرز. العنوان أو الملاحظة يؤديان المهمة أفضل.
• استخدام <strong> لتسميات التصميم. استخدم CSS حتى يحافظ الوسم على معناه.
• كتابة <b><strong> معًا. واحد يكفي.
• تحميل خط ويب دون ملفه العريض، مما يعطي خطًا عريضًا مزيفًا وضبابيًا.
• استخدام الوسم القديم <font> أو التنسيق داخل السطر. انقل التنسيق إلى ملف CSS.

كل خطأ منها سهل الإصلاح بمجرد أن تراه. ولهذا يأتي الفحص السريع أولًا. وإذا أردت كل التفاصيل، فإن صفحة MDN عن العنصر strong تستحق القراءة.

أسئلة وأجوبة