آموزش برنامه نویسی وب و مهارتهای مرتبط

چهارشنبه ۰۸ بهمن ۱۴۰۴

Wednesday, January 28, 2026 GMT +3:30

لایه بندی در HTML با تگ div و span

در ادامه آموزش های مقدماتی آشنایی با زبان پایه برنامه نویسی وب یعنی html، این بار می خواهیم به دو تگ کلیدی، مخصوصا در زمینه لایه بندی (فرمت بندی) صفحات وب بپردازیم، این دو تگ div و span نام دارند و کمتر صفحه وبی وجود دارد که در سورس کدهای خود از آنها استفاده نکرده باشد، به طور خلاصه از div برای ایجاد بلاک های غیر هم سطح نگهدارنده (container) سایر عناصر صفحه و از span برای ایجاد بلاک های هم سطح (inline) و معمولا برای نگهداری محتوای متنی استفاده می شود که در ادامه آموزش، به طور جزئی تری با آنها آشنا خواهیم شد.

کاربرد تگ div در html

همان طور که گفتیم، تگ div در زبان html برای ایجاد بلاک ها یا لایه های نگهدارنده جهت فرمت بندی قسمت های مختلف صفحه مورد استفاده قرار می گیرد، در واقع اکثر صفحاتی که در وب مشاهده می کنیم، از بلاک هایی تو در تو تشکیل شده اند که به کمک ویژگی های css به شکل منطقی و نظم یافته ای به نظر می رسند، پیش از این طراحان وب برای رسیدن به مقاصد خود در زمینه فرمت بندی صفحات از تگ table استفاده می کردند که امروزه به دلایلی توصیه شده تنها از جداول جهت مقاصد آماری یا اطلاعاتی که نیاز به جدول بندی دارند استفاده شود نه برای فرمت بندی.
تگ div در حالت پیش فرض توسط مرورگر ها به صورت غیر هم سطح پردازش می شود، یعنی در ابتدا و انتهای آن خطی جدا کننده (به صورت فرضی) در نظر گرفته می شود، در مثال زیر با نحوه تعریف و کاربرد این تگ آشنا می شویم.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | کاربرد تگ div در html</title>
<!-- https://webgoo.ir -->
</head>
<body>
<div dir="rtl">این یک بلاک div است.</div>
</body>
</html>

توضیح:
- برای تعریف بلاک های div کافی است آنها را به صورت تگ های جفتی در html ایجاد کنید:

<div></div>

- ملاحظه می کنید که برای نمایش صحیح حروف فارسی از dir با مقادیر rtl استفاده کرده ایم، البته در کدنویسی پیشرفته، توصیه می شود در حد امکان از استایل های خطی html اجتناب شده و اینگونه تنظیمات با css انجام شود که در آموزش های مربوطه در این مورد گفته ایم.

یک مثال کاربردی با div

استفاده از تگ div در html به موارد ساده ختم نمی شود، در کدنویسی پیشرفته معمولا نیاز به تعریف بلاک های div تو در تو وجود دارد که به دلیل یکپارچه و وابسته بودن زبان های html و css در وب، برای ایجاد تنظیمات ظاهری، علاوه بر تگ div از استایل css نیز در کنار آن استفاده می شود.
در مثال کاربردی زیر، نحوه ایجاد چند بلاک div فرمت بندی شده را ملاحظه می کنید.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | کاربرد تگ div در html</title>
<!-- https://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    direction:rtl;
    font-size:12px;
}
</style>
</head>
<body>
<!-- بلاک اصلی -->
<div style="display:block; width:600px; height:auto; border:1px solid #999; background-color:#9CF; margin:0 auto; direction:rtl; padding:4px;">
بلاک div شماره 1
<!-- بلاک زیر مجموعه -->
<div style="display:inline-block; width:200px; height:200px; border:1px solid #999; background-color:#6C9; float:left; margin:4px;">
بلاک div شماره 2
</div>
<!-- بلاک زیر مجموعه -->
<div style="display:inline-block; width:200px; height:200px; border:1px solid #999; background-color:#FC0; float:left; margin:4px;">
بلاک div شماره 3
</div>
<!-- بلاک جدا کننده -->
<div style="clear:both;"></div>
<!-- بلاک زیر مجموعه -->
<div style="display:block; width:590px; height:50px; border:1px solid #999; background-color:#CCC; margin:4px;">
بلاک div شماره 4
</div>
<!-- بلاک جدا کننده -->
<div style="clear:both;"></div>
<!-- بستن بلاک اصلی -->
</div>
<hr />
با استفاده از تنظیم بلاک های div به صورت تو در تو و بهره بردن از css، طراحان وب قالب ها و طرح های خود را فرمت بندی می کنند.
</body>
</html>

