چگونه از عناصر Span و Div HTML استفاده کنیم

استفاده از span و div با CSS برای سبک بیشتر و کنترل طرح.

بسیاری از افرادی که برای طراحی وب و HTML / CSS جدید هستند، عناصر و

را به طور تعویض می کنند از آنجا که صفحات وب را ایجاد می کنند. واقعیت این است که هر یک از این عناصر HTML به مقاصد مختلف اهدا می شود. یادگیری استفاده از هر کدام برای اهداف مورد نظر شما به شما کمک می کند صفحات وب پاک کننده ای را ایجاد کنید که کد به راحتی به طور کلی مدیریت می شود.

با استفاده از عنصر

عنصر div تعریف منطقی را در صفحه وب شما تعریف می کند.

این اساسا یک جعبه است که در آن شما می توانید سایر عناصر HTML را که منطقی با هم قرار دارند قرار دهید. تقسیم می تواند عناصر دیگری را در آن داشته باشد، مانند پاراگراف ها، عنوان ها، لیست ها، پیوندها، تصاویر و غیره. همچنین می توانید بخش های دیگری را درون آن ایجاد کنید تا ساختار و سازمان بیشتری را در سند HTML خود داشته باشید.

برای استفاده از عنصر div، یک تگ باز

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

محتویات div

اگر ناحیه صفحه شما نیاز به برخی اطلاعات اضافی داشته باشد که بعدا با CSS سبک می شود، می توانید یک شناسه انتخاب کنید (به عنوان مثال

id = "myDiv">) یا انتخاب کلاس (به عنوان مثال class = "bigDiv">). هر دو از این ویژگی ها می توانند با استفاده از CSS انتخاب شوند یا با استفاده از جاوا اسکریپت اصلاح شوند. بهترین شیوه های فعلی به جای استفاده از شناسه ها به استفاده از select select ها بستگی دارد به این دلیل که انتخابگرهای ID خاص هستند. در حقیقت، با این حال، شما می توانید از هر یک از آنها استفاده کنید و حتی می توانید تقسیم هر دو شناسه و یک انتخاب کلاس.

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

در مقابل <بخش>

عنصر div با عنصر بخش HTML5 متفاوت است، زیرا محتوای محصور به معنای معنایی معنا ندارد. اگر مطمئن نیستید که آیا بلوک محتوا باید یک div یا یک بخش باشد، در مورد اینکه هدف عنصر و محتوا به شما کمک کند تصمیم بگیرید که چه استفاده کنید، فکر کنید:

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

در نهایت، هر دو div ها و بخش ها کاملا مشابه عمل می کنند و شما می توانید هر یک از آنها ارزش های خود را مشخص کنید و آنها را با CSS سبک کنید تا نگاهی به سایت شما که نیاز دارید ظاهر شود. هر دو این عناصر سطح بلوک هستند.

با استفاده از عنصر

عنصر span عنصر خطی به طور پیش فرض است. این مجموعه آن را از عناصر div و section جدا می کند. عنصر span اغلب برای پوشاندن یک قطعه خاص از محتوا، به طور معمول متن استفاده می شود، به آن یک "قلاب" اضافی می دهد که می تواند بعدا مدل دهید. با CSS مورد استفاده قرار می گیرد، می تواند سبک متن که محصور شده است را تغییر دهد؛ با این حال، بدون هیچ گونه خصیصه سبک، عنصر span تنها بر متن تاثیری ندارد.

این تفاوت اصلی بین طول و عناصر div است. همانطور که در بالا ذکر شد، عنصر div شامل یک پاراگراف، در حالی که عنصر span تنها به مرورگر می گوید که قوانین سبک CSS مربوط به آنچه که توسط برچسب محصور شده است، اعمال می شود:


متن برجسته و متن غیر برجسته شده

CSS (به عنوان مثال، class = "highlight">) کلاس class = "برجسته" یا کلاس دیگر را به عنصر span اضافه کنید.

عنصر span دارای صفات مورد نیاز نیست، اما سه مورد که بیشتر مفید هستند همانند عناصر div هستند:

  • سبک
  • کلاس
  • شناسه

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

به عنوان مثال، اگر شما می خواهید کلمه دوم یک عنوان h3 قرمز باشد، می توانید این کلمه را با عنصر span که این کلمه را به صورت متن قرمز می بینید، احاطه کرده و آن را احاطه کرده باشید. کلمه هنوز بخشی از عنصر h3 است، اما در حال حاضر نیز در قرمز نمایش داده می شود:

این عنوان بسیار معروف من است

ویرایش شده توسط Jeremy Girard در 2/2/17