یه مقایسه‌ی کامل: وقتی همه‌چیز رو کنار هم می‌ذاریم
تو این فصل، تک‌تک تگ‌های معنایی HTML5 رو دیدیم: header، footer، main، section، article، aside، details/summary و time. حالا وقتشه یه قدم عقب‌تر بریم و یه مقایسه‌ی کامل بین ساختار قدیمی مبتنی بر div و ساختار معنایی امروزی داشته باشیم؛ این درس یه‌جورایی جمع‌بندی کل فصله.
یه صفحه‌ی کامل به روش قدیمی (فقط با div)
<body>
<div class="header">
<h1>وبلاگ فناوری</h1>
<div class="nav">
<a href="/">خانه</a>
<a href="/blog">وبلاگ</a>
</div>
</div>
<div class="main-content">
<div class="post">
<div class="post-header">
<h2>آموزش HTML5</h2>
<div class="post-date">۱۵ فروردین ۱۴۰۳</div>
</div>
<p>متن مقاله...</p>
</div>
</div>
<div class="sidebar">
<h3>مطالب مرتبط</h3>
</div>
<div class="footer">
<p>تمام حقوق محفوظ است.</p>
</div>
</body>همون صفحه با ساختار معنایی HTML5
<body>
<header>
<h1>وبلاگ فناوری</h1>
<nav>
<a href="/">خانه</a>
<a href="/blog">وبلاگ</a>
</nav>
</header>
<main>
<article>
<header>
<h2>آموزش HTML5</h2>
<time datetime="2024-04-03">۱۵ فروردین ۱۴۰۳</time>
</header>
<p>متن مقاله...</p>
</article>
</main>
<aside>
<h3>مطالب مرتبط</h3>
</aside>
<footer>
<p>تمام حقوق محفوظ است.</p>
</footer>
</body>از نظر بصری، این دو ساختار می‌تونن دقیقاً یه شکل نمایش داده بشن؛ چون ظاهر نهایی رو CSS تعیین می‌کنه، نه اسم تگ. اما از نظر معنایی، تفاوتشون از زمین تا آسمونه. بیا این تفاوت رو از زوایای مختلف بررسی کنیم.
جدول مقایسه‌ی کامل
| معیار | ساختار مبتنی بر div | ساختار معنایی HTML5 |
|---|---|---|
| فهم مرورگر و صفحه‌خوان | فقط یه ظرف خنثی می‌بینه؛ کلاس‌ها براش بی‌معنی‌ان | نقش دقیق هر بخش (سربرگ، محتوای اصلی، ناوبری) رو می‌فهمه |
| پرش مستقیم صفحه‌خوان | غیرممکن؛ باید کل صفحه رو خطی گوش داد | ممکنه؛ کاربر می‌تونه مستقیم بره سراغ main یا nav |
| فهم گوگل از اهمیت محتوا | باید حدس بزنه کدوم بخش مهم‌تره | با اطمینان بیشتری تشخیص می‌ده (مثلاً article یعنی محتوای اصلی) |
| خوانایی کد برای توسعه‌دهنده | باید کلاس‌ها رو بخونه و حدس بزنه | از روی اسم تگ، ساختار کلی فوراً مشخصه |
| ظاهر پیش‌فرض در مرورگر | معمولی و بدون استایل خاص | تقریباً یکسان با div؛ تفاوت اصلی معناییه نه ظاهری |
یه نکته‌ی مهم: این دو روش رقیب هم نیستن، مکمل هم هستن
همون‌طور که تو درس ۸-۱ هم گفتیم، div و span هنوزم جایگاه خودشون رو دارن؛ برای گروه‌بندی‌هایی که هیچ معنای ساختاری خاصی ندارن (مثلاً یه wrapper صرفاً برای اعمال یه استایل CSS خاص، بدون هیچ نقش معنایی)، div کاملاً درست و لازمه. قانون کلی همیشه همینه: اول دنبال معنایی‌ترین تگ ممکن باش؛ فقط وقتی هیچ تگ معنایی مناسبی وجود نداشت، سراغ div برو.
یه چک‌لیست برای تصمیم‌گیری سریع
وقتی داری یه بخش از صفحه رو می‌سازی، این سؤالات رو از خودت بپرس:
- آیا این بخش، سربرگ یا پابرگ یه محتواست؟ →
header/footer - آیا این بخش، محتوای اصلی و منحصربه‌فرد کل صفحه‌ست؟ →
main(فقط یک‌بار در کل صفحه) - آیا این بخش، محتوایی کاملاً مستقل و قابل‌توزیعه (مثل یه پست وبلاگ)؟ →
article - آیا این بخش، یه زیربخش موضوعی از یه محتوای بزرگ‌تره؟ →
section - آیا این بخش، محتوای جانبی و مرتبط اما غیرضروریه؟ →
aside - آیا این بخش، منوی ناوبری اصلیه؟ →
nav(از فصل ۴) - آیا این بخش، یه تاریخ یا زمانه؟ →
timeهمراه باdatetime - آیا این بخش، محتوایی‌یه که باید پیش‌فرض بسته و قابل‌بازشدن باشه؟ →
detailsوsummary - هیچ‌کدوم از موارد بالا صدق نمی‌کنه؟ →
div(یاspanبرای محتوای درون‌خطی)
یه مثال کامل و نهایی: صفحه‌ی یه فروشگاه آنلاین
<body>
<header>
<h1>فروشگاه لوازم ورزشی</h1>
<nav>
<a href="/">خانه</a>
<a href="/products">محصولات</a>
</nav>
</header>
<main>
<article>
<header>
<h2>کفش ورزشی رانینگ</h2>
<time datetime="2024-04-03">افزوده‌شده در ۱۵ فروردین</time>
</header>
<p>توضیحات کامل محصول...</p>
<section>
<h3>مشخصات فنی</h3>
<p>وزن، جنس و رنگ محصول...</p>
</section>
<details>
<summary>راهنمای سایزبندی</summary>
<p>جدول کامل سایزها...</p>
</details>
</article>
<aside>
<h3>محصولات مشابه</h3>
</aside>
</main>
<footer>
<p>تمام حقوق محفوظ است.</p>
</footer>
</body>تو این مثال نهایی، تقریباً تمام تگ‌های این فصل رو با هم ترکیب کردیم: header و footer (هم کلی، هم محلی برای article)، main (یه‌بار در کل صفحه)، article (محتوای مستقل محصول)، section (زیربخش موضوعی مشخصات فنی)، details/summary (راهنمای سایزبندی که پیش‌فرض بسته‌ست)، aside (محصولات مشابه)، nav (منو) و time (تاریخ افزوده‌شدن محصول).
چند اشتباه رایج کلی این فصل
- استفاده از div برای هر بخش، حتی وقتی یه تگ معنایی دقیقاً مناسبه.
- گیج‌شدن بین section و article، یا بین aside و section.
- استفاده از چند main در یک صفحه.
- فراموش‌کردن heading داخل section و article.
- نوشتن تاریخ به‌صورت متن ساده به‌جای استفاده از time و datetime.
بهترین روش‌های کلی این فصل
- همیشه از چک‌لیست بالا برای انتخاب تگ مناسب استفاده کن.
- به یاد داشته باش که ظاهر بصری این تگ‌ها معمولاً شبیه div هست؛ تفاوت اصلی، معناییه.
- div و span رو فقط برای مواردی نگه دار که هیچ تگ معنایی مناسبی براشون وجود نداره.
نکته‌ی سئو
یه صفحه با ساختار کاملاً معنایی (header، main، article، section، aside، footer) به گوگل تصویر بسیار روشن‌تری از اهمیت نسبی و رابطه‌ی بخش‌های مختلف صفحه می‌دهد، در مقایسه با صفحه‌ای که تماماً از div و کلاس‌های دلخواه ساخته شده است.
نکته‌ی دسترسی‌پذیری
ساختار کاملاً معنایی، مجموعه‌ای از نقاط عطف (Landmarks) قابل‌پیمایش برای کاربران صفحه‌خوان ایجاد می‌کند که به آن‌ها اجازه می‌دهد در چند ثانیه، بین بخش‌های اصلی صفحه (منو، محتوای اصلی، محتوای جانبی، پابرگ) جابه‌جا شوند؛ چیزی که با یک صفحه‌ی مبتنی بر div ساده، عملاً غیرممکن است.
جمع‌بندی
ساختار معنایی HTML5، با استفاده از تگ‌هایی مثل header، footer، main، section، article، aside، details/summary و time، به‌جای div های خنثی، معنای واقعی و نقش هر بخش از صفحه را به مرورگر، موتورهای جستجو و صفحه‌خوان‌ها منتقل می‌کند. div و span همچنان برای مواردی که هیچ تگ معنایی مناسبی وجود ندارد، جایگاه خود را حفظ می‌کنند؛ اما اصل راهنما همیشه این است: اول دنبال معنایی‌ترین گزینه باش.