أفضل طريقة لتحديد العنوان

الطريقة الأولى: هل هذا منطقي؟

<span class="heading">عنوان المقالة</span>

على الرغم من أن <span> يمكن أن يكون علامة مناسبة في بعض المواقف، إلا أنه لا ينقل المعنى الكامل للعنوان. إحدى ميزات استخدام هذه الطريقة هي أنه يمكننا إرفاق قاعدة CSS بها وتعيين فئة عنوان لها لجعل نصها يظهر كعنوان.

العنوان {
حجم الخط: 24 بكسل؛
وزن الخط: غامق؛
اللون: أزرق؛
}

حسنًا، تم الآن تمييز جميع العناوين بفئة العنوان بخط كبير غامق وباللون الأزرق. رائع! ولكن هل هذا هو الشيء الصحيح الذي ينبغي عمله؟ ماذا يحدث إذا شاهده شخص ما باستخدام متصفح لا يدعم CSS؟

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

على الرغم من أن الفئة = "heading" تضيف القليل من المعنى إلى العلامة، إلا أن <span> لا تزال مجرد علامة عادية يمكن تعديلها عن طريق التصميم الافتراضي لمعظم المتصفحات.

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

أخيرًا، بما أن العلامة <span> هي عنصر مضمن، فقد نحتاج إلى دمجها ضمن عنصر إضافي على مستوى الكتلة، مثل علامة <p> أو علامة <div>، لجعلها تشكل سطرًا منفصلاً ، الأمر الذي سيؤدي إلى زيادة الفوضى في علاماتك باستخدام تعليمات برمجية غير ضرورية. تعد هذه العلامات الإضافية ضرورية حتى تتمكن المتصفحات التي لا تدعم CSS من عرض نفس النص.

الطريقة الثانية: الجمع بين <p> و<b>

<p><b>عنوان المقالة</b></p>

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

على عكس الطريقة أ، يمكن للعلامة <b> أن تجعل النص غامقًا في المتصفحات المرئية، حتى المتصفحات التي لا تدعم CSS. ولكن مثل العلامة <span>، لن تعطي محركات البحث أولوية أعلى لمجرد وجود شيء ما بالخط العريض في الفقرة.

من الصعب الاسلوب

إن استخدام التركيبة العادية من <p> و<b> يجلب أيضًا عيبًا آخر - فمن المستحيل تصميم هذا العنوان ليكون مختلفًا عن الفقرات الأخرى. قد نرغب في استخدام نمط خاص لإبراز العنوان لجعل محتوى الصفحة أكثر وضوحًا وتنظيمًا، لكن هذه الطريقة لا يمكنها إلا أن تجعله يبدو غامقًا.

الطريقة الثالثة: الأسلوب بالإضافة إلى الجوهر

<h1>عنوان المقالة</h1>

حسنًا، يا له من تعريف رائع للعنوان. معظم مصممي الويب على دراية بها. في الواقع، عند استخدامه بشكل مناسب، يمكن أن يوفر <Hn> بنية مرنة وقابلة للفهرسة وقابلة للتصميم لمحتوى الصفحة.

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

يمثل <h1> إلى <h6> ستة مستويات من العناوين، من الأكثر أهمية (<h1>) إلى الأقل أهمية (<h6>). إنها على مستوى الكتلة نفسها ولا تتطلب إضافة عناصر أخرى لصفها بشكل فردي. بسيطة وفعالة – ​​مجرد أداة عظيمة.

تخصيص الأنماط بسهولة

نظرًا لأننا نستخدم العلامة <h1> بشكل فريد، ولأن العلامة <b> أو <p> أكثر ملاءمة للاستخدام في جميع أنحاء الصفحة، فيمكننا استخدام مجموعة متنوعة من أساليب CSS لتصميمها.

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

ستعرف برامج قراءة الشاشة، وأجهزة المساعد الرقمي الشخصي، والهواتف المحمولة، والمتصفحات المرئية وغير المرئية ما يجب فعله عندما تواجه علامة عنوان، وتتعامل معها بشكل صحيح، وتتعامل معها بجدية أكبر من النص العادي الموجود على الصفحة. باستخدام العلامة <span>، لن تتعامل معها المتصفحات التي لا تدعم CSS بشكل خاص.

الأنماط الافتراضية المزعجة

في الماضي، ربما كان المصممون يتجنبون استخدام علامات العنوان تمامًا لأن الإعدادات الافتراضية للمتصفح كانت قبيحة للغاية. أو تجنب استخدام <h1> أو <h2> نظرًا لأحجامها الافتراضية الضخمة، وبدلاً من ذلك استخدم علامات العناوين ذات الأرقام الأعلى لتحقيق أحجام أصغر.

ومع ذلك، من المهم التأكيد على أنه يمكننا بسهولة تغيير علامات العنوان هذه باستخدام CSS - على سبيل المثال، لا يجب أن تكون < ;h1> علامة عملاقة تشغل نصف الشاشة. لاحقًا، سأوضح مدى سهولة تصميم علامات العناوين باستخدام CSS، آملًا أن أخفف من بعض مخاوفك الساحقة.

محرك البحث ودية

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

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

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

حول ترتيب العناوين

في المثال، هذا العنوان تحديدًا هو الأكثر أهمية في الصفحة لأنه عنوان المستند. ولذلك، نستخدم علامة العنوان الأكثر أهمية، <h1>. باتباع مواصفات W3C، يعتقد بعض الأشخاص أن تخطي عدة مستويات للعناوين يعد ممارسة سيئة. على سبيل المثال، تخيل أننا في الصفحة التالية:

<h1>عنوان المقالة</h1>

عنواننا التالي (إذا لم يتكرر مع <h1> آخر) سيكون <h2>، ثم <h3>، وما إلى ذلك. ربما لا ينبغي عليك تخطي مستوى واحد بعد <h1> والانتقال مباشرة إلى <h3>. أميل إلى الاتفاق مع وجهة النظر المذكورة أعلاه، والحفاظ على استمرارية المستويات على طول النص لإنشاء هيكل تخطيطي. بهذه الطريقة، يكون من الأسهل إضافة عناوين وأنماط إلى صفحة موجودة بالفعل، كما يمكنك تقليل الأخطاء الناتجة عن استخدام أرقام إضافية.

كما ذكرنا سابقًا، قد يستخدم المصممون <h4> لوضع علامة على العنوان الأكثر أهمية في الصفحة لمجرد أن حجم الخط الافتراضي ليس كبيرًا بشكل بغيض مثل <h1>. لكن تذكر، الهيكل أولاً، والتصميم لاحقًا. يمكننا دائمًا استخدام CSS لتصميم العناوين بأي حجم نص نريده.