تگ های معنایی (Semantic Tags) در HTML5 و نحوه استفاده در المنتور

اشتراک گذاری در telegram
اشتراک گذاری در whatsapp
اشتراک گذاری در facebook
اشتراک گذاری در twitter
اشتراک گذاری در linkedin
اشتراک گذاری در email
اشتراک گذاری در print
تگ های HTML در المنتور

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

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

طرح کلی محل قرار گیری تگ ها

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

تا قبل از این یعنی در HTML4 برای مشخص کردن قسمت های مختلف صفحه از کدهایی مثل <“div id=”nav> یا <“div class=”header> استفاده می کردیم. ولی حالا در نسخه جدید HTML5 تگ های موجود در صفحه به این شکل نشان داده می شود:

تگ های معنایی در html5

در اینجا تگ هایی که المنتور برای طراحی بخش های مختلف در اختیار ما قرار می دهد را مشاهده می کنید:

  • <article>
  • <aside>
  • <footer>
  • <header>
  • <main>
  • <nav>
  • <section>

استفاده از تگ های HTML5 در المنتور

المنتور قابلیت اضافه کردن تگ های HTML را به بخش، ستون و بخش داخلی می دهد. در ادامه کاربرد استفاده هر کدام از این تگ ها را توضیح می دهیم.

تگ های معنایی در html5

تگ Header

این تگ مجموعه ای از پیوندهای ناوبری (Navigation Link) و محتوای مقدماتی (لوگو یا اطلاعات دیگر) را نشان می دهد. به طور معمول تگ header شامل موارد زیر می باشد

  • یک یا چند تگ عنوان (<h1> – <h6>)
  • لوگو یا آیکون
  • اطلاعات سایت

نحوه استفاده در المنتور:

در هنگام طراحی سربرگ در المنتور، بر روی آیکون چرخ دنده در پایین صفحه، سمت راست کلیک کرده و تگ HTML را روی header قرار دهید.

تگ های HTML در المنتور

تگ Nav

بدون شک فهرست ناوبری یکی از مهمترین جنبه های یک سایت برای مشخص کردن پیوند ها می باشد.

این تگ لینک های navigation (فهرست اصلی – لینک هایی که در بالای سایت هستند مانند صفحه، تماس با ما و …) را شامل می شود. توجه کنید که همه پیوندهای صفحه نباید درون یک تگ nav قرار بگیرد. تگ nav فقط برای لینک های اصلی فهرست ناوبری در نظر گرفته شده است.

نحوه استفاده در المنتور:

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

تگ های HTML در المنتور

تگ Main

تگ main محتوای اصلی صفحه را مشخص می کند. محتوای درون این تگ باید به صورت یونیک باشد. نباید مطالبی شامل سایدبار، فهرست ناوبری، اطلاعات کپی رایت، لوگو سایت یا فرم جستجو باشد.

در بین این تگ، می توان از تگ های article و section استفاده کرد.

توجه: در صفحه نباید بیش از یک تگ main استفاده شود. همچنین این تگ نمی تواند از فرزندان تگ های header, footer, aside, article و یا nav باشد.

نحوه استفاده در المنتور:

برای استفاده از این تگ، در طراحی صفحات تکی، آرشیو، محصول و … بر روی آیکون چرخ دنده پایین صفحه، کلیک کرده و تگ HTML را روی main قرار دهید.

تگ های HTML در المنتور

تگ Article

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

نمونه های مورد استفاده از این تگ:

  • نوشته های کاربران در انجمن ها
  • نوشته های وبلاگ
  • مقالات مختلف در سایت های خبری

نحوه استفاده در المنتور:

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

تگ های HTML در المنتور

تگ Aside

این تگ، محتوایی را که در کنار محتوای اصلی قرار می گیرد (مانند sidebar ها – مثلا لیست آخرین مقالات که به صورت عمودی سایت موجود است یا بخش Call To Action میان محتوا سایت) تعیین می کند. محتوای تگ aside باید با محتوای پیرامونش در ارتباط باشد.

