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

عناصر معنایی HTML

دیگر div جعبهٔ عمومی و class/id قلاب‌اند. معنایی منطقه را با معنا نام می‌گذارد — بنر، ناوبری، محتوای اصلی — تا بدون حدس از CSS، نقشهٔ صفحه خوانا باشد.

معنا پیش از جعبه

CSS هر تگ را ستون می‌کند؛ به همین خاطر مبتدی div زیاد می‌گذارد. تگ معنایی layout را جایگزین نمی‌کند؛ قصد را مستند می‌کند. ناوبری عمده → nav. داستان یکتای این URL → main. کارت مستقل → article. فقط پوشش استایل بدون نقش → div.

پاسخ مستقیم

وقتی معنا جور است از header، nav، main، article، section، aside، footer استفاده کنید. یک main اصلی در صفحه. تو در تو با دقت — nav داخل header رایج است؛ کل سایت داخل یک article نه. class/id همچنان روی این تگ‌ها کار می‌کنند.

📊 Core landmarks

Element	Typical meaning
header	Introductory or banner content for a page or section
nav	Major navigation links
main	Dominant unique content of this page
article	Independent composition (post, story, card that could stand alone)
section	Thematic grouping, usually with a heading
aside	Side note related to the surrounding content
footer	Closing content for a page or section

اسکلت سادهٔ صفحه

بنر و لینک بالا، محتوای یکتا در main، اطلاعات پایانی در footer.

Simple semantic skeleton

html

HTML Code

<body>
<header>
<h1>City Guide</h1>
<nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
</nav>
</header>
<main>
<h2>Welcome</h2>
<p>Explore the city with clear HTML structure.</p>
</main>
<footer>
<p>All rights reserved.</p>
</footer>
</body>

خواندن اسکلت

header عنوان و اغلب nav
nav برای لینک‌های عمده
یک main در صفحه
footer برای بستن
heading داخل landmark هنوز مهم است

article، section و aside

داخل main: article برای قطعهٔ مستقل، section با heading موضوعی، aside برای نکتهٔ مرتبط.

Article section and aside

html

HTML Code

<main>
<article>
<h2>Weekend markets</h2>
<section>
<h3>Saturday</h3>
<p>Fresh fruit stalls open at 8:00.</p>
</section>
<section>
<h3>Sunday</h3>
<p>Craft vendors join the square.</p>
</section>
</article>
<aside>
<h2>Tip</h2>
<p>Arrive early for the best produce.</p>
</aside>
</main>

خواندن article / section / aside

article می‌تواند مستقل بخواند
هر section heading موضوعی دارد
aside tip است نه main دوم
برای فقط ستون layout هنوز div مجاز است

انتخاب landmark در برابر div

نقش استاندارد دارد؟ → landmark. فقط پوشش flex/grid؟ → div. برای «شکیل بودن» تگ تصادفی نپاشید.

تمرین

صفحه با header/nav/main/footer
داستان فقط در main
یک article با heading
اختیاری aside
دقیقاً یک main
جمله: کی هنوز div؟

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

چند main
section بدون موضوع/heading
کل سایت در یک article
هر فهرست لینک = nav
تعویض تصادفی همهٔ divها

خلاصه

معنایی = نام معنا، نه فقط جعبه
landmarks اصلی را بشناسید
یک main
landmark وقتی نقش جور است؛ div برای پوشش ناشناس
بعدی: چیدمان کامل‌تر صفحه

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

آماده شروع

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

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

❓

سوالات

🎯

70%

برای قبولی

♾️

∞

زمان

🔄

∞

تلاش‌ها

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

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

زبان