uupload

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


نویسنده:
سه شنبه 13 خرداد 1399
تگ 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 اکثراً چنین کاربرد‌هایی دارد. به اصطلاح می‌گویند این تگ برای گزاره‌بندی متون کاربرد دارد.

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

5 پاسخ به “معرفی تگ div و span و کاربرد آنها در زبان HTML”

  1. Soshians گفت:

    در واقع میشه دوتا تگ pدرون هم نوشت و هردو را با display به inline تبدیل کرد و pداخلی رو کلمه و رنگ مورد نظر انتخاب کرد.

    • درسته اما همیشه فقط پیاده سازی کردن مهم نیست و چگونه پیاده سازی کردن هم اهمیت زیای داره. کم کم بعد از ورود به دنیای برنامه نویسی این موضوع رو بهتر درک میکنید
      اما در این بخش مسئله سئو مهم هستش. اگر دوتا تگ p داخل هم بذارید موتورهای جستجو درک درستی از این قسمت نخواهند داشت بهتره تگ خارجی div‌باشه

  2. Soshians گفت:

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

  3. Alireza گفت:

    سلام, من یه تگ div و یک ul ساختم, من میخام کاری کنم که وقتی div هاور شد ul نمایش داده بشه, بنابراین display یو ال رو none کردم و بعدش کده روبرو رو وارد کردم : div:hover ul { display: block } ولی کار نکرد :/ بجای ul من تگ هایی مثله p و h و … رو امتحان کردم و دقیقا همونی که میخام شد یعنی وقتی هاور میکردم نمایش میداد, اما این ul رو نمیدونم چرا کار نمیکنه, بنظرتون مشکل از کجاس ؟؟

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

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