نحوه استفاده در المنتور:

بر روی ستون و یا بخش سایدبار کلیک کرده و تگ HTML را روی aside قرار دهید.

تگ های HTML در المنتور

تگ Section

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

نحوه استفاده در المنتور:

اگر داخل صفحه یک بخش اصلی و یا از ویجت بخش داخلی استفاده کنید، با این تگ همراه شده است. در صورت نیاز می توانید از تب طرح بندی، تگ HTML، تگ های section را تغییر دهید.

تگ های HTML در المنتور

تگ Footer

این تگ محتوای پاورقی یا فوتر سایت را شامل می شود. محتوای تگ footer باید حاوی اطلاعاتی باشد. این اطلاعات شامل موارد زیر است:

  • اطلاعات مربوط به نویسنده
  • اطلاعات کپی رایت
  • اطلاعات تماس
  • نقشه سایت
  • دکمه بازگشت به بالا
  • مقالات مرتبط

نحوه استفاده در المنتور:

در هنگام طراحی پاورقی در المنتور، بر روی آیکون چرخ دنده در پایین صفحه، سمت راست کلیک کرده و تگ HTML را روی footer قرار دهید.

تگ های HTML در المنتور

در انتها هم می توانید یک بار دیگر نحوه قرار گیری این تگ ها در صفحه را مشاهده کنید.

    تگ های معنایی در html5

    تاثیر تگ های معنایی برای سئو

    ساختار، نقش ها و طرح بندی، از مواردی هستند که کاربران غالبا بطور غریزی متوجه آن می شوند. استفاده صحیح از تگ های معنایی HTML به جای تگ <div> ، همین درک را برای ماشین ها ساده تر می کند.
    تگ های HTML در المنتور

    امیدواریم از این مقاله هم به خوبی استفاده کرده باشید، اگر سوالی در مورد تگ های HTML در المنتور دارید در بخش نظرات مطرح کنید.

    فهرست مطالب

    Avatar
    علی در 16:40

    سلام اگه این تگ ها رو یادمون بره استفاده کنیم باید چیکار کنیم؟ حتما لازمه که تگ ها رو قرار بدیم؟

    پاسخ
    المنتور فارسی
    المنتور فارسی در 16:42

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

    پاسخ
    مصطفی
    مصطفی در 13:05

    مثل همیشه مقالات المنتورفارسی بی نظیره حتی خود المنتور رو هم من چک کردم همچین مقالات خوب و کاملی رو شرح نمیده الا تو بعضی از ویدئوهای آموزشی

    تشکر از پدر المنتور ایران؛ آقا محمدرضای عزیز

    پاسخ
    المنتور فارسی
    المنتور فارسی در 13:11

    با سلام
    در خدمت هستیم. ممنون از همراهی شما

    پاسخ
    Avatar
    Sam در 03:57

    سلام ممنونم بخاطر مقالات خوبتون.
    این فهرست کناری رو با کدوم افزودنی ساختید؟؟

    پاسخ
    المنتور فارسی
    المنتور فارسی در 10:42

    با سلام
    با استفاده از ویجت فهرست مطالب المنتور پرو

    پاسخ
    مهدی
    مهدی در 12:46

    مثل همیشه عالی یکی از سوالات من بود

    پاسخ
    Avatar
    جاسم کیمیایی در 09:44

    بسیار مفید.
    تشکر

    پاسخ
    المنتور فارسی
    المنتور فارسی در 12:48

    ممنون از شما

    پاسخ
    Avatar
    pastelco در 21:49

    مقاله خیلی ارزشمند و کاربردی بود .

    با تشکر

    پاسخ
    المنتور فارسی
    المنتور فارسی در 21:57

    ممنون از توجه شما

    پاسخ

    نظرات ارزشمند خود را به اشتراک بگذارید

    نیاز به کمک دارید؟ پیام دهید