تگ div در html چه کاربردی دارد؟
تگ div در html چه کاربردی دارد؟ بخش بندی صفحه وب
در این مقاله از سایت آموزی جهت آگاهی شما عزیزان به بررسی تگ <div> در html می پردازیم. با ما همراه باشید.
تگ <div> در اچ تی ام ال
تگ <div> در html ، یکی از تگ های مهم و پرکاربرد به حساب می آید. از تگ <div> معمولا برای ساختن گروهی از المنت ها (تگ های) مختلف استفاده می شود.
در گذشته برای لایه بندی وبسایت ها از تگ table استفاده می کردند. استفاده از تگ table جهت لایه بندی وبسایت ها روش اشتباهی بود. به همین منظور در کدنویسی مدرن جهت لایه بندی بخشهای مختلف سایت از تگ <div> بهره می برند.
اگرچه در نسخه HTML5 تگ section را در بسیاری مواقع جایگزین تگ <div> قرار می دهند، اما هنوز هم در بسیاری لایه بندی ها و ساخت گروه تگ ها از تگ کاربردی <div> استفاده می کنند.
تگ div در html دارای یک تگ باز ( Opening Tag ) و یک تگ بسته ( Closing Tag ) می باشد. در بین این تگ باز و بسته گروهی از تگ ها که هر کدام شامل محتوا ، فایل های صوتی و تصویری گوناگون می باشند قرار می گیرد.
شما از طریق این تگ پرکاربرد می توانید لایه ها و <div> های تو در تو ایجاد کنید. تگ <div> در html ، به عنوان یکی از تگ های block-level به حساب می آید. همانطور که در مقالات آموزشی قبلی اشاره کردم، تگ های بلاک لول یک خط کامل را به خود اختصاص می دهند.
قبل از هر چیز بایستی در مورد اشتباه بخش بندی وبسایت های قدیمی با تگ <table> بدانید و سپس با توجه به اهمیت معناگرایی در HTML5 ، جهت استفاده از تگ <div> و تگ <section> نکاتی را در نظر بگیرید:
اشتباه در بخش بندی وبسایت ها با تگ <table>
در گذشته ای نه چندان دور برای بخش بندی قسمت های مختلف یک سایت از تگ <table> در اسناد HTML استفاده می شد. که نه تنها کاری اشتباه بود، بلکه مشکلات زیادی را برای توسعه دهندگان وب در پی داشت. به همین منظور در نسخه های جدیدتر اچ تی ام ال ، استفاده از تگ <div> جهت لایه بندی قسمت های مختلف سایت مرسوم شد.
تفاوت کاربرد تگ <div> و تگ <section> در زبان HTML
اما در اسناد HTML5 با توجه اهمیت بالای معناگرایی تگ ها ( Semantic Tag ) ، جهت استفاده از تگ های HTML بایستی نکاتی را رعایت کنید. شاید بسیاری از وبمستران در استفاده صحیح از تگ های کاربردی <div> و <section> دچار اشتباه شوند.
در واقع در مورد استفاده از تگ <div> و تگ <section> بایستی به مبحث معناگرایی در HTML5 توجه نمایید. همواره سعی کنید برای بخش بندی قسمت هایی از وبسایت که فاکتور معناگرایی در آن بخش اهمیت دارد،
و بایستی تگ ها و محتوای آن قسمت از سایت شما معنا مفهوم مخصوصی را به موتور های جستجو برساند، از تگ <section> استفاده نموده و برای بخش بندی قسمت هایی که معنا و مفهوم خاصی برای آن مطرح نیست، از تگ <div> استفاده نمایید.
مثال در مورد تگ div در html
<div style="background:blue; color:white; text-align: center;">division element</div>
خروجی کد در مرورگر اینترنتی
تفاوت تگ <div> براساس HTML 4.01 و HTML5
هیچگونه تفاوتی از نظر عملکرد در تگ <div> در نسخه HTML4.01 و نسخه HTML5 وجود ندارد. تنها تفاوت این است که صفت align در HTML5 پشتیبانی نمی شود.
ویژگی های عمومی تگ <div> در اچ تی ام ال
تگ <div> از کلیه ویژگی های عمومی در سند HTML پشتیبانی می کند.
برای متخصص شدن در طراحی سایت فروشگاهی با وردپرس روی لینک زیر کلیک کن و تو دوره ثبت نام کن:
دوره فوق حرفه ای طراحی سایت فروشگاهی با وردپرس پروژه محور
برای متخصص شدن در طراحی بخش Front End سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:
دوره فوق حرفه ای آموزش طراحی وب با HTML5 و CSS3 و jQuery
برای متخصص شدن در بهینه سازی و سئوی سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:
دوره آموزش سئو محتوا کاملا حرفه ای براساس آخرین آپدیت های گوگل
ویژگی های خصوصی تگ div در HTML
صفت خصوصی تگ dir | مقدار صفت | توضیحات |
align | left , right , center , justify | مشخص می کند اجزای درون عنصر div چگونه تنظیم شود. ( در html5 پشتیبانی نمی شود. ) |
پشتیبانی مرورگرها از عنصر <div> در اچ تی ام ال
تگ <div> در همه مرورگرهای معتبر اینترنتی نظیر اینترنت اکسپلورر ، فایرفاکس ، اپرا ، گوگل کروم و سافاری پشتیبانی می شود.
پیوندهای مهم و کاربردی
تگ های HTML در سایت آموزی | تگ های جدید HTML5 در سایت آموزی | صفات تگ های HTML در سایت آموزی | تگ های منسوخ شده HTML5 در سایت آموزی | تگ های block level و inline level در سایت آموزی | تگ های HTML در W3school | ویژگی های CSS در سایت آموزی | ویژگی های CSS در W3schools
تگ div در html چه کاربردی دارد؟ بخش بندی صفحه وب – اختصاصی سایت آموزی
درباره سایت آموزی
علیرضا ابراهیمی - بنیانگذار وبسایت آموزشی سایت آموزی ، 8 سال سابقه فعالیت حرفه ای در زمینه طراحی سایت ، سئو ، سابقه تدریس اغلب زبان های برنامه نویسی تحت وب ، محقق و تحلیلگر ساختارهای توسعه دهنده وب
نوشته های بیشتر از سایت آموزی5 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
بسیار ممنونم از آموزش مفیدتون کاش به کار گیری استایل ها و همچنین بخش بندی کردن مثالی یک صفحه رو هم توضیح بدید.
درود بر شما جهت توضیحات مفصل تر و عملیاتی در دوره جامع فرانت اند در لینک زیر ثبت نام کنید:
https://siteamoozi.com/product/آموزش-طراحی-وب/
سلام وقت بخیر
برای قسمتی از سایت که محصولات رو لیست کردیم (قسمت فروشگاه) باید چه تگی استفاده کرد؟!
نکته:
باید ذکر کنیم در پایین لیست محصولات یه توضیح کلی از اون دسته بندی ارائه دادیم و برای اون توضیح از تگ main و در داخلش تگ آرتیکل استفاده کردیم
و به دلیل نحوه ی طراحی سایت و جدابودن بخش پایین از بالا، این امکان وجود نداره برای محصولات هم از تگ main استفاده کنیم.
ممنون میشم پاسخ بدید
لطفا پاسخ این سوال را می دهید؟؟؟؟؟
برای لیست محصولات باید چه تگی گذاشت؟؟؟؟؟
درود بر شما… پاسخ به سوالات فرانت اند به دانشجویان دوره کدنویسی وب شاخه فرانت اند که شامل پشتیبانی هستند داده می شود. موفق باشید..