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

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

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

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

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

تگ های معنایی اضافه شده در HTML5

• <article>
• <aside>
• <details>
• <figcaption>
• <figure>
• <footer>
• <header>
• <main>
• <mark>
• <nav>
• <section>
• <summary>
• <time

همچنین بخوانید:همه چیز در مورد CSS3

در ادامه به توضیح تگ های معنایی اضافه شده در HTML5 برای قالب بندی صفحات وب پرداخته ایم.

تگ معنایی <Header> یا تگ <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>