پیش نمایش
توضیح:
- در کد بالا در کنار استفاده از تگ div از استایل css نیز استفاده کرده ایم، چرا که تگ های div معمولا به تنهایی قابلیت های خاصی ندارند و در کنار ویژگی های css است که قدرت و انعطاف پذیری آنها مشخص می شود.
- همان طور که در آموزش های مقدماتی css گفته ایم، استایل ها به چند صورت قابل تعریف هستند (به صورت خطی، درون صفحه ای و ایمپورت فایل خارجی در صفحه)، در اینجا برای تگ body از استایل css درون صفحه ای و برای بلاک های div از استایل های خطی استفاده کرده ایم.
- برای آشنایی با ویژگی های css، لطفا مباحث مربوط به آموزش های آن را ملاحظه کنید.

کاربرد تگ span در html

تگ span در صفحات وب کاربردهای خاصی دارد، به طور مثال از آنجایی که این تگ توسط مرورگرها به طور پیش فرض به صورت بلاک های هم سطح یا inline تفسیر می شود (یعنی اگر از تگ span در کنار سایر عناصر استفاده کنیم، در یک سطح با آنها قرار می گیرد و به طور مثال به پائین سایر بلاک ها منتقل نمی شود)، برای نمایش دکمه های صفحه به صفحه، برجسته کردن (highlight) بخشی از یک متن به فرض در هنگام جستجو و... کاربرد دارد.
ویژگی های تگ span با استفاده از خاصیت های css کامل می شود که در زیر نمونه ای از آن را ملاحظه می کنید.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | کاربرد تگ span در html</title>
<!-- https://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
.paged{
    display:inline-block;
    padding:4px;
    border:1px solid #09C;
    margin:2px;
    text-align:center;
}
.light{
    color:#69F;
    text-decoration:blink;
}
</style>
</head>
<body>
<span class="paged">صفحه 1</span>
<span class="paged">صفحه 2</span>
<span class="paged">صفحه 3</span>
<span class="paged">صفحه 4</span>
<span class="paged">صفحه 5</span>
<span class="paged">صفحه 6</span>
<hr />
تگ <span class="light">span</span> به طور پیش فرض به صورت هم سطح یا inline پردازش می شود و به این دلیل در برخی موارد بهترین گزینه برای طراحان وب است.
</body>
</html>

پیش نمایش
توضیح:
- مانند تگ div، تگ span نیز قابلیت های css را به خوبی می پذیرد و می توان به کمک آن به اهداف خود در طراحی وب دست یافت.
- در کد بالا از کلاس های css برای ایجاد قابلیت های ظاهری تگ span استفاده کرده ایم، دلیل این کار این است که تگ های html به خودی خود معمولا توانایی ایجاد جلوه ها و تنظیمات پیشرفته را ندارند و باید در کنار آنها از css استفاده شود.
- در مثال بالا دو کاربرد رایج از تگ span را ملاحظه می کنید، دکمه های هم سطح و همچنین برجسته کردن بخشی از یک متن با رنگ و ویژگی خاص.

دسته بندی: آموزش مقدماتی » HTML

برچسب ها: HTML - طراحی وب

قبلی »

« بعدی

مطالب بیشتر:
کاربرد تگ img و نمایش تصاویر در HTML
ایجاد جدول با تگ table در HTML
آشنایی با مفهوم Semantic در HTML
تگ های اصلی و کلیدی HTML
کاربرد تگ font و ویژگی های فونت در HTML

دیدگاه

۳۷ دیدگاه برای این مطلب ارسال شده است.

چینش دیدگاه ها به ترتیب از جدیدترین به قدیمی ترین است.

جواد

۱۲:۵۷ ۱۳۹۲/۱۰/۰۵

با سلام و تشکر
موفق باشید.

مجتبی

۱۱:۵۱ ۱۳۹۲/۰۹/۲۲

سلام
کد span و div دقیقا به چه دردی می خورد!!
یعنی فقط برای اینه که class توی صفحه ایجاد کنیم!!؟؟

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

حسین

۱۴:۳۰ ۱۳۹۲/۰۹/۰۹

سلام
اگه ممکنه در مورد صحفه بندی سایت بیشتر توضیع دهید
که چطوره میشه توی یه صفحه مثلا 5 تا مطلب گذاشت.
اگر هم یه مثال بزنید که خیلی عالیه
واقعا خسته نباشید سایت خوبی دارین

سلام
منظورتان از صفحه بندی مشخص نیست، اگر منظور کدنویسی بخش صفحه بندی است که باید با یک زبان سمت سرور (مانند PHP) و پایگاه داده آشنا باشید تا بتوانید این سیستم را طراحی کنید، اما اگر منظور صفحه بندی با سیستم های مدریت محتوای موجود یا سیستم وبلاگ ها است، در این صورت هر CMS یا سرویس وبلاگی امکانات خاص خودش را دارد که باید به انجمن های مربوط به آن مراجعه نمائید.

