چرا فقط div کافی نیست؟ HTML معنادار

یک <div> یک جعبه‌ی خالی است؛ هیچ معنایی ندارد. می‌توانی کل یک صفحه را فقط با <div> بسازی و در مرورگر هم درست به‌نظر برسد. ولی «درست به‌نظر رسیدن» تنها بخشی از ماجراست. مرورگر تنها کسی نیست که صفحه‌ات را می‌خواند؛ screen readerها، موتورهای جستجو و خودِ تو در آینده هم آن را می‌خوانند — و برای آن‌ها یک تلِ <div> تقریباً بی‌معنی است.

مشکلِ «همه‌چیز div»

فرض کن بالای صفحه لوگو و منو داری، وسط صفحه متن اصلی، و پایین صفحه اطلاعات تماس. اگر همه‌ی این‌ها را با <div> بسازی، هر سه یک‌شکل‌اند: سه جعبه‌ی خالی که فقط با اسم class از هم جدا می‌شوند. کسی که کد را نمی‌بیند — مثلاً یک screen reader — هیچ راهی ندارد بفهمد کدام بخش منوی اصلی است و کدام محتوای اصلی.

قبل و بعد

حالت اول را ببین: بالای صفحه را با <div class="header">، منو را با <div class="nav"> و متن اصلی را با <div class="main"> می‌سازی. این‌ها کار می‌کنند، ولی آن اسم class فقط برای توست؛ مرورگر و screen reader آن را نمی‌فهمند.

حالا حالت دوم: به‌جای هرکدام، همان <header>، <nav> و <main> را می‌گذاری. ظاهرِ صفحه هیچ فرقی نمی‌کند، ولی حالا هر بخش می‌گوید که چیست. به همین می‌گویند semantic: HTML‌ای که معنا دارد، نه فقط شکل.

هر tag یک معنا

چند tag پرکاربرد و کاری که معنایشان را می‌رساند:

• <header> — بالای صفحه یا بالای یک بخش؛ معمولاً لوگو و عنوان.
• <nav> — بخش پیمایش، یعنی مجموعه‌ی لینک‌های اصلی صفحه.
• <main> — محتوای اصلی صفحه؛ در هر صفحه فقط یکی.
• <section> — یک بخشِ مستقلِ موضوع‌دار از صفحه.
• <article> — محتوایی که به‌تنهایی هم کامل است، مثل یک پست وبلاگ.
• <footer> — پایین صفحه؛ معمولاً حق نشر و لینک‌های فرعی.

سه کسی که ازش سود می‌برند

screen readerها. کسی که با screen reader صفحه را می‌شنود، می‌تواند مستقیم بپرد به <main> و از رد شدن از منو در هر صفحه خلاص شود. با تلِ <div> این میان‌بر اصلاً وجود ندارد.

موتورهای جستجو. وقتی گوگل می‌بیند محتوای اصلی داخل <main> و <article> است، بهتر می‌فهمد صفحه درباره‌ی چیست و مهم‌ترین بخشش کجاست.

خودت، سه ماه بعد. وقتی به کد قدیمی‌ات برمی‌گردی، <footer> در یک نگاه معنایش روشن است؛ ولی <div class="f2"> را باید حدس بزنی.

پس قانون ساده این است

اول بپرس «این بخش چیست؟» و اگر یک tag با همان معنا وجود دارد، همان را به‌کار ببر. <div> بد نیست؛ فقط باید آخرین انتخاب باشد، برای وقتی که واقعاً هیچ معنای خاصی در کار نیست و فقط به یک جعبه برای چیدمان نیاز داری. جالب این‌جاست که ظاهر صفحه با هیچ‌کدام از این‌ها عوض نمی‌شود — رنگ و چیدمان کارِ CSS است، نه این tagها. (اگر فرق این دو برایت روشن نیست، نوشته‌ی HTML و CSS چه فرقی دارند؟ را ببین.)

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