آخرین بازبینی: ۱۴۰۰/۱۲/۰۳

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

دو تگ div و span در HTML از پرکاربردترین تگ‌ها به شمار می‌روند. این دو تگ از جمله تگ‌هایی هستند که صرفا برای قالب‌بندی کاربرد دارند و از نظر موتورهای جستجو و مرورگرهای وب مفهوم خاصی ندارند.

به عبارت دیگر متخصصان طراحی سایت برای اینکه بتوانند شکل و طرح مورد نظر خود را در صفحات وب پیاده‌سازی کنند و در عین حال مفهوم محتوا را هم تغییر ندهند، ممکن است بخواهند از این تگ‌ها بیشتر از سایر تگ‌ها استفاده کنند.

۱- تگ div

تگ div برای ایجاد ناحیه‌های block یا جعبه‌ای کاربرد دارد. ناحیه‌های block، بخش‌هایی از صفحه هستند که به صورت کامل عرض صفحه را پر می‌کنند و اگر متنی داخل آن‌ها نوشته شود با متن‌های قبلی و بعدی در یک خط قرار نمی‌گیرد. بسیاری از تگ‌های HTML مثل پاراگراف‌ها( p ) و جدول‌ها( table ) و عنوان‌ها( h1-h6 ) این ویژگی را دارا می‌باشند ولی اغلب آن‌ها دارای مفهوم نیز هستند و ممکن است روی عملکرد سئو سایت اثرگذار باشند.

مثال استفاده از تگ div

<div>این متن در خط اول دیده می‌شود</div>
<div>این متن در خط دوم دیده می‌شود</div>
<div>این نوشته هم همین ویژگی را دارد</div>

<div>این نوشته هم همین ویژگی را دارد</div>

با تعیین شناسه( id ) یا کلاس( class ) و کمک گرفتن از CSS، می‌توان شکل ظاهری این بخش‌های صفحه را تغییر داد:

<style>
	div#line1 {
		color: red;
	}
	
	div#line2 {
		color: green;
	}
</style>

<div id="line1">خط اول قرمز دیده می‌شود</div>
<div id="line2">خط دوم سبز دیده می‌شود</div>

<style>

div#line1 {

color: red;

}

div#line2 {

color: green;

}

</style>

علت اینکه تگ div به صورت block دیده می‌شود این است که در CSS پیش‌فرض مرورگرها، صفت display برای آن با «block» مقدار‌دهی شده است. هنگام طراحی سایت واکنش‌گرا یا در شرایط دیگر، ممکن است بخواهید این ویژگی را نیز تغییر دهید:

<style>
	div.inline {
		display: inline;
	}
</style>

<div class="inline">‌های این قسمت در ادامه‌ی</div>
<div class="inline">یکدیگر دیده می‌شوند</div>
<div class="inline">و هر کدام در یک خط نخواهند بود</div>

<style>

div.inline {

display: inline;

}

</style>

<div class="inline">‌های این قسمت در ادامه‌ی</div>

<div class="inline">یکدیگر دیده می‌شوند</div>

<div class="inline">و هر کدام در یک خط نخواهند بود</div>

۲- تگ span

تگ span از نظر کاربرد و عملکرد شباهت‌های زیادی با div دارد. با این تفاوت که در CSS مرورگر، مقدار صفت display برای آن با «inline» مقداردهی شده است.

یکی از کاربردهای اصلی span هنگامی است که می‌خواهید یک کلمه یا چند کلمه از میان متن را انتخاب کنید و شکل نمایش آن را تغییر دهید:

<style>
	span.important {
		font-weight: bold;
		color: red;
	}
</style>

استفاده از تگ‌های دارای مفهوم در طراحی سایت به ویژه
<span class="important">تگ‌های پاراگراف</span>
و
<span class="important">تگ‌های عنوان</span>
به بهبود وضعیت سئو سایت شما کمک می‌کند.

<style>

span.important {

font-weight: bold;

color: red;

}

</style>

استفاده از تگ‌های دارای مفهوم در طراحی سایت به ویژه

<span class="important">تگ‌های پاراگراف</span>

<span class="important">تگ‌های عنوان</span>

به بهبود وضعیت سئو سایت شما کمک می‌کند.

همان طور که در مورد تگ div نیز گفته شد، ممکن است بخواهید به شکل زیر، مقدار صفت display را برای span تغییر دهید:

<span style="display: block">این متن در یک خط مجزا نمایش داده می‌شود</span>
<span style="display: block">همچنین این خط</span>

1 2	<span style="display: block">این متن در یک خط مجزا نمایش داده می‌شود</span> <span style="display: block">همچنین این خط</span>

نکات سئو مربوط به استفاده از تگ‌های div‌ و span

استفاده‌ی نابجا و بیش از اندازه از هر یک از تگ‌های HTML باعث افزایش حجم سایت و مهم‌تر از آن، افزایش بار پردازشی برای نمایش سایت می‌شود که مستقیما اثر منفی روی سئو سایت برجای می‌گذارد.

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

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

۱- تگ div

مثال استفاده از تگ div

۲- تگ span

نکات سئو مربوط به استفاده از تگ‌های div‌ و span

بیشتر بخوانید:

دیدگاهتان را بنویسید لغو پاسخ