و غیره. این برچسب را می توان در سراسر وب یافت. اما به هر وب‌سایت اصلی بروید، کد منبع را باز کنید و ممکن است چیز ناآشنا ببینید: یک دسته از تگ‌های div و span. اگر مطمئن نیستید که این تگ ها برای چیست، درک نحوه کدگذاری صفحات وب دشوارتر می شود.
با این حال، تگ‌های div و span بسیار رایج هستند و احتمالاً در بیشتر صفحاتی که بازدید می‌کنید استفاده می‌شوند. بنابراین، به عنوان یک متخصص وب سایت نوپا، اگر می خواهید ساختار و محتوای صفحه را درک کنید، باید تفاوت بین آنها را بدانید. در این راهنما، ما به شما نشان خواهیم داد که هر کدام چه کاری انجام می دهند و چگونه می توانید آنها را به درستی در صفحات خود اعمال کنید.
بیایید هر عنصر را با جزئیات بیشتری مورد بحث قرار دهیم تا تفاوت آنها را بهتر درک کنیم.
تگ div
تگ div یک عنصر رایج در سطح بلوک است که اغلب برای تقسیم محتوای صفحه به بلوک ها استفاده می شود. عنصر بلوک یک عنصر صفحه است که یک خط جدید را شروع می کند و عرض آن برابر با کل صفحه یا محفظه والد است.
اغلب می بینید که از div هایی برای گروه بندی پاراگراف ها، تصاویر، عنوان ها و پیوندهای مرتبط استفاده می شود. به عنوان مثال، یک مقاله سه پاراگراف را می توان در یک div قرار داد و یک منوی ناوبری حاوی پیوندها را می توان در یک div دیگری محصور کرد. استفاده از div هایی مانند این تشخیص بخش های مختلف صفحه و استایل دادن به آنها را با CSS آسان می کند.
یک مثال اساسی از یک عنصر div در HTML به شرح زیر است:
<!DOCTYPE html>
<html dir="rtl" lang="fa-IR">
<head>
<meta charset="UTF-8">
<title>HTML آموزش</title>
</head>
<style>
div { color: white; background-color: #009900; margin: 2px; font-size: 25px; }
</style>
<h1>متاوبز</h1>
<div>پاراگراف اول</div>
<div>پاراگراف دوم</div>
<div>پاراگراف آخر</div>
</body>
</html>
نتیجه زیر را خواهید دید.
برنامه و آموزش استفاده از تگ های div در زبان HTML
تگ دهانه
تگ span یک عنصر درون خطی رایج است که معمولاً برای اعمال استایل به یک قطعه محتوای درون خطی استفاده می شود. یک عنصر درون خطی خط جدیدی را شروع نمی کند و فقط به اندازه محتوای آن فضای صفحه را اشغال می کند. تگ های Span در بخش های کوچکی از متن، لینک ها، تصاویر و سایر عناصر HTML که در راستای محتوای اطراف ظاهر می شوند، استفاده می شوند.
یک مثال اساسی از یک عنصر span در HTML به شرح زیر است:
<!DOCTYPE html>
<html dir="rtl" lang="fa-IR">
<head>
<meta charset="UTF-8">
<title>HTML آموزش</title>
</head>
<body>
<style>
p { color:#009900; font-size: 30px; }
#special-text{ color: white; background-color: #009900; font-size: 25px; padding: 2px 5px; }
</style>
<h1>متاوبز</h1>
<p>این یک پاراگراف است با <span id="special-text">یک متن کوچک اضافی</span> درون آن.</p>
</body>
</html>
نتیجه زیر را خواهید دید.
استفاده و یادگیری استفاده از تگ span در HTML
به طور خلاصه، یک تگ div یک عنصر در سطح بلوک ایجاد می کند، در حالی که a یک عنصر تعبیه شده را می پیچد. علیرغم تفاوت‌هایشان، هر دو برای مقاصد ساختاری و/یا سبکی برای گروه‌بندی عناصر مشابه با هم استفاده می‌شوند.
نمونه هایی از span در مقابل div
اکنون به چند نمونه از span و div نگاه می کنیم که تفاوت ها و کاربردهای آنها را نشان می دهد.
در اینجا یک نمونه از دو مورد است
برچسب ها به دنبال آن دو
این یکی. من یک رنگ پس زمینه منحصر به فرد برای هر عنصر اعمال کردم تا اندازه آنها را مشخص کنم. توجه داشته باشید که چگونه div ها کل عرض صفحه را اشغال می کنند، در حالی که تگ های span فقط فضای محتوای آنها را اشغال می کنند. علاوه بر این، هر div یک خط جدید پس از محتوای خود اضافه می کند، اما عناصر span این کار را نمی کنند.
<!DOCTYPE html>
<html dir="rtl" lang="fa-IR">
<head>
<meta charset="UTF-8">
<title>HTML آموزش</title>
</head>
<body>
<style>
#div-0 { background-color: #7fd1de; }
#div-1 { background-color: #b4bbe8; }
#span-0 { background-color: #ffbcac;padding: 3px 10px; }
#span-1 { background-color: #7fded2; padding: 3px 10px; }
</style>
<h1>متاوبز</h1>
<div id="div-0">
<h2>این یک عنوان در داخل یک عنصر div است</h2>
<p>این یک پاراگراف در داخل یک عنصر div است.<p>
</div>
<div id="div-1">
<h2>این یک عنوان در داخل یک عنصر div است</h2>
<p>این یک پاراگراف در داخل یک عنصر div است.<p>
</div>
<span id="span-0">این متن داخل یک عنصر span است.</span>
<span id="span-1" >این متن در یک عنصر span دیگر قرار دارد.</span>
</body>
</html>
نتیجه زیر را خواهید دید.
برنامه و آموزش استفاده از تگ div و span در زبان HTML
در زیر مثالی آورده شده است که نحوه استفاده از div و span را با هم در صفحات وب نشان می دهد. در اینجا یک div قطعات بزرگتری از محتوا را جدا می کند و بخش هایی را درون آن div ها قرار می دهد.
<!DOCTYPE html>
<html dir="rtl" lang="fa-IR">
<head>
<meta charset="UTF-8">
<title>HTML آموزش</title>
</head>
<style>
div {
background-color: #ff7a59;
border-radius: 5px;
color: white;
font-family: Avenir;
margin: 5px;
padding: 5px;
}
#span-0 { color: #33475b; }
#span-1 {
background-color: #33475b;
text-decoration: underline;
}
</style>
<h1>متاوبز</h1>
<div>
<p>می‌توانیم از عنصر div برای جدا کردن محتویات یک صفحه به تکه‌ها استفاده کنیم. هر یک از این بلوک های نارنجی یک عنصر div است.</p>
</div>
<div>
<p>ما می توانیم از یک تگ span استفاده کنیم <span id="span-0" >از متن </span> رنگ را تغییر دهید </p>
</div>
<div>
<p>همچنین می توانیم از span استفاده کنیم <span id="span-1"> از متن نیز </span>سایر جنبه های سبک را تغییر دهید </p></div>
</body>
</html>
نتیجه زیر را خواهید دید.
برنامه و آموزش استفاده از تگ div و span در زبان HTML
وقتی از این دو تگ استفاده می کنید
همانطور که در مثال های بالا نشان داده شده است، div و span برای طراحی و ساختار صفحات وب مفید هستند. تخصیص ویژگی های id یا کلاس به این عناصر و هدف قرار دادن آنها با قوانین CSS آسان است. معمولاً تگ‌های span را می‌بینید که برای استایل دادن به محتوای درون خطی استفاده می‌شوند، مانند یک کلمه در هر خط متن. از سوی دیگر، تگ‌های Div باید به قطعات بزرگ‌تر محتوا استایل داده یا به عنوان محفظه‌هایی برای عناصر فرزند عمل کنند. صفحات وب پیچیده تر اغلب از div ها استفاده زیادی می کنند و آنها را در کنار هم قرار می دهند تا مناطق مختلف صفحه و مناطق فرعی را نشان دهند.
با توجه به راحتی span و div، استفاده از این برچسب ها زمانی که می خواهید یک عنصر جدید به صفحه اضافه کنید وسوسه انگیز است. به عنوان مثال، از تگ استفاده کنید
به جای برچسب
. با این حال، در واقع بهترین روش در توسعه وب در نظر گرفته می شود که استفاده از آنها را تا حد امکان محدود کنید.
چرا این اتفاق می افتد؟ Span و div عناصر “عمومی” هستند، به این معنی که هیچ یک از عناصر هیچ معنایی در مورد محتوای موجود یا هدف آن ندارند. شما می توانید چیزهای زیادی را در یک برچسب قرار دهید
یا
، اما خود برچسب مشخص نمی کند که هدف عنصر یا محتوای داخل چیست.
نقطه مقابل یک عنصر عمومی، یک عنصر معنایی است، عنصری که برچسب های آن معنای عنصر را می رساند. بیشتر عناصر HTML معنایی هستند: تگ ها
، ،
به
و
