H1 في صفحة المقالة - عنوان الموقع أم عنوان المقالة؟

https://stackoverflow.com/questions/268475

06-07-2019
|

سؤال

ضمن صفحة موجهة نحو المقالة (مثل منشور مدونة)، <h1> يُستخدم العنصر (عنوان المستوى 1) بشكل شائع لترميز إما:

عنوان المدونة (أيعنوان الموقع الذي غالبًا ما يكون كبيرًا في أعلى الصفحة، لا إلى <title> عنصر) أو
عنوان المقال

ما هو الاختيار الأفضل ولماذا؟

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

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

أشعر <h1> يجب أن يركز العنصر على عنوان المقالة، وليس عنوان الموقع أو أي محتوى آخر.لا يبدو أن هذا اتفاقية شعبية بأي حال من الأحوال.

أمثلة:

جويل سبولسكي الاستخدامات <h1> لعنوان المقالة، ومرساة لعنوان الموقع
جيف أتوود الاستخدامات لا <h1> على الاطلاق, <h2> لعنوان المقالة ومرساة لعنوان الموقع
37 إشارة SVN الاستخدامات <h1> لعنوان الموقع ومرساة لعنوان المقال

هذه ثلاثة أساليب مختلفة عبر ثلاثة مواقع حيث قد تتوقع اهتمامًا قويًا بالترميز الدلالي الصحيح.

أعتقد أن جويل على حق مع جيف في المرتبة الثانية.أنا مندهش تمامًا من اختيارات الترميز التي قام بها الأشخاص في 37Signals.

بالنسبة لي يبدو القرار بسيطًا جدًا:ما هو الأكثر أهمية بالنسبة للمستهلك لهذه المادة؟عنوان المقال.لذلك قم بلف عنوان المقالة في ملف <h1> عنصر.منتهي.

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

هو قرار مكان استخدام <h1> عنصر ثابت كما قلت؟أم أن هناك بعض الاعتبارات الشخصية التي يجب مراعاتها أيضًا؟

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

المحلول

هناك نصيحة ضمان الجودة W3C حول هذا الموضوع:

<h1> هو عنصر HTML ل عنوان المستوى الأول للوثيقة:

إذا كان المستند في الأساس قائمة بذاتها ، على سبيل المثال أشياء يمكن مشاهدتها و Do in Geneva ، المستوى الأعلى ربما يكون العنوان هو نفسه العنوان عنوان.

إذا كان جزءا من ملف جمع ، على سبيل المثال قسم عن الكلاب في مجموعة من الصفحات حول الحيوانات الأليفة ، ثم عنوان المستوى الأعلى يجب أن تفترض قدرا معينا من سياق;اكتب فقط <h1>Dogs</h1> بينما يجب أن يعمل العنوان في أي سياق:الكلاب - دليلك للحيوانات الأليفة.

نصائح أخرى

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

في الصفحة الرئيسية لمدونتك، سأستخدم H1 للإشارة إلى عنوان الموقع وH2 لعناوين منشورات المدونة الفردية التي يتم نشرها على الصفحة الأولى.

عند إدخال مقالة معينة، سأستخدم H1 لعنوان المقالة ومرساة لعنوان الموقع.

يعد هذا إعدادًا لطيفًا ودلاليًا وسيحظى بتقدير Google أيضًا عندما يقوم بالزحف إلى موقعك.

في ويكيبيديا، تحتوي علامة h1 على اسم المقالة والعناوين الموجودة في المستند والتي تبدأ بـ h2.يعد اسم Wikipedia جزءًا من علامة العنوان في رأس html.وأعتقد أيضا أن هذا هو الطريق للذهاب.لذا بالنسبة للمدونات، أود أن أفعل مثل جويل سبولسكي في الأمثلة التي قدمتها.

وسأبدأ دائمًا بأعلى مستوى، لذا فإن ترك h1 يعد في رأيي خيارًا سيئًا.

ال <head> يحتوي جزء من صفحة HTML على عنصر يسمى <title>.كما يوحي الاسم، هذا هو عنوان الموقع.

يتم استخدام HTML لبناء الصفحة في نموذج قابل للتحليل آليًا، وليس للتخطيط.إذا كان الأمر يتعلق فقط بالتخطيط، فيمكنك استخدامه فقط <div> و <span> كتل ذات فئات/معرفات مختلفة وتطبيق CSS عليها.بدلاً من

<h2>Sub Header</h2>

يمكن أن أستخدم

<div class="header2>Sub Header</div>

وفي مكان ما يوجد بعض أكواد CSS التي ستفعل ذلك <div> تبدو مثل h2 (حجم الخط، الخط الغامق، وما إلى ذلك).الفرق هو أن الكمبيوتر لا يمكنه معرفة ذلك <div> هو في الواقع رأس المستوى الثاني في المثال الأول (كيف يجب أن يعرف ذلك؟قد أسميه بشكل مختلف عن "header2")، ولكن في الحالة الأولى، فإنه يعرف أنه رأس من المستوى الثاني من خلال حقيقة أنه <h2> العنصر وإذا أراد أن يُظهر للمستخدم قائمة منظمة بالعناوين الرئيسية للصفحة، فيمكنه القيام بذلك

رأس المستوى الأعلى
- رأس فرعي
  - رأس فرعي فرعي
- رأس فرعي
- رأس فرعي
رأس المستوى الأعلى
- رأس فرعي
  - رأس فرعي فرعي
  - رأس فرعي فرعي
- رأس فرعي
  :

من خلال البحث عن H1/H2/H3/...العناصر وهيكلتها على النحو الوارد أعلاه.لذا، إذا حاول الكمبيوتر العثور على عنوان صفحة ما، فأين سيبحث عنه؟في عنصر اسمه <title> أو في عنصر اسمه <h1>؟فكر في ذلك للحظة وستحصل على إجابتك.

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

<html>
<head>
<title>SOME TITLE</title>
</head>
:
<body>
<div id="title">SOME TITLE</div>
:
</body>
</html>

استخدم CSS للأسلوب #title بالطريقة التي تريدها.اجعلها كبيرة جدًا وجريئة للغاية وتمتع بلون يلفت الأنظار إذا أردت، فلا شيء يعارضها.عادةً ما يتجاهل المحللون التلقائيون للصفحة div وspan إلى حد ما، لأنه لا يخبرهم بأي شيء (هذه عناصر تُستخدم لتخطيط الصفحة للقارئ، لكنها لا تذكر شيئًا عن بنية الصفحة. التخطيط ليس هيكلًا, ، يمكنك فقط تطبيق النمط على عناصر هيكلية معينة لإنشاء تخطيط، ولكن لا ينبغي الخلط بين أحدهما والآخر).لا يزال الكمبيوتر يعرف عنوان الصفحة، فهو يعرفه بفضل عنصر العنوان.

بالنسبة لموقع ويب نموذجي، على سبيل المثال.مدونة، h1 يجب أن يحتوي على عنوان الموقع.نعم على كل صفحة الموقع.

لماذا؟يوجد في موقع الويب أجزاء مختلفة تتم مشاركتها لجميع صفحات الويب الخاصة به.لنأخذ الملاحة كمثال:

<ul id="site-navigation">
  <li><a href="/">Home</a></li>
  <li><a href="/about">About me</a></li>
  <li><a href="/contact">Contact</a></li>
</ul>

هذا #site-navigation يتكرر في كل صفحة من الموقع.إنه يمثل التنقل في الموقع، وليس التنقل في الصفحة.الفرق مهم!{يمكن أن يكون التنقل في الصفحة عبارة عن جدول محتويات (كما هو الحال في مقالة ويكيبيديا) أو ترقيم صفحات لمقالة طويلة.}

إذا كنت تستخدم عنوان المقالة كـ h1, ، سيكون التنقل في الموقع ضمن نطاق هذا العنوان.

<body>
  <div>John’s blog</div> <!-- the site title -->
  <h1>My first blog post</h1> <!-- the article title -->
  <p>…</p>
  <h2>Navigation</h2>
  <ul id="site-navigation">…</ul> <!-- the site-wide navigation -->
</body>

لذلك ينقل هذا الترميز:التنقل (← بدأ بواسطة h2) جزء من المقالة (← بدأ بواسطة h1).ولكن هذا غير صحيح، هذا التصفح ليس هو التصفح للمقال.الروابط هي في الواقع جزء من الموقع بأكمله، ويتم تمثيل الموقع بواسطة عنوان الموقع.

وتصبح المشكلة أكثر وضوحًا عندما تحتوي المقالة على عناوين فرعية أيضًا:

<body>
  <div>John’s blog</div> <!-- the site title -->
  <h1>My first blog post</h1> <!-- the article title -->
  <p>…</p>
  <h2>Why I’m blogging</h2>
  <p>…</p>
  <h2>Why you should read my blog</h2>
  <p>…</p>
  <h2>Navigation</h2>
  <ul id="site-navigation">…</ul> <!-- the site-wide navigation -->
</body>

كما ترون، لا توجد طريقة للتمييز بين العناوين الفرعية للمقال وبين التنقل.يبدو أن المقالة تحتوي على ثلاثة عناوين فرعية:"لماذا أقوم بالتدوين" و"لماذا يجب عليك قراءة مدونتي" و"التنقل".

لذلك إذا استخدمنا بدلاً من ذلك h1 لعنوان الموقع و h2 بالنسبة لعنوان المقالة، يمكن أن يكون التنقل في نطاق عنوان الموقع، باستخدام h2, ، أيضاً:

<body>
  <h1>John’s blog</h1> <!-- the site title -->
  <h2>My first blog post</h2> <!-- the article title -->
  <p>…</p>
  <h2>Navigation</h2>
  <ul id="site-navigation">…</ul> <!-- the site-wide navigation -->
</body>

الآن ينقل هذا الترميز:هناك موقع بعنوان "مدونة جون" (← بدأ بواسطة h1) وفيه مقال (← بدأ بالأول h2) والتنقل في الموقع (← بدأ بالثانية h2).العناوين الفرعية للمقالة ستكون h3 الآن، بالطبع.

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

يقوم HTML5 بإضفاء الطابع الرسمي على هذا باستخدام خوارزمية التقسيم/المخطط التفصيلي.إنه يحل العديد من المشكلات التي قد تواجهك مع HTML 4.01، لأن ترتيب المحتوى يمكن أن يكون (في الغالب) مجانيًا الآن ولا يتعين عليك "اختراع" عناوين فعلية إذا كنت لا ترغب في ذلك، وذلك بفضل section/article/nav/aside.ولكن أيضًا في HTML5، يجب أن يكون عنوان الموقع هو h1 هذا هو طفل body ولكن ليس طفلاً لأي عنصر/جذر تقسيم.تقع جميع الأقسام الأخرى في نطاق عنوان الموقع هذا.

H1 في صفحة المقالة - عنوان الموقع أم عنوان المقالة؟

كلاهما.هذه المقالة مفيدة: الحقيقة حول علامات H1 المتعددة في عصر HTML5.

يجب أن يكون هناك واحد فقط، ويجب أن يكون هناك واحد فقط

h1

;عادة هذا هو عنوان الصفحة.ثم يجب أن يتبع h2، h3 وما إلى ذلك.

حتى تبدو صفحتك بهذا الشكل (بدون جميع علامات html الأخرى)

h1
  h2
  h2
    h3
..etc

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow