HTML5 با ویژگی های متنوع و الیته کاربردی ارائه شد که  یکی از مهم ترین آنها تگ های معنایی یا semantic Tags در html5 بود. semantic Tags به برنامه نویس این امکان را میدهد که ساختار صفحه وب خود را براساس قانونی که شناخته شده توسط موتور های جستجو است طراحی کند که مشخصا این کار به موتورهای جستجو نیز کمک بسیار میکند که براساس این تگ ها به تمامی اطلاعات وب سایت شما دسترسی پیدا کنند.

تگ های معنایی یا semantic Tags در html5 :

تگ های معنایی یا به عبارتی semantic tags مولفه هایی هستند که معنای آنها هم برای مرورگر و هم برای برنامه نویس به طور کاملا واضح است برای مثال  تگ های <table >,<header>, <footer>  و…   مشخص است که شامل چه محتوایی هستند اما تگ هایی مثل <p>, <span>, <pre> به هیچ عنوان مشخص نیست که چه محتوایی در آنها قرار خواهد گرفت.

به عبارتی میتوان گفت تگ های معنایی ,ساختار وب سایت را مشخص میکنند که همین باعث بالا رفتن سئو سایت نیز میشود.

در HTML4 برنامه نویسان از کلاس ها و ای دی های ساخته خود برای طراحی عناصر صفحات وب استفاده میکردند که مشخصا موتور های جستجو قادر به تشخیص محتوی آنها براساس نام تعیین شده توسط کاربر نبودند بنابراین با ارائه تگ های معنایی یا semantic Tags در html5 کمک شایانی هم به برنامه نویسان و همه به موتور های شده است بدین صورت که موتور های جستجو به راحتی با بررسی Semantic tags که برنامه نویس برای ساختار صفحه وب خود استفاده کرده محتویات را شناسایی میکنند.

semantic Tags در html 5

تگ های معنایی برای قالب بندی صفحات وب در HTML5  که به شرح زیر میباشد

• <Header>

تگ header معمولا دارای مولفه هایی برای معرفی سایت(از جمله لوگو سایت , اطلاعات نویسنده گان) و یا مجموعه ای از لینک های مربوط به صفحات(Navigation Links) سایت میباشد.

• <Nav>

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

<div class="navbar navbar-inverse navbar-fixed-top">

        <div class="container">

//this div is for show toolbar options when browser minimized with click on bellow button

            <div class="navbar-header"> 

                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                </button>

            </div>

//below div define toolbar items with list tag<ul>

            <div class="navbar-collapse collapse">

                <ul class="nav navbar-nav">

                    <li>خانه</li>

                    <li>ارتباط باما</li>

                    <li>درباره ما</li>

                </ul>

            </div>

        </div>

    </div>

• <section>

تگ section معمولا برای دسته بندی محتویاتی بکار میرود که به هم مربوط هستند یا به عبارت دیگر هم یک مفهوم را میرسانند برای مثال برای تمامی footer های سایت میتوان یک section در نظر گرفت.

• <article>

لغت  article به معنای مقاله است. همانگونه که از نامش مشخص است درون این تگ اطلاعاتی قرار میگیرد که خود مفهوم و هدف مشخص خود را داشته باشد یا به عبارتی معنا و مفهوم خود را برساند برای مثال به تکه کد زیر دقت فرمایید

<article id="jsArticle">

        <h3>آموزش جاوا اسکریپت</h3>

        <p>متون آموزشی جاوا اسکریپپت</p>

    </article>

**توجه کنید که برای هر سکشن نامی در نظر بگیرید تا بتوانید استایل مورد نظر خود را اعمال کنید.

• <aside>

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

• <footer>

تگ footer یا  پاصفحه  برای مشخص کردن اطلاعات مربوط به صفحه وب است برای مثال اطلاعات مربوط به نویسنده صفحه,  کپی رایت, sitemap , اطلاعات تماس , صفحات یا اسناد مرتبط و…

    <footer>

        <p>Post Source : Tejariapp.com</p>

        <p><a href="tejariapp@info.com">Contact Us </a></p>

        <p>&copy; @DateTime.Now.Year - cmsdesign.ir</p>

    </footer>