أدوات المطورين · محرر HTML WYSIWYG
العناوين ليست نصًا غامقًا كبيرًا: ما أهمية مستويات العناوين في محتوى الويب
· لماذا يهم
أتش تي أم أل إمكانية الوصول تحرير النص
يشرح لماذا تشكل h1 إلى h6 مخططًا تفصيليًا للمستند يعتمد عليه مستخدمو قارئ الشاشة ومحركات البحث، وكيفية التحقق من أن العناوين المرئية هي عناوين حقيقية.
المقالة بدون عناوين — تفتح بصفحة يكون كل عنوان واضح فيها عبارة عن فقرة غامقة
يمكن أن يبدو السطر المكبر والغامق بـ CSS كعنوان قسم بينما يظل فقرة في شجرة المستندات. قد يستنتج القراء المبصرون التقسيم من الطباعة، لكن البرنامج لا يتلقى أي عنصر عنوان لتحديده أو جمعه أو التنقل فيه. المظهر وحده لا يخلق التسلسل الهرمي.
ToolAcre يتجنب عناصر التحكم في النمط ويوفر اختيارات كتلة صريحة من h1 إلى h4. وبالتالي يمكن للكاتب تشفير العنوان بدلاً من محاكاة عنوان بنص قوي. تقبل القائمة المسموح بها أيضًا h5 وh6 في المصدر، على الرغم من أن شريط الأدوات لا يعلن عن عناصر التحكم في هذه المستويات.
ما يفعله عنصر العنوان بخلاف الحجم - يشرح المخطط التفصيلي واختصارات التنقل والبنية التي يوفرها
يقوم عنصر العنوان بتسمية المحتوى الذي يتبع بنية المستند القابلة للتنقل ويساهم فيها. تعرض المتصفحات هذا الدور من خلال واجهات برمجة تطبيقات إمكانية الوصول، ويمكن للعديد من الأدوات المساعدة تقديم قائمة بالعناوين أو التنقل بينها. يظل العنصر قابلاً للتعريف عند غياب ورقة الأنماط أو استبدالها.
لا تقدم الفقرة الجريئة أيًا من تلك الإشارة الهيكلية. لا يزال من الممكن أن يكون نثرًا مفيدًا، لكن لا ينبغي أن يحل محل حدود القسم. اختبر المستند النهائي باستخدام مخطط تفصيلي أو أداة فحص إمكانية الوصول لأن المعاينة المحلية لا تُبلغ عن علاقات العناوين أو تتحقق من صحة مؤسسة المؤلف.
المستويات متداخلة وليست أحجامًا - توضح سبب إرباك القراء والأدوات عند التخطي من h2 إلى h4
تعبر المستويات عن التداخل، وليس قائمة بأحجام الكتابة. يقدم h2 عادةً قسمًا أسفل السياق الأساسي للصفحة؛ يقدم h3 قسمًا فرعيًا من h2. إن تحديد h4 لمجرد أن خطه الافتراضي يبدو صحيحًا يمكن أن يعني فقدان البنية المتوسطة.
ToolAcre سوف يحافظ على h1 حتى h6 ولا يرفض المستويات التي تم تخطيها. يفرض المرشح المفردات، وليس المنطق التحريري. أنشئ المخطط التفصيلي على الورق أو في المصدر، ثم استخدم CSS في الوجهة للتحكم في المظهر دون تغيير المستويات لمطاردة المقياس البصري المفضل.
اختر عنوان الصفحة في السياق؛ لا يفرض هذا المحرر قاعدة h1 واحدة
يصف المصنف h1 واحدًا، لكن التنفيذ لا يحتوي على مثل هذه القاعدة ولا تخترع هذه المقالة واحدة كقانون عالمي. تحدد قوالب الصفحة والأجزاء المضمنة واصطلاحات المستندات ما إذا كان المحتوى يجب أن يوفر عنوانه الأساسي أو يبدأ أسفل العنوان الذي يوفره المضيف.
افحص الوجهة الكاملة، وليس الجزء وحده. إذا كان CMS يعرض عنوان المقالة بالفعل كـ h1، فقد يبدأ محتوى النص الملصق بشكل معقول بـ h2. لا يمكن لـ ToolAcre رؤية هذا القالب الخارجي، لذا فإن خيار h1 الخاص به هو قدرة وليس توصية لكل مسودة.
مثال عملي: قارن فقرة غامقة بعنصر عنوان في المصدر
أنشئ `<p><strong>Installation</strong></p>` و`<h2>Configuration</h2>`. قد يبدو كلاهما بارزًا في وضع الحماية، إلا أن المصدر يكشف أن التكوين فقط هو العنوان. يجب أيضًا أن يحدد فحص شجرة إمكانية الوصول في الصفحة المنشورة h2 فقط كعنوان.
قم بتغيير التثبيت إلى المستوى الصحيح من خلال محدد الكتلة أو الوضع المصدر. ثم راجع ما إذا كان العنوانان هما الأقران أم الوالد والطفل. يحافظ المطهر على كلا الشكلين لكنه لا يستطيع تحديد العلاقة من كلماتهما. ينتمي هذا الحكم إلى مؤلف المستند وسياق الصفحة.
تصميم العناوين دون إساءة استخدام المستويات - يوضح أن CSS، وليس اختيار المستوى، هو الذي يجب أن يتحكم في المظهر
ينتمي مظهر العنوان إلى CSS. يمكن للموقع أن يجعل h2 متواضعًا وh3 مميزًا بصريًا مع الاحتفاظ بالمستويات المنطقية، بشرط أن يظل التصميم متصلاً بالتسلسل الهرمي. يعد تصميم h2 الصحيح أكثر أمانًا من استبدال h4 لمجرد الحصول على إعدادات افتراضية أصغر للمتصفح.
إن ورقة أنماط المعاينة بسيطة وخفيفة عن قصد. إنه ليس موضوع منتجك، لذا فإن أبعاد العنوان الافتراضية الخاصة به تعتبر دليلًا ضعيفًا على تصميم الوجهة. انسخ الجزء الدلالي، وقم بتطبيق الأنماط المعتمدة هناك، وراجع السلوك المستجيب دون إعادة كتابة المخطط التفصيلي لتلبية عرض واحد معزول.
ما لا يغطيه هذا — تقسيم العناصر مثل <section> و<article>، أو SEO خارج البنية
لا تغطي هذه المقالة عناصر القسم والمقالة، ARIA أدوار العناوين، أو إرشادات SEO الكاملة أو كل قارئ شاشة. كما أنه لا يدعي أن ToolAcre يتحقق من صحة المستويات التي تم تخطيها أو العناوين المكررة أو جودة نص العنوان. يوفر شريط الأدوات العناصر؛ يقدم المؤلفون بنية متماسكة.
لا يعد الإخراج المعقم منشورًا آمنًا وغير موثوق به تلقائيًا. يحد وضع الحماية للمعاينة من التنفيذ داخل ToolAcre، بينما يترك العلامات المنسوخة تلك الحماية. استخدم اختبارات الصرف الصحي وإمكانية الوصول من جانب الوجهة. تمثل شجرة العناوين الصحيحة أحد أبعاد الجودة، وليست مراقبة أمنية أو تدقيقًا كاملاً.
الوجبات الجاهزة: الهيكل أولاً، النمط ثانيًا - يلخص القاعدة وكيف يتيح لك محرر HTML WYSIWYG الخاص بـ ToolAcre تأكيد ما إذا كانت العلامة الموجودة خلف العنوان المرئي هي عنصر عنوان أم لا
البنية أولاً، والأسلوب ثانياً. حدد الموضوعات التي تمثل أقسامًا وأقسامًا فرعية، وقم بتعيين مستويات من تلك العلاقة، ثم افحص عناصر h الفعلية ToolAcre المنبعثة. يجب أن يظل العنوان ذو معنى عندما تختفي الخطوط والألوان والمسافات.
وأخيرًا، ضع الجزء داخل قالبه الحقيقي وراجع التسلسل الهرمي المدمج. لا يمكن للمحرر المحلي معرفة عنوان الصفحة الخارجية أو غلاف التنقل. وقيمتها هي الشفافية: حيث يوجد التنسيق المرئي والمصدر بجانب بعضهما البعض، مما يجعل اكتشاف العناوين المزيفة أسهل قبل النشر.