آیا لازم است منوی ناوبری در قالب تگ لیست تعریف شود؟

اگر یک توسعه‌دهنده وب و یا شخصی آشنا با مفاهیم HTML باشید حتما اطلاع دارید که وقتی پای منوی ناوبری بالای سایت به میان می‌آید، اغلب اوقات از تگ‌های مربوط به لیست برای ساختاربندی آیتم‌های منو استفاده می‌کنیم. تا به حال به این موضوع فکر کرده‌اید که دلیل این امر پذیرفته شده چیست و آیا راه بهتری برای ایجاد Navigationها وجود دارد یا نه؟
با ما همراه باشید تا با یکدیگر نگاهی داشته باشیم این مساله.

هنگام مواجهه با منوی Navigation، اغلب توسعه‌دهندگان از کدی مشابه تکه کد زیر استفاده می‌کنند :


کد:
<nav>
    <ul>
        <li><a href="#">خانه</a></li>
        <li><a href="#">محصولات</a></li>
        <li><a href="#">خدمات</a></li>
        <li><a href="#">درباره ما</a></li>
        <li><a href="#">تماس با ما</a></li>
    </ul>
</nav>
البته کسانی که عادت به HTML 4 دارند، تگ nav را از قلم انداخته و بجای آن احتمالا از چیزی شبیه به <ul id="nav"> استفاده خواهند کرد.

و اما سوال : آیا المنت لیست ضروریست؟
مشخصا اگر این آیتم‌ها بصورت لینک‌های ساده ارائه شوند کد ما کوچک‌تر و تمیزتر خواهد بود.

کد:
<nav>
        <a href="#">خانه</a>
        <a href="#">محصولات</a>
    <a href="#">خدمات</a>
    <a href="#">درباره ما</a>
    <a href="#">تماس با ما</a>
    
</nav>
تا پیش از ارائه HTML 5 استفاده از لیست ضروری بود چرا که :
مرورگرهای قدیمی در استایل دهی به المنت‌های inline با مشکل مواجه بودند
لینک‌های مجاور هم ممکن بود در دستگاه‌های اسکرین ریدر با مشکل دسترس‌پذیری مواجه شوند
و در نهایت در هر حال بایستی منوی ناوبری در چیزی قرار می‌گرفت و لیست گزینه بسیار مناسبی محسوب می‌شد
این مساله با ارائه تگ <nav> در HTML5 تقریبا از میان رفت. بنابراین تگ‌های زائد لیست در این مورد غیرضروری هستند چراکه مروگرها و اسکرین ریدرها اکنون می‌توانند از طریق تک nav به وجود بخش ناوبری پی برده و لینک‌های آن را با توجه به این موضوع ساختاردهی کنند.

با این وجود هنوز هم دلایلی برای نگه‌داشتن لیست‌ها وجود دارد :
از این طریق امکان تعریف لیست‌های سلسله مراتبی و زیرمنوها محیا می‌شود. دلیل خاصی برای استفاده نکردن از المنت‌های دیگر وجود ندارد ولی در این مورد مزایایی نیز وجود دارد؛ برای نمونه :


کد:
<nav>
    <h1>Main Menu</h1>
    <a href="#">Home</a>
    <a href="#">Products</a>
    <section>
        <h2>Product Menu</h2>
        <a href="#">Product One</a>
        <a href="#">Product Two</a>
    </section>
    <a href="#">Services</a>
</nav>
لیست‌ها المنت‌های اضافی برای استایل‌دهی و هدف قرار دادن بوسیله CSS فراهم می‌کنند.
لیست‌ها در این مورد به تکنیک و روشی جا افتاده و قابل انتظار برای اغلب وب دولوپرها تبدیل شده‌اند
همانطور که همه می‌دانیم منوهای ناوبری به بخشی قطعی و مهم در صفحات وب تبدیل شده‌اند. برخی ممکن است در این فکر باشند که Navigation بدون لیست اشتباه به نظر می‌رسد؛ اما آیا در حقیقت اینگونه است؟ شاید بتوان گفت تعیین صحیح یا اشتباه بودن بکارگیری این روش بستگی به شرایط دارد اما شخصا فکر می‌کنم در اغلب مواقع لیست‌ها غیرضروری و اضافی هستند.

نظر شما چیست؟ آیا شما هم در پروژه‌های بعدی خود از منوهای ناوبری بدون لیست استفاده خواهید کرد؟ و یا به سنت پایبند بوده و قصد ساختارشکنی ندارید؟

منبع : Should Navigation Be Defined in Lists? - SitePoint