generic container چیست

اچ تی ام ال - HTML

هر تگ HTML معنا و مفهومی به محتوای درون خود میدهند. اما دو تگ div و span از این امر مستثنا هستند. این تگها بدین خاطر وجود دارد که بتوان با کمک CSS به آنها استایل داد و یا با کمک اتریبیوت های class و id در JavaScript آنها را صدا زد.

همانطور که در بالا مشاهده کردید تگهای generic container هم بصورت بلاک و هم بصورت اینلاین هستند. این تگها تنها برای استایل دادن با CSS استفاده میشوند.

مطالعه بیشتر: اتریبیوت های زبان HTML

مطالعه بیشتر: اتریبیوت class

مطالعه بیشتر: اتریبیوت id

تگ div

تگ div درواقع یک ظرف کلی یا generic container است. دلیل اینکه چرا یک ظرف است این است که تگ div بصورت پیش فرض block است. المان div همانند هر المان بلاک دیگر، در سطر جدید آغاز میشود.

مطالعه بیشتر: المان های Block و Inline

مطالعه بیشتر: المان های بلاک (block) و اینلاین (inline) در زبان HTML

 
<!DOCTYPE html>
<html>
  <head>Div</head>
  <body>
    <div>Division 1</div>
    <div>Division 2</div>
    <div>Division 3</div>
  </body>
</html>

تگ span

المان span همانند المان div رفتار میکند، با این تفاوت که این المان inline است. بدین معنا که المان اینلاین در خط جدید شروع نمیشود.

 
<!DOTYPE html>
<html>
  <head>
    <title>Span</title>
  </head>
  <body>
    <p>The <span class="space">Solar System</span> is a coll place/</p>
  </body>
</html>

شما میتوانید به کلاس space استایل بدهید و کلمه "Solar System" را زیبا کنید.

چه موقع از این تگ ها استفاده کنیم؟

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

محمد صالح کاتبی بیست و نهم آپریل 2020

نوشتن دیدگاه

JComments

مقالات طراحی سایت