HTML وCSS / الأساسيات / الدرس 2
دلالات النص والروابط والتنقل
ابن بنية وتنقلا يفهمان من العناوين وأسماء الروابط والتفاعل الأصلي.
في هذه الصفحة
أهداف الدرس
- اختيار العناصر بحسب الغرض
- روابط حقيقية للوجهات
- مراجعة الأسماء وترتيب القراءة
اختيار العناصر بحسب الغرض
يقدم العنوان قسما وتعبر الفقرة عن فكرة وتجمع القائمة عناصر مرتبطة. اختر بحسب الغرض لا حجم الخط الافتراضي. تشير strong إلى الأهمية وem إلى التشديد، ولا تعوضان التنسيق البصري. استخدم CSS للمظهر وحده، وتفيد div وspan عندما لا يوجد معنى أخص. وقد تربك المبالغة في العلامات؛ فلا يستحق كل صندوق مقالا أو منطقة مسماة. اشرح دور المحتوى أولا ثم اختر العنصر.
توضيح علاقات العناوين
استخدم مراتب واضحة مثل h1 للصفحة وh2 للأقسام وh3 للفروع. لا تختر h4 لأن مظهره يناسب بطاقة. لا تعتمد على عناصر التقسيم لإصلاح مراتب العناوين تلقائيا لدى التقنيات المساعدة؛ اخترها صراحة. قد يتنقل قارئ الشاشة بالعناوين، فتقدم بنية متماسكة خريطة مفيدة. تربك العناوين الفارغة والزخرفية الخريطة. ويمكن تنسيق عنوانين بالحجم نفسه مع بقاء مرتبتيهما مختلفتين دلاليا.
روابط حقيقية للوجهات
يمثل الرابط ذو href انتقالا. يجب أن يحدد نصه الوجهة أو الغرض؛ فعبارة «انقر هنا» المتكررة تصعب المسح. تشير الروابط الجزئية إلى id فريد في المستند. توفر الروابط الأصلية تفعيل لوحة المفاتيح وقائمة السياق وسلوك المتصفح دون معالجات مخصصة. أما الزر فينفذ فعلا مثل فتح حوار أو إرسال نموذج. لا يغير مظهر الزر للرابط غرضه. يربط المثال قائمة تنقل بقسمين فعليين في ملف محلي.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Local navigation</title>
</head>
<body>
<nav aria-label="On this page"><ul><li><a href="#schedule">Schedule</a></li><li><a href="#access">Access</a></li></ul></nav>
<main><h1>Workshop</h1><section id="schedule"><h2>Schedule</h2><p>Two morning sessions.</p></section><section id="access"><h2>Access</h2><p>A step-free entrance is available.</p></section></main>
</body>
</html>
Two named links navigate to matching document sections.توجد الوجهتان ولكل قسم عنوان صريح، وتوضح تسمية التنقل غرض القائمة. النتيجة المتوقعة: ينتقل رابطان مسميان إلى قسميهما.
طريق لتجاوز التكرار
يتيح رابط التجاوز الانتقال بلوحة المفاتيح بعد التنقل المتكرر إلى المحتوى. ضعه مبكرا وامنحه تركيزا مرئيا. يتركه المثال ظاهرا دائما، وهو خيار بسيط يتجنب إخفاء التركيز خطأ. يفيد تسمية nav عند تعدد مناطق التنقل، وقد لا تحتاج منطقة واحدة اسما إضافيا. يحدد main المحتوى الرئيسي وتتأثر دلالة header وfooter بالسياق. تكمل المعالم العناوين ولا تلغي الحاجة لترتيب المصدر وأسماء الروابط المفهومة.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Skip navigation</title>
<style>
a:focus-visible { outline: 3px solid #164e9a; outline-offset: 3px; }
</style>
</head>
<body>
<a href="#content">Skip to main content</a>
<nav aria-label="Site"><a href="#about">About</a></nav>
<main id="content"><h1>Course information</h1><section id="about"><h2>About this course</h2><p>Use a keyboard to follow the skip link.</p></section></main>
</body>
</html>
The skip link precedes navigation and has a visible focus indicator.يقدم أول عنصر قابل للتركيز طريقا إلى الرئيسي، ويضيف الإطار تركيزا مرئيا دون تغيير دلالة الرابط. النتيجة المتوقعة: يسبق رابط التجاوز التنقل وله مؤشر تركيز واضح.
مراجعة الأسماء وترتيب القراءة
اقرأ الصفحة دون تنسيق واسرد عناوينها وروابطها. هل يستطيع قارئ جديد فهم الموضوع والتسلسل وتوقع الوجهة؟ اختبر Tab وShift+Tab ومسار التركيز وظهوره. لا تصلح ترتيبا بصريا بقيم tabindex موجبة؛ فهي تنشئ ترتيبا منفصلا يصعب صيانته. تحتاج الروابط تمييزا يتجاوز اللون عندما يصعب اكتشافها وسط النص. احتفظ بتسطير أو علامة واضحة، واختبر التركيز منفصلا عن تحويم المؤشر.
الأخطاء الشائعة وإصلاحها
يغيب عنوان كبير عن التنقل بالعناوين
- لماذا يحدث؟
- استُخدمت div منسقة لعنوان حقيقي.
- كيف تصلحه؟
- استخدم عنوانا بالمرتبة المناسبة ونسقه.
- كيف تتجنب تكراره؟
- راجع الدلالات قبل تحسين الخط.
للروابط أسماء لا تميزها
- لماذا يحدث؟
- لا يقول نصها سوى «المزيد».
- كيف تصلحه؟
- صف كل وجهة في سياق الرابط.
- كيف تتجنب تكراره؟
- راجع قائمة الأسماء منفصلة.
يخالف ترتيب المفاتيح المحتوى
- لماذا يحدث؟
- أنشأ tabindex الموجب أو الترتيب البصري تسلسلات متنافسة.
- كيف تصلحه؟
- استعد ترتيب المصدر والتنقل العادي.
- كيف تتجنب تكراره؟
- اختبر القراءة والمفاتيح معا.
اختبر فهمك
1. اختر رابطا أو زرا لـ«عرض الإيصال» و«توسيع تفاصيله».
اعرض الحل المشروح
استخدم رابطا إذا كان العرض انتقالا لوجهة، وزرا أو إفصاحا أصليا إذا كان توسيعا في الموضع. لا تكفي العبارة للحكم؛ حدد نتيجة التفاعل ثم احفظ سلوك المتصفح المناسب.
2. أصلح صفحة تستخدم h1 لكل بطاقة لأن عناوينها كبيرة.
اعرض الحل المشروح
حدد عنوان الصفحة وتداخل مجموعات البطاقات. استخدم h2 أو h3 بحسب العلاقة ثم طبّق صنفا مشتركا للحجم البصري. تبقى خريطة التنقل مفهومة دون التضحية بالتصميم.
أهم ما تعلمته
- تحمل العناصر الأصلية معنى وتفاعلا مفيدين.
- تصف مرتبة العنوان البنية لا الحجم.
- يجب أن يدعم ترتيب المصدر القراءة والمفاتيح.