این مطلب را به اشتراک بگذارید

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

کاربرد و آموزش استفاده از تگ های div و span در زبان HTML
چکیده مطلب
دسترسی آسان به مطالب

اگر تازه شروع به درک HTML کرده اید ، احتمالاً یاد گرفته اید که چگونه از عناصر ابتدایی HTML برای ساخت یک صفحه مانند <p> ، <h1> ، <h2> و <image > و <a> و … استفاده کنید.این تگ ها را می توان در سراسر وب یافت. اما، به هر وب‌سایت بزرگی بروید، کد منبع را باز کنید ، ممکن است چیزی ناآشنا ببینید: انبوهی از تگ‌های تو در توی 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
کاربرد و آموزش استفاده از تگ ها div در زبان HTML

تگ span

تگ 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
کاربرد و آموزش استفاده از تگ span در زبان HTML

به طور خلاصه، یک تگ div یک عنصر در سطح بلوک ایجاد می کند در حالی که یک تگ <span> دور یک عنصر درون خطی می پیچد. با وجود تفاوت‌هایشان، هر دو برای گروه‌بندی عناصر مشابه برای اهداف ساختاری و/یا سبک استفاده می‌شوند.

مثال‌های span در مقابل div

اکنون به چند نمونه از span و div نگاه می کنیم که تفاوت ها و کاربردهای آنها را نشان می دهد.

در اینجا نمونه ای از دو تگ <div> و به دنبال آن دو تگ <span> وجود دارد. من یک رنگ پس‌زمینه منحصربه‌فرد برای هر عنصر اعمال کرده‌ام تا اندازه آنها را نشان دهد . توجه کنید که چگونه 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 در زبان 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 در زبان HTML

زمان استفاده از این دو تگ

همانطور که در مثال های بالا نشان داده شده است، div و span برای طراحی و ساختاربندی صفحات وب مفید هستند. تخصیص ویژگی های id یا کلاس به این عناصر و هدف قرار دادن آنها با قوانین CSS آسان است. معمولاً تگ های span را می بینید که برای استایل دادن به محتوای درون خطی مانند یک کلمه در یک خط متن استفاده می شوند. از سوی دیگر، تگ‌های Div باید بخش‌های بزرگ‌تری از محتوا را سبک‌دهی کنند یا به‌عنوان محفظه‌ای برای عناصر فرزند عمل کنند. صفحات وب پیچیده تر اغلب از div ها استفاده زیادی می کنند و آنها را در یکدیگر قرار می دهند تا مناطق مختلف صفحه و مناطق فرعی را نشان دهند.

با توجه به راحتی span و div، وسوسه انگیز است که هر زمان که می خواهید یک عنصر صفحه جدید اضافه کنید، از این برچسب ها استفاده کنید . به عنوان مثال، از تگ <div> به جای تگ <p> استفاده کنید . با این حال، در واقع بهترین روش در توسعه وب در نظر گرفته می شود که استفاده از آنها را تا حد امکان محدود کنید.

چرا چنین می شود؟ Span و div عناصر “عمومی” هستند، به این معنی که هیچ یک از عناصر معنایی را در مورد محتوای موجود یا هدف آن منتقل نمی کنند. شما می توانید چیزهای زیادی را در یک تگ <div> یا <span> قرار دهید ، اما از خود تگ مشخص نیست که هدف عنصر یا محتوای داخل آن چیست.

نقطه مقابل یک عنصر عمومی ، یک عنصر معنایی است ، عنصری که برچسب‌های آن معنای عنصر را منتقل می‌کند. بیشتر عناصر HTML معنایی هستند مانند : تگ های <p> ، <em> ، <h1> تا <h6> ، و <button> چند نمونه رایج هستند. عناصر معنایی تفسیر صفحه وب شما را برای خزنده‌های موتورهای جستجو، فناوری‌های کمکی مانند صفحه‌خوان‌ها و توسعه‌دهندگان وب آسان‌تر می‌کنند و بسیار مرتب‌تر از هزارتوی تگ‌های بی‌معنای <div> و <span> هستند.

هر زمان که می‌خواهید یک div یا span را برای بخش‌هایی از صفحه خود در نظر بگیرید، ابتدا در نظر بگیرید که آیا یک عنصر HTML معنایی مناسبی وجود دارد که بتوانید از آن استفاده کنید. HTML5 چندین جایگزین div در سطح بلوک را معرفی کرد که برای مناطق معمولی صفحه مفید هستند، از جمله <header> ، <footer> ، <nav> و <main> . همچنین عناصر درون خطی معنایی برای متن مانند <strong> ، <em> (تأکید)، <code> و <q> (نقل قول) وجود دارد .

تفاوت این دو تگ را بدانید

Div ها و span ها از متداول ترین عناصر HTML هستند و به دلایل خوبی ، به شما اجازه می دهند صفحات HTML خود را دقیقا مطابق با مشخصات خود ساختار و استایل دهید. با این حال، هر دو هدف خاص خود را دارند و درک تفاوت‌های بین آنها تضمین می‌کند که از هر یک به درستی و تنها در صورت لزوم استفاده می‌کنید.

تفاوت ها

  • یک تگ <div> یک عنصر در سطح بلوک ایجاد می کند، در حالی که یک تگ span یک عنصر درون خطی را در بر می گیرد.
  • با وجود تفاوت‌هایشان، هر دو برای گروه‌بندی قسمت‌های مشابه برای اهداف ساختاری و/یا سبکی استفاده می‌شوند.
  • div ها و span ها دو مورد از پرکاربردترین مؤلفه های HTML هستند و دلیل خوبی هم دارند: آنها به شما اجازه می دهند صفحات HTML را دقیقاً مطابق با مشخصات خود طرح بندی و استایل بندی کنید.
  • div برای تقسیم بخش ها استفاده می شود، در حالی که span برای اعمال یک سبک به یک عنصر در یک عنصر بلوکی دیگر مانند div استفاده می شود.
  • div بخش قابل توجهی از کدهای HTML را به کار می گیرد، در حالی که span برای بخش های کوچکتر استفاده می شود.
    تگ‌های span و div برای کاهش کدنویسی تکراری استفاده می‌شوند.

با این وجود، هر یک از آنها عملکرد منحصر به فردی را انجام می دهند و تشخیص تمایز بین آنها تضمین می کند که از هر یک به درستی و تنها در صورت لزوم استفاده می کنید.

در نهایت، این شما را از سوء تفاهم و کدهای نادیده گرفته شده نجات می دهد.

درباره HTML بیشتر بخوانید و حرفه ای شوید:

می توانید در تلگرام با تیم متاوبز در ارتباط باشید.

نویسنده
Picture of مدیریت طراحی
مدیریت طراحی

نظرات

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

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

موضوعات پربیننده

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