معرفی تگ div و span و کاربرد آنها در زبان HTML


نویسنده:
سه شنبه ۱۳ خرداد ۱۳۹۹
تگ div و span

در جلسه گذشته درمورد عناصر block-level و inline-level صحبت کردیم، حالا قصد داریم دو مورد از پرکاربرد‌ترین و مهم‌ترین تگ‌های هرکدام از این دسته‌ها، یعنی تگ div و span را معرفی کنیم.

تا این قسمت از آموزش، هر تگی که معرفی شد وظیفه خاصی را برعهده داشت. مثل تگ a (ایجاد لینک) و تگ img (نمایش تصاویر) که هرکدام وظیفه واضح و مشخصی دارند. اما تگ div و span اینگونه نیستند، یعنی وظیفه مشخصی ندارند و یک طراح هرکجا که صلاح بداند می‌تواند از این تگ‌ها استفاده کند.

کاربرد تگ div در HTML

تگ div کاربردی‌ترین تگ دسته عناصر block-level است. نام این تگ از ۳ حرف اول کلمه division (به معنای بخش یا تقسیم) گرفته شده است. همانطور که گفته شد، این تگ وظیفه واضح و مشخصی ندارد، اما بطور کلی می‌توان کاربرد تگ div را اینگونه توصیف کرد:

هرجایی که نیاز به ایجاد یک بخش یا باکس در صفحه داشتید می‌توانید از تگ div استفاده کنید.

به مثال زیر توجه کنید:

خروجی کد بالا:

عنوان این بخش

پاراگراف درون این بخش


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

کاربرد تگ span در HTML

تگ span یکی از پرکاربرد‌ترین تگ‌های دسته عناصر inline-level است. این تگ در ۹۹ درصد مواقع برای نمایش متن استفاده می‌شود. و کاربرد‌های inline یا درون خطی دارد. به مثال زیر توجه کنید:

خروجی کد بالا:

رنگ قرمز برای ایجاد حس هیجان در مخاطب بسیار مناسب است


در این مثال برای اینکه بتوانیم فقط کلمه قرمز را به رنگ قرمز نمایش دهیم، راهی جز استفاده از تگ span نداشتیم. چون اگر به تگ p رنگ قرمز را اعمال می‌کردیم کل متن درون آن قرمز می‌شد.

تگ span اکثراً چنین کاربرد‌هایی دارد. به اصطلاح می‌گویند این تگ برای گزاره‌بندی متون کاربرد دارد.

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

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *