تگ های معنایی در html5
HTML5 با ویژگی های مختلفی ارائه شد که یکی از مهم ترین آنها تگ های معنایی یا semantic Tags در می باشد. semantic Tags به طراحان وب کمک می کند تا ساختار صفحه خود را براساس قوانینی که توسط موتور های جستجو قابل شناسایی است طراحی کنند. در نتیجه این کار باعث بهبود دسترسی موتورهای جستجو به تمام اطلاعات وب سایت شما می شود.
تگ های معنایی یا Semantic Tags در HTML5
طرح کلی محل قرار گیری تگ ها
تگ های معنایی یا به عبارتی semantic tags مولفه هایی هستند که معنای آنها هم برای مرورگر و موتور های جستجو به طور کاملا واضح است. برای مثال تگ های فوتر <table >,<header>, <footer> و… مشخص می کنند که چه نوع محتوایی دارند. اما عناصر غیر معنایی مانند <p>, <span>, <pre> به هیچ عنوان معنا یا اطلاعاتی را در مورد محتوای خود به ما نمی دهند
تا قبل از این یعنی در HTML4 برای مشخص کردن قسمت های مختلف صفحه از کدهایی مثل <“div id=”nav> یا <“div class=”header> استفاده می کردیم. ولی حالا در نسخه جدید HTML5 تگ های موجود در صفحه به این شکل نشان داده می شود:
اگر دوست دارین همه چیز رو درباره اچ تی ام ال 5 بدونین بهتون مطالعه مقاله HTML5 چیست و چه کاربردی دارد از آکادمی وب مسیر رو پیشنهاد میکنم
تگ های معنایی در html5
در اینجا تگ هایی که المنتور برای طراحی بخش های مختلف در اختیار ما قرار می دهد را مشاهده می کنید:
<article>
<aside>
<footer>
<header>
<main>
<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 در المنتور دارید در بخش نظرات مطرح کنید
منبع: elementorfa