آموزش تگ nav در html

0 دیدگاه 494 آموزش html

آموزش تگ Nav در HTML5

فهرست موضوعات در این آموزش

تگ nav که از کلمه Navigation گرفته شده، تگی است که با استفاده از آن میتوان یک منوی ناوبری یا Navigation Menu که از تعدادی لینک تشکیل شده است را ایجاد نمود.

وقتی میگیم منوی ناوبری ، یعنی بطور کلی همون منوی اصلی سایت، منویی که در تمامی سایت های موجود در اینترنت دارید میبینید، پس بطور کلی تگ nav تگی است که با استفاده از آن میتوان قسمت منوی سایت رو ایجاد کرد.

تگ Nav در html چیست

تگ nav برگفته از کلمه Navigation تگی است که با کمک آن از آن میتوانید یک منوی ناوبری یا Navigation Menu که متشکل از تعدادی لینک است را ایجاد کنید. اما منوی ناوبری یعنی چه؟

ناوبری سایت یا همان Website Navigation یکی از فاکتور‌‌های مهم در روند طراحی سایت است. ناوبری سایت، مسیر حرکت بازدیدکنندگان و ربات های خزنده در صفحات سایت را مشخص می‌کند.

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

کار با تگ Nav در HTML5

عنصر nav ا از نوع تگ‌های بلاکی بوده و در یک سند HTML داخل تگ body قرار می گیرد. این تگ به کمک دو تگ باز و بسته <nav></nav> بین دو تگ اصلی <body> و <body/> قرار خواهد داشت.
به این عمل, یعنی قرار دادن یک تگ در دل تگ دیگر ، nest می‌گویند.

<!DOCTYPE html>
<html lang="en" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        nav{
            background-color: #efefef;
            padding: 10px;
        }
        nav ul{
            list-style: none;
        }
        nav ul li a{
            text-decoration: none;
        }
    </style>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#">خانه</a></li>
                <li><a href="#">خانه</a></li>
                <li><a href="#">خانه</a></li>
                <li><a href="#">خانه</a></li>
            </ul>
        </nav>
    </header>
    <div class="main">conent</div>
    <div class="sidebar">
        <nav>
            <ul>
                <li><a href="#">خانه</a></li>
                <li><a href="#">خانه</a></li>
                <li><a href="#">خانه</a></li>
                <li><a href="#">خانه</a></li>
            </ul>
        </nav>
    </div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

nav{

background-color: #efefef;

padding: 10px;

}

nav ul{

list-style: none;

}

nav ul li a{

text-decoration: none;

}

</style>

</head>

<body>

<nav>

<ul>

</ul>

</nav>

</header>

<div class="main">conent</div>

<nav>

<ul>

</ul>

</nav>

</div>

</body>

</html>

همانطور که در کدهای بالا دید، بسیاری از عناصری می توانند در تگ nav ، قرار بگیرند، ولی نکته مهم این است که این عناصر می بایست نقش ایجاد ناوبر در صفحه وب سایت را ایفا کنند. تگ هایی مثل تگ a و تگ های لیستی ul و ol و…

ویژگی های تگ nav در html

تگ nav در HTML ویژگی خاصی ندارد اما از همه خصوصیات جهانی پشتیبانی می کند. accesskey ، dir ، id و translate مواردی هستند که بیشتر مورد استفاده قرار می گیرند.

پشتیبانی مرورگرها

این تگ در مرورگرهای : IE، safari ، firefox، cherom، opera و Edge پشتیبانی می شود.

نکته مهم دیگر اینکه، بعضی از مرورگرها (screen reader) و یا نرم افزار های صفحه خوانی که برای افراد نابینا ساخته شده اند، برای پردازش بهتر محتوار یا اصطلاحا رندرگیری از اصفحات ممکن است لینک های وجود در قسمت منوی ناوبری را بصورت خودکار حذف کنند. بنابراین هیچ وقت تا انجا که مغایر با اهداف شما نیست، لینک ها با ارزش را در منوی ناوبری قرار ندهید.

سوالی که در مورد کاربرد بالا پیش می آید این است که، با استفاده از تگ ul نیز می توانیم منوی ناوبری را هم بصورت افقی و هم بصورت عمودی ایجاد کرد. پش چرا باید از تگ nav استفاده کرد؟

جواب سوال ساده است. تگ nav جزو تگ های معنادار است. این تگ در کنار تگ هایی مثل تگ footer، تگ header، تگ section، تگ article، تگ aside، تگ details و تگ summary ساختار کلی سایت را می سازد.
تگ هایی که نسبت به سایر تگ ها برای ربات های جستجوگر مهم تر هستند و معنایی خاص را می رسانند.

همانطور که در مقاله همه چیز در مورد تگ div گفتیم این تگ ها در سئو و بهینه سازی سایت برای موتور های جستجو بسیار تاثیرگذار هستند.

دانلود فایل این جلسه

برای نصب نرم افزار برای کد نویسی html از لینک زیر استفاده فرمایید.

آموزش نرم افزار های مورد نیاز طراحی وب سایت

در صورت که به طراحی وب آشنایی ندارید میتوانید از آموزش زیر استفاده فرمایید .

طراحی وب

در صورت که میخواهید به صورت حرفه ای طراحی وب را فرا بگیرید از لینک زیر استفاده فرمایید .

آموزش css html آموزش HTML5 CSS3

در یافت تمام جلسات آموزش مرحله به مرحله html از لینک زیر استفاده فرمایید.

آموزش html

میانگین رتبه 5/5 تعداد رای : 1

آموزش تگ nav در html