بخش‌بندی محتوا
بخش‌بندی محتوا: section، article، aside، main – نظم در محتوا! 🗂️
سلام به همه طراحان و توسعه‌دهندگان عزیز! در فصل‌های قبلی با بخش‌های اصلی مثل سربرگ، ناوبری و پاورقی آشنا شدیم. اما حالا وقتشه بریم سراغ قلب تپنده صفحه؛ یعنی خود محتوا! HTML5 تگ‌های فوق‌العاده‌ای برای بخش‌بندی معنایی محتوا به ما داده که باعث می‌شه هم کد ما مرتب‌تر بشه و هم برای موتورهای جستجو و ابزارهای کمکی قابل فهم‌تر.
استفاده درست از این تگ‌ها، مثل چیدن مرتب کتاب‌ها روی قفسه است؛ هم پیدا کردنشون راحته، هم نظم کلی رو حفظ می‌کنه!
۱. تگ <main>: محتوای اصلی صفحه 🌟
تگ <main> برای مشخص کردن محتوای اصلی و منحصر به فرد هر صفحه استفاده می‌شه. این تگ باید محتوایی رو در بر بگیره که در هیچ صفحه دیگه‌ای از سایت تکرار نمی‌شه. مثلاً متن اصلی یک مقاله، جزئیات یک محصول، یا فرم اصلی یک صفحه.
قوانین مهم:
- هر صفحه فقط باید یک تگ <main> داشته باشه.
- محتوای تکراری مثل هدر، فوتر، سایدبار و منوهای ناوبری نباید داخل <main> قرار بگیرن.
<body>
<header>...</header>
<nav>...</nav>
<main> <!-- محتوای اصلی صفحه -->
<article>
<h2>عنوان مقاله</h2>
<p>اینجا متن اصلی مقاله قرار می‌گیرد.</p>
</article>
<section>
<h3>نکات تکمیلی</h3>
<p>توضیحات بیشتر...</p>
</section>
</main>
<footer>...</footer>
</body>
۲. تگ <article>: محتوای مستقل و قابل توزیع 📰
تگ <article> برای محتوایی استفاده می‌شه که به تنهایی معنا داره و می‌تونه به طور مستقل توزیع یا بازنشر بشه. مثل:
- یک پست وبلاگ
- یک خبر
- یک کامنت در سایت
- یک کارت محصول در فروشگاه
- یک دستور پخت
نکته: یک <article> می‌تونه شامل <header>، <footer> و <section> های داخلی خودش باشه.
<article>
<header>
<h3>چگونه HTML یاد بگیریم؟</h3>
<p>منتشر شده در: 1403/03/15</p>
</header>
<p>این مقاله راهنمایی جامع برای شروع یادگیری HTML است...</p>
<section>
<h4>منابع پیشنهادی:</h4>
<ul>
<li>مستندات MDN</li>
<li>دوره آنلاین X</li>
</ul>
</section>
<footer>
<p>توسط: تیم آموزشی</p>
</footer>
</article>
۳. تگ <section>: بخش‌بندی منطقی محتوا 🗂️
تگ <section> برای گروه‌بندی موضوعی محتوا در یک صفحه به کار می‌ره، زمانی که هیچ تگ معنایی مناسب‌تری مثل <article> یا <aside> وجود نداره. معمولاً هر <section> باید یک عنوان (Heading) داشته باشه تا ماهیتش مشخص بشه.
مثال: بخش “درباره ما” در یک صفحه، بخش “خدمات” در صفحه اصلی، بخش “نظرات کاربران” در یک صفحه محصول.
<section>
<h2>خدمات ما</h2>
<p>ما خدمات متنوعی در زمینه طراحی وب ارائه می‌دهیم:</p>
<ul>
<li>طراحی وب‌سایت</li>
<li>بهینه‌سازی SEO</li>
<li>مشاوره فنی</li>
</ul>
</section>
۴. تگ <aside>: محتوای جانبی یا اطلاعات اضافی 📌
تگ <aside> برای محتوایی استفاده می‌شه که به طور مستقیم به محتوای اطرافش (معمولاً محتوای اصلی صفحه) مربوطه، اما می‌تونه بدون اون هم معنای خودش رو داشته باشه. مثل:
- سایدبار (Sidebar) شامل لینک‌های مرتبط، تبلیغات، یا اطلاعات تکمیلی
- باکس نقل قول (Quote) که به طور برجسته نمایش داده می‌شه
- جعبه اطلاعات مرتبط با یک کلمه یا مفهوم
<main>
<article>
<p>متن اصلی مقاله...</p>
</article>
<aside>
<h4>اطلاعات مرتبط:</h4>
<p>این بخش اطلاعات جانبی در مورد موضوع مقاله ارائه می‌دهد.</p>
<a href="#">لینک به مطلب دیگر...</a>
</aside>
</main>
تگ <div> هنوز هم کاربرد داره، اما باید زمانی استفاده بشه که هیچ تگ معنایی دیگه‌ای برای گروه‌بندی محتوا مناسب نیست. تگ‌های معنایی مثل <section> و <article> به صفحه شما هویت و ساختار بهتری می‌دن.
با یادگیری و استفاده درست از این چهار تگ کلیدی (<main>, <article>, <section>, <aside>)، می‌تونید محتوای صفحات وب خودتون رو به شکلی بسیار منظم، معنایی و حرفه‌ای سازماندهی کنید. موفق باشید! 🚀