تگ div در html چه کاربردی دارد؟

تگ div در html چه کاربردی دارد؟ بخش بندی صفحه وب

در این مقاله از سایت آموزی جهت آگاهی بهتر شما مخاطبان گرامی به بحث و بررسی تگ کاربردی <div> در زبان طراحی html می پردازیم. با ما همراه باشید.

تگ <div> در اچ تی ام ال

تگ <div> در html ، یکی از تگ های مهم و پرکاربرد به حساب می آید.

از تگ <div> معمولا برای ساختن گروهی از المنت ها (تگ های) مختلف استفاده می شود.

در گذشته برای لایه بندی وبسایت ها از تگ table استفاده می کردند.

استفاده از تگ table جهت لایه بندی وبسایت ها روش اشتباهی بود.

به همین منظور در کدنویسی مدرن جهت لایه بندی بخشهای مختلف سایت از تگ <div> بهره می برند.

اگرچه در نسخه HTML5 تگ section را در بسیاری مواقع جایگزین تگ <div> قرار می دهند، اما هنوز هم در بسیاری لایه بندی ها و ساخت گروه تگ ها از تگ کاربردی <div> استفاده می کنند.

تگ <div> دارای یک تگ باز ( Opening Tag ) و یک تگ بسته ( Closing Tag ) می باشد.

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

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

تگ <div> در html ، به عنوان یکی از تگ های block-level به حساب می آید.

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

قبل از هر چیز بایستی در مورد اشتباه بخش بندی وبسایت های قدیمی با تگ <table> بدانید و سپس با توجه به اهمیت معناگرایی در HTML5 ، جهت استفاده از تگ <div> و تگ <section> نکاتی را در نظر بگیرید:

اشتباه در بخش بندی وبسایت ها با تگ <table>

در گذشته ای نه چندان دور برای بخش بندی قسمت های مختلف یک سایت از تگ <table> در اسناد HTML استفاده می شد. که نه تنها کاری اشتباه بود، بلکه مشکلات زیادی را برای توسعه دهندگان وب در پی داشت. به همین منظور در نسخه های جدیدتر اچ تی ام ال ، استفاده از تگ <div> جهت لایه بندی قسمت های مختلف سایت مرسوم شد.

تگ div در html چه کاربردی دارد؟ بخش بندی صفحه وب

تفاوت کاربرد تگ <div> و تگ <section> در زبان HTML

اما در اسناد  HTML5 با توجه اهمیت بالای معناگرایی تگ ها ( Semantic Tag ) ، جهت استفاده از تگ های HTML بایستی نکاتی را رعایت کنید.

شاید بسیاری از وبمستران در استفاده صحیح از تگ های کاربردی <div> و <section> دچار اشتباه شوند.

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

مثال در مورد تگ <div> در html

[html]<div style=”background:blue; color:white; text-align: center;”>division element</div>[/html]

خروجی کد در مرورگر اینترنتی

تفاوت تگ <div> براساس HTML 4.01 و HTML5

هیچگونه تفاوتی از نظر عملکرد در تگ <div> در نسخه HTML4.01  و نسخه HTML5 وجود ندارد.

تنها تفاوت این است که صفت align در HTML5 پشتیبانی نمی شود.

ویژگی های عمومی تگ <div> در اچ تی ام ال

تگ <div> از کلیه ویژگی های عمومی در سند HTML پشتیبانی می کند.

ویژگی های خصوصی تگ <div> در HTML

پشتیبانی مرورگرها از تگ <div> در اچ تی ام ال

تگ div در html چه کاربردی دارد؟ بخش بندی صفحه وب – اختصاصی سایت آموزی