برأيكم ما هي البنية الأفضل لروابط التصفح Navigation؟
عادة يتم تمثيلها على النحو التالي:
<nav>
<ul>
<li><a href="link1.html">Link 1</a></li>
<li><a href="link2.html">Link 2</a></li>
...
</ul>
</nav>
السؤال: أليس كافياً صياغتها على النحو التالي:
<nav>
<a href="link1.html">Link 1</a>
<a href="link2.html">Link 2</a>
...
</nav>
التعليقات
أعرض الصفحة بدون CSS، في الحالة الأولى سيكون كل رابط في نقطة خاصة به، في الحالة الثانية كل الروابط ستكون في سطر واحد ودون مسافات بينها، شخصياً عندما أصمم فأنا أضع في الاعتبار أن هناك من سيتصفح التصميم بأجهزة لا أتوقعها، مثل الهواتف والحواسيب القديمة، أجهزة تساعد المكفوفين على التصفح، شخص يصمم ملف CSS خاص به، شخص يستخدم متصفحاً دون دعم CSS.
هؤلاء يفترض بهم أن يروا الموقع مرتباً بشكل منطقي حتى بدون CSS، لذلك الوسيلة الأولى أفضل في رأيي.
افضل الاول : الروابط تعرض افتراضيا بـ inline و عنصر القائمة بـ block وهذا جيد لمناسبته قوائم التصفح .. وايضا من فائدة العرض بـ block وعنصريحتوى الرابط اقصد الـ li امكانية التوسع بقوائم فرعية مع الحفاظ على الهيكل السابق بدون تغييرات
هناك اختلاف كبير بينهم في المعنى وليس في الناتج !!!
اقصد بأن وسم ( nav ) يصنف كـ ( section )
………… وسم ( ul ) يصنف كـ ( grouping ) في لائحة عناصر html
يستخدم ul في جمع عناصر في قائمه ليس لها قيمه ( عند كتابة مقال وتضع قائمه فيه وقائمة روابط ) فهو وسم لتنسيق مستند .
تأثير nav يكمن في الخلفية عندما يقرأ المتصفح او اجهزة screenreaders فبهذا الوسم راح تتعرف بأن هذا الجزء يحتوي على روابط مهمة لتنقل بين المستند او العمل فلهذا يستخدم في قائمة الروابط الرئيسة للموقع وكذلك nav pagination
و Breadcrumbs
هنا مقال يفصل لك ماهو عمل nav tags
الوسم nav من وسوم HTML5 وهو الأفضل لكنها مدعومة في ie 9 فما فوق. كما تفضل الأخوة المظهر غير مهم حيث يمكن إصلاحه بواسطة CSS. ربما يفيدك هذا html5shiv.js في دعم المتصفحات القديمة.