reza

۱۸:۲۳ ۱۳۹۲/۰۸/۰۷

با عرض سلام و تشکر بابت آموزش های بسیار خوبتون
این بلاک بندیهایی که انجام دادین خاصیت border-radius تو مرور گر ie کار نمیکنه البته از pie.htc استفاده کردم ولی جواب نمیده .
ممنون میشم اگر پاسخ بدین

سلام
- در هنگام آدرس دهی به فایل pie.htc، از آدرس کامل استفاده کنید.
- تکه کد زیر را به استایل عنصر مورد نظر اضافه کنید:

position: relative;
z-index: 0;

خلیل

۲۱:۴۴ ۱۳۹۲/۰۷/۲۵

خیلی ممنون خیلی جالب بود ممنون

حمید

۱۶:۵۶ ۱۳۹۲/۰۷/۲۴

ممنون از مطالب واقعا مفیدتون
میشه توضیح بدید با چه دستوری میشه طول صفحه رو مشخص کرد یعنی مثلا اسکرول موس تا چه حد پایین میاد مثل همین صفحه که تا یه حدی اومده پایین و بقیه اش رفته به صفحه ی دوم

ارتفاع صفحه را با جاوا اسکریپت می توان به دست آورد، اما مورد مد نظر شما با این روش طراحی نمی شود، بلکه با استفاده از PHP و MySQL است و مبنا، تعداد آیتم ها است، نه الزاما ارتفاع صفحه، به فرض اگر تعداد نظرات بیش از 15 مورد بود، لینک به صفحه دوم ایجاد شود و...

محمدحسین

۱۸:۰۸ ۱۳۹۲/۰۵/۰۸

سلام
با تشکر از زحماتت
یک لطف می کنی برای ساختن کلید یا لینک برای صفحات وب کمک کنی یعنی کدش رو برام بگی
ممنون می شم

سلام
منظورتان از کلید را متوجه نشدیم، اما لینک را با تگ a می توانید تعریف کنید، مثال:

<a href="http://webgoo.ir" title="وبگو" target="_blank">آموزش برنامه نویسی و مهارتهای وب</a>

orkideh

۱۰:۱۹ ۱۳۹۲/۰۴/۲۵

مرسییییییییییییییییی! عالی بود. ممنون

رضا حموله

۱۷:۳۸ ۱۳۹۲/۰۴/۲۰

از مطالبتون خیلی استفاده می کنم و حتا برای مطالبی که از قدیم بلدم کاربردهای جدید پیدا می کنم. موفق باشین

حدیث

۱۹:۵۹ ۱۳۹۲/۰۲/۲۲

عالی بود خیلی بدردم خورد

پویا

۱۴:۱۰ ۱۳۹۲/۰۲/۱۰

با سلام
میخواستم تشکر کنم از سایت خوب و آموزنده شما

parisa

۱۱:۵۵ ۱۳۹۲/۰۱/۳۱

سلام
کد ایجاد دو دایره با رنگ های مختلف را می خواستم و کد mousemove هنگامی که صفحه کاملا خالی می باشد و با حرکت موس روی صفحه صفحه تغییر کرده و صفحه جدیدی نمایش دهد واقعا سایت خوبی دارید اگر راهنماییم کنید ممنون می شوم

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

سارا

۱۸:۲۴ ۱۳۹۲/۰۱/۱۹

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

سلام
استفاده از فونت فارسی در وب دو حالت دارد:
- استاندارد
- فونت های سفارشی
در حالت استاندارد از فونت هایی که در تمام سیستم ها به صورت پیش فرض پشتیبانی می شود استفاده می کنیم، مانند Tahoma یا Arial که به اصطلاح به آنها فونت های امن وب می گویند.
در حالت سفارشی از قابلیت font-face@ در css3 استفاده می شود که در آن می توان از هر فونتی (پس از تبدیل) در وب استفاده کرد و محدودیتی از این نظر نیست، اما معمولا فونت BYekan بیشترین طرفدار را در این زمینه دارد، که البته این به زمینه فعالیت سایت نیز بستگی دارد.

مسعود

۱۲:۳۰ ۱۳۹۲/۰۱/۰۸

ممنون از سایت خوبتون
مطالبتون خیلی آموزنده و کاربردی هست

محمد

۱۶:۴۰ ۱۳۹۱/۱۲/۰۳

کامل نبود !

آموزش در حدی که به تگ div و span مربوط می شود مناسب است، برای اطمینان مجددا بازنگری شد.

صفحه 2 از 3

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