العناوين الرئيسية شائعة في معظم صفحات الويب. في الواقع ، يميل أي نص إلى حد كبير إلى أن يحتوي على عنوان واحد على الأقل حتى تعرف عنوان ما تقرأه. يتم ترميز هذه العناوين باستخدام عناصر عنوان HTML - h1 و h2 و h3 و h4 و h5 و h6.
في بعض المواقع ، قد تجد أن العناوين يتم ترميزها دون استخدام هذه العناصر. بدلاً من ذلك ، قد تستخدم العناوين عناوين تحتوي على سمات معينة لفئة معينة ، أو أقسام بها عناصر فئة. السبب الذي غالبا ما أسمع عن هذه الممارسة غير الصحيحة هو أن المصمم "لا يحب الطريقة التي تبدو بها العناوين". بشكل افتراضي ، يتم عرض العناوين بالخط العريض وتكون أكبر في الحجم ، خاصةً عناصر h1 و h2 التي يتم عرضها بحجم خط أكبر بكثير من باقي نص الصفحة. ضع في اعتبارك أن هذا هو المظهر الافتراضي لهذه العناصر فقط! باستخدام CSS ، يمكنك جعل العنوان يبدو كما تريد! يمكنك تغيير حجم الخط وإزالة الخط العريض ، وأكثر من ذلك بكثير. العناوين هي الطريقة الصحيحة لترميز عناوين الصفحة. فيما يلي بعض الأسباب.
لماذا استخدام العلامات الرأسية بدلا من DIVs والتصميم
محركات البحث مثل العناوين
هذا هو أفضل سبب لاستخدام العناوين ، واستخدامها بالترتيب الصحيح (مثل h1 ، ثم h2 ، ثم h3 ، إلخ.). تعطي محركات البحث أعلى ترجيح للنص المضمن داخل علامات العنوان لأن هناك قيمة دلالية لهذا النص. بمعنى آخر ، عن طريق وضع علامة على عنوان الصفحة H1 ، فأنت تخبر عنكبوت محرك البحث بأن هذا هو التركيز رقم 1 في الصفحة. عناوين H2 ديك تركيز # 2 ، وهلم جرا.
ليس عليك أن تتذكر ما هي الطبقات التي استخدمتها لتحديد العناوين الخاصة بك
عندما تعرف أن جميع صفحات الويب الخاصة بك سيكون لها H1 بخط غامق ، و 2 em ، وأصفر ، عندئذ يمكنك تعريف ذلك مرة واحدة في ورقة الأنماط الخاصة بك والقيام بها. بعد 6 أشهر ، عندما تضيف صفحة أخرى ، فإنك تضيف علامة H1 إلى أعلى صفحتك ، ولا يجب عليك الرجوع إلى الصفحات الأخرى لمعرفة معرف النمط أو الصف الذي استخدمته لتعريف العنوان الرئيسي العنوان والرؤوس الفرعية.
أنها توفر مخطط صفحة قوية
تجعل المخططات النص أسهل في القراءة. لهذا السبب علّمت معظم المدارس الأمريكية الطلاب كتابة مخطط قبل كتابة المقالة. عند استخدام علامات العنوان في تنسيق المخطط التفصيلي ، يحتوي النص الخاص بك على بنية واضحة يصبح الظاهري بسرعة كبيرة. بالإضافة إلى ذلك ، هناك أدوات يمكنها مراجعة مخطط الصفحة لتقديم ملخص ، وهي تعتمد على علامات العنوان الخاصة بالبنية المخطط التفصيلي.
صفحتك ستشعر بالاعتدال حتى مع إيقاف الأنماط
لا يمكن لأي شخص عرض أو استخدام أوراق الأنماط (وهذا يعود إلى # 1 - محركات البحث عرض المحتوى (النص) لصفحتك ، وليس أوراق الأنماط). إذا كنت تستخدم علامات العنوان ، فإنك تجعل الوصول إلى صفحاتك أكثر سهولة لأن العناوين الرئيسية توفر معلومات لا تريدها علامة DIV.
ومن المفيد للقارئ الشاشة وسهولة الوصول إلى الموقع
يؤدي الاستخدام الصحيح للرؤوس إلى إنشاء بنية منطقية للمستند. هذا ما سيستخدمه قارئو الشاشة في "قراءة" أحد المواقع لمستخدم لديه ضعف في الرؤية ، مما يجعل موقعك متاحًا للأشخاص ذوي الإعاقة.
نمط النص والخط من العناوين الخاصة بك
إن أسهل طريقة للابتعاد عن مشكلة "العلامات الكبيرة والجريئة والقبيحة" الخاصة ببطاقات العنوان هي تصميم النص بالطريقة التي تريدها أن تبدو عليها. في الواقع ، عند العمل على موقع ويب جديد ، من الأفضل أن تقوم بكتابة أنماط الفقرة و h1 و h2 و h3 أولاً. العصا مع عائلة الخط وحجم / الوزن فقط. على سبيل المثال ، قد تكون هذه ورقة أنماط أولية لموقع جديد (هذه ليست سوى بعض نماذج النماذج التي يمكن استخدامها):
يمكنك تعديل خطوط العنوان أو تغيير نمط النص أو حتى لون النص. كل هذا سيحول عنوانك "القبيح" إلى شيء أكثر حيوية وتماشيا مع التصميم الخاص بك.
حدود يمكن أن تلبيس العناوين
تُعد الحدود طريقة رائعة لتحسين العناوين الرئيسية ويسهل إضافتها. ولكن لا تنس تجربة الحدود - لا تحتاج إلى حدود على كل جانب من العناوين الرئيسية. ويمكنك استخدام أكثر من مجرد حدود مملة.
لقد أضفت حدًا أعلى وأسفل لعنوان العينة الخاص بي لتقديم بعض الأنماط المرئية المثيرة للاهتمام. يمكنك إضافة حدود بأي طريقة تريد تحقيق نمط التصميم الذي تريده.
إضافة صور الخلفية إلى العناوين الخاصة بك لمزيد من بزاز
تحتوي العديد من مواقع الويب على قسم رأس في أعلى الصفحة يتضمن عنوانًا - عادةً عنوان الموقع ورسم. معظم المصممين يفكرون في هذا كعنصران منفصلان ، لكن ليس عليك ذلك. إذا كان الرسم موجودًا فقط لتزيين العنوان ، فلماذا لا تضيفه إلى أنماط العناوين؟
تكمن الحيلة في هذا العنوان في أنني أعرف أن طول الصورة 90 بكسل. لذلك أضفت ملء المساحة إلى أسفل عنوان 90px (الحشو: 0.5 0 90px 0P؛). يمكنك اللعب باستخدام الهوامش وارتفاع الخط والحشو للحصول على نص العنوان للعرض تمامًا في المكان الذي تريده.
شيء واحد يجب تذكره عند استخدام الصور هو أنه إذا كان لديك موقع ويب سريع الاستجابة (والذي يجب عليك) به تخطيط يتغير بناءً على أحجام الشاشة والأجهزة ، فلن يكون العنوان دائمًا بنفس الحجم. إذا كنت تريد أن يكون العنوان هو الحجم الدقيق ، فقد يتسبب ذلك في حدوث مشكلات. إنه أحد الأسباب التي تجعلني أتجنب عمومًا الصور الخلفية في العنوان الرئيسي ، حيث أنها تبدو رائعة في بعض الأحيان.
استبدال الصورة في العناوين
هذا هو أسلوب شائع آخر لمصممي الويب لأنه يسمح لك بإنشاء عنوان رسومي واستبدال نص علامة العنوان بتلك الصورة.هذا هو حقا ممارسة عتيقة من مصممي الويب ، الذين تمكنوا من الوصول إلى عدد قليل جدا من الخطوط وأرادوا استخدام خطوط أكثر غرابة في عملهم. لقد أدى ارتفاع خطوط الويب إلى تغيير طريقة اقتراب المصممين من المواقع. يمكن الآن تعيين العناوين في مجموعة متنوعة من الخطوط والصور التي لم تعد هناك حاجة لهذه الخطوط المضمنة. على هذا النحو ، لن تجد سوى استبدال صور CSS لعناوين المواقع على المواقع القديمة التي لم يتم تحديثها بعد إلى ممارسات حديثة.
حرره جيريمي جيرارد في 9/6/17
