معرفی تگ div و span و کاربرد آنها در زبان HTML
در جلسه گذشته درمورد عناصر block-level و inline-level صحبت کردیم، حالا قصد داریم دو مورد از پرکاربرد‌ترین و مهم‌ترین تگ‌های هرکدام از این دسته‌ها، یعنی تگ div و span را معرفی کنیم.
تا این قسمت از آموزش، هر تگی که معرفی شد وظیفه خاصی را برعهده داشت. مثل تگ a (ایجاد لینک) و تگ img (نمایش تصاویر) که هرکدام وظیفه واضح و مشخصی دارند. اما تگ div و span اینگونه نیستند، یعنی وظیفه مشخصی ندارند و یک طراح هرکجا که صلاح بداند می‌تواند از این تگ‌ها استفاده کند.
کاربرد تگ div در HTML
تگ div کاربردی‌ترین تگ دسته عناصر block-level است. نام این تگ از ۳ حرف اول کلمه division (به معنای بخش یا تقسیم) گرفته شده است. همانطور که گفته شد، این تگ وظیفه واضح و مشخصی ندارد، اما بطور کلی می‌توان کاربرد تگ div را اینگونه توصیف کرد:
هرجایی که نیاز به ایجاد یک بخش یا باکس در صفحه داشتید می‌توانید از تگ div استفاده کنید.
به مثال زیر توجه کنید:
1 2 3 4 | <div style="background:pink; padding: 10px;"> <h3>عنوان این بخش</h3> <p>پاراگراف درون این بخش</p> </div> |
خروجی کد بالا:
عنوان این بخش
پاراگراف درون این بخش
خب همانطور که در خروجی مشاهده میکنید، در مثال بالا یک باکس با رنگ صورتی ایجاد کرده‌ایم و درون آن یک عنوان و پاراگراف درج کرده‌ایم. شما هم می‌توانید با استفاده از تگ div بخش‌های مختلف صفحه وب خود را ایجاد کنید. حتی می‌توانید از این تگ بصورت تودرتو استفاده کنید.
کاربرد تگ span در HTML
تگ span یکی از پرکاربرد‌ترین تگ‌های دسته عناصر inline-level است. این تگ در ۹۹ درصد مواقع برای نمایش متن استفاده می‌شود. و کاربرد‌های inline یا درون خطی دارد. به مثال زیر توجه کنید:
1 | <p>رنگ <span style="color: red;">قرمز</span> برای ایجاد حس هیجان در مخاطب بسیار مناسب است</p> |
خروجی کد بالا:
رنگ قرمز برای ایجاد حس هیجان در مخاطب بسیار مناسب است
در این مثال برای اینکه بتوانیم فقط کلمه قرمز را به رنگ قرمز نمایش دهیم، راهی جز استفاده از تگ span نداشتیم. چون اگر به تگ p رنگ قرمز را اعمال می‌کردیم کل متن درون آن قرمز میشد.
تگ span اکثراً چنین کاربرد‌هایی دارد. به اصطلاح می‌گویند این تگ برای گزاره‌بندی متون کاربرد دارد.
در واقع میشه دوتا تگ pدرون هم نوشت و هردو را با display به inline تبدیل کرد و pداخلی رو کلمه و رنگ مورد نظر انتخاب کرد.
درسته اما همیشه فقط پیاده سازی کردن مهم نیست و چگونه پیاده سازی کردن هم اهمیت زیای داره. کم کم بعد از ورود به دنیای برنامه نویسی این موضوع رو بهتر درک میکنید
اما در این بخش مسئله سئو مهم هستش. اگر دوتا تگ p داخل هم بذارید موتورهای جستجو درک درستی از این قسمت نخواهند داشت بهتره تگ خارجی divباشه
رنگ آبی رنگ مورد علاقه من است
اتفاقن با استفاده از مطالب قبلی و کد های قبلی بدون بلد بودن تگ span میشد جمله‌ی بالا رو نوشت.
سلام, من یه تگ div و یک ul ساختم, من میخام کاری کنم که وقتی div هاور شد ul نمایش داده بشه, بنابراین display یو ال رو none کردم و بعدش کده روبرو رو وارد کردم : div:hover ul { display: block } ولی کار نکرد :/ بجای ul من تگ هایی مثله p و h و … رو امتحان کردم و دقیقا همونی که میخام شد یعنی وقتی هاور میکردم نمایش میداد, اما این ul رو نمیدونم چرا کار نمیکنه, بنظرتون مشکل از کجاس ؟؟
سلام این کد فقط زمانی کار می‌کنه که UL داخل همون DIV مودرنظر باشه.