در حال بارگذاری...

div در HTML

درس block/inline نشان داد div پیش‌فرض block است. اینجا همان جعبه به کار می‌آید: div یعنی division — ظرف ساده تقریباً بدون معنای داخلی. «ناوبری» یا «مقاله» اعلام نمی‌کند؛ فقط مارکاپ را گروه می‌کند تا استایل یا اسکریپت روی گروه اعمال شود.

چرا جعبهٔ «بی‌معنا» هنوز مفید است

صفحه قبل از یادگیری همه تگ‌های معنایی به گروه‌بندی نیاز دارد. کارت با heading و پاراگراف اغلب با div و class شروع می‌شود. class قلاب CSS است بدون عوض کردن معنا. قضاوت مهم است: div داربست است، جایگزین p/ul/h2 یا بعداً nav/section نیست.

پاسخ مستقیم

مارکاپ مرتبط را در <div>…</div> بپیچید وقتی ظرف عمومی لازم است. class (و بعداً id) برای قلاب استایل/اسکریپت بگذارید. وقتی نقش جور است تگ‌های landmark معنایی را ترجیح دهید. تودرتو را کم و هدفمند نگه دارید. div پیش‌فرض block است پس خواهرها پشته می‌شوند مگر CSS عوض کند.

یک گروه کارت

الگوی اول رایج: یک div دور heading و پاراگراف کوتاه. نام class برچسب انسان و CSS است — معنای فرزندان را عوض نمی‌کند.

Grouping with a card div

html

HTML Code

<div class="card">
<h2>Today</h2>
<p>Practice HTML containers with a simple card.</p>
</div>

خواندن نمونهٔ کارت

div بیرونی فقط جعبهٔ گروه است
h2 و p هنوز معنا دارند
class="card" قلاب استایل بعدی است
بدون div هم کار می‌کنند؛ جعبه آن‌ها را واحد استایل می‌کند
h2/p را با div خالی عوض نکنید

پوشش دور دو کارت خواهر

گاهی چند کارت را در div بیرونی می‌گذارید تا یک قانون فاصله بدهد. هر کارت داخلی div خودش را دارد. درخت خوانا بماند.

Wrapper with two cards

html

HTML Code

<div class="card-row">
<div class="card">
<h3>Lesson</h3>
<p>Read the notes once.</p>
</div>
<div class="card">
<h3>Practice</h3>
<p>Rebuild the markup from memory.</p>
</div>
</div>

خواندن نمونهٔ پوشش

card-row دو کارت را بدون landmark ویژه گروه می‌کند
هر .card heading و پاراگراف خود را دارد
دو سطح div کافی است — لایهٔ خالی اضافه نکنید
اگر ناحیه واقعاً بخش اصلی است، بعداً section/main بهتر از پوشش عمومی است

وقتی معنا هست ترجیح بدهید

div ظرف پشتیبان است نه انتخاب اول هر ناحیه. فهرست لینک ناوبری شایستهٔ nav است. بدنهٔ پست اغلب article است. تا راحت شوید، div+class داربست صادق است — یادداشت ذهنی برای ارتقا بگذارید.

تمرین در ویرایشگر

یک div.card با heading و پاراگراف بسازید.
کارت دوم را داخل div.card-row بگذارید.
به هر class نام کوتاه بدهید.
استایل کوچک روی .card یا یادداشت برای جلسه Classes.
یک کارت را ذهنی section کنید و یک جمله بنویسید.
هر div خالی «برای بعد» را حذف کنید.
سه تگی که نباید با div عوض شوند فهرست کنید.

اشتباهات آسان

سوپ div: تودرتوی بی‌هدف
div به‌جای p/ul/h2/nav
پوشش تزئینی خالی
همه متن صفحه در یک div غول‌آسا
class را جایگزین یادگیری HTML معنایی دانستن

خلاصه

div ظرف block عمومی است
برای گروه استایل/اسکریپت
تگ معنایی وقتی نقش روشن است
تودرتو کم — بدون سوپ div
با class (و بعداً id) جفت شود
بعدی: عمیق‌تر شدن class و id

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓

سوالات

🎯

70%

برای قبولی

♾️

∞

زمان

🔄

∞

تلاش‌ها

📝 دستورالعمل‌ها

هر سوال را با دقت بخوانید
بهترین پاسخ را برای هر سوال انتخاب کنید
می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
پیشرفت شما در بالا نمایش داده می‌شود

زبان