۸ تگ جایگزین برای div

وقتی برای اولین برای HTML را یاد میگیرید ممکنه از div برای تقسیم بندی هر جایی استفاده کنید اما این رویکرد مشکل سازه.

مشکل div اینه که به مرورگر هیچ اطلاعاتی به عنوان آنچه که در آن بخش وجود داره، نمیده. به علاوه، میتونه بر رتبه بندی سئوی سایتتون هم تاثیر بگذاره.

در این مقاله از زرین هور میخواهیم به شما بهترین تگ ها برای جایگزینی div را برایتان بیان کنیم، تا پایان با ما همراه باشید.

۱_ main

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

۲_ article

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

۳_ nav

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

۴_ section

محتوا را در یک موضوع یا موضوعی مشابه آن گروه بندی میکند. به عنوان مثال، اگر صفحه وب شما در مورد انواع انواع مختلف گیاهانه، میتوانید برای هر گیاهی یک section در نظر بگیرید . بسته به ساختار صفحه، تگهای section میتوانند header های خود را داشته باشند

div

۵_ aside

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

۶_ header

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

۷_ footer

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

۸_ figure

اگر به دنبال نمایش یک تصویر همراه با تیترش هستید، تگ figure تگ مناسبی برای این کاره. به شما این امکان را میدهد که متن شکل را در همان بلوک کد قرار بدید. واضحه که این شکل میتواند (تصویر، نمودار، گراف و غیره) هم باشه.


بیشتر بخوانید:

زبان های برنامه نویسی فرانت اند کدامند؟


قبلی «
بعدی »

دیدگاهتان را بنویسید

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