[{"data":1,"prerenderedAt":13},["ShallowReactive",2],{"blog:semantic-html":3},{"category":4,"cover_image":5,"html":6,"published_at":7,"seo_description":8,"seo_title":9,"slug":10,"sort_order":11,"title_fa":12},"web-basics","\u002Fblog\u002Fsemantic-html.jpg","\u003Cp>یک \u003Ccode dir=\"ltr\"><div>\u003C\u002Fcode> یک جعبه‌ی خالی است؛ هیچ معنایی ندارد. می‌توانی کل یک صفحه را فقط با \u003Ccode dir=\"ltr\"><div>\u003C\u002Fcode> بسازی و در مرورگر هم درست به‌نظر برسد. ولی «درست به‌نظر رسیدن» تنها بخشی از ماجراست. مرورگر تنها کسی نیست که صفحه‌ات را می‌خواند؛ screen readerها، موتورهای جستجو و خودِ تو در آینده هم آن را می‌خوانند — و برای آن‌ها یک تلِ \u003Ccode dir=\"ltr\"><div>\u003C\u002Fcode> تقریباً بی‌معنی است.\u003C\u002Fp>\n\u003Ch2>مشکلِ «همه‌چیز div»\u003C\u002Fh2>\n\u003Cp>فرض کن بالای صفحه لوگو و منو داری، وسط صفحه متن اصلی، و پایین صفحه اطلاعات تماس. اگر همه‌ی این‌ها را با \u003Ccode dir=\"ltr\"><div>\u003C\u002Fcode> بسازی، هر سه یک‌شکل‌اند: سه جعبه‌ی خالی که فقط با اسم class از هم جدا می‌شوند. کسی که کد را نمی‌بیند — مثلاً یک screen reader — هیچ راهی ندارد بفهمد کدام بخش منوی اصلی است و کدام محتوای اصلی.\u003C\u002Fp>\n\u003Ch2>قبل و بعد\u003C\u002Fh2>\n\u003Cp>حالت اول را ببین: بالای صفحه را با \u003Ccode dir=\"ltr\"><div class=\"header\">\u003C\u002Fcode>، منو را با \u003Ccode dir=\"ltr\"><div class=\"nav\">\u003C\u002Fcode> و متن اصلی را با \u003Ccode dir=\"ltr\"><div class=\"main\">\u003C\u002Fcode> می‌سازی. این‌ها کار می‌کنند، ولی آن اسم class فقط برای توست؛ مرورگر و screen reader آن را نمی‌فهمند.\u003C\u002Fp>\n\u003Cp>حالا حالت دوم: به‌جای هرکدام، همان \u003Ccode dir=\"ltr\"><header>\u003C\u002Fcode>، \u003Ccode dir=\"ltr\"><nav>\u003C\u002Fcode> و \u003Ccode dir=\"ltr\"><main>\u003C\u002Fcode> را می‌گذاری. ظاهرِ صفحه هیچ فرقی نمی‌کند، ولی حالا هر بخش \u003Cstrong>می‌گوید که چیست\u003C\u002Fstrong>. به همین می‌گویند \u003Ccode dir=\"ltr\">semantic\u003C\u002Fcode>: HTML‌ای که معنا دارد، نه فقط شکل.\u003C\u002Fp>\n\u003Ch2>هر tag یک معنا\u003C\u002Fh2>\n\u003Cp>چند tag پرکاربرد و کاری که معنایشان را می‌رساند:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode dir=\"ltr\"><header>\u003C\u002Fcode> — بالای صفحه یا بالای یک بخش؛ معمولاً لوگو و عنوان.\u003C\u002Fli>\n\u003Cli>\u003Ccode dir=\"ltr\"><nav>\u003C\u002Fcode> — بخش پیمایش، یعنی مجموعه‌ی لینک‌های اصلی صفحه.\u003C\u002Fli>\n\u003Cli>\u003Ccode dir=\"ltr\"><main>\u003C\u002Fcode> — محتوای اصلی صفحه؛ در هر صفحه فقط یکی.\u003C\u002Fli>\n\u003Cli>\u003Ccode dir=\"ltr\"><section>\u003C\u002Fcode> — یک بخشِ مستقلِ موضوع‌دار از صفحه.\u003C\u002Fli>\n\u003Cli>\u003Ccode dir=\"ltr\"><article>\u003C\u002Fcode> — محتوایی که به‌تنهایی هم کامل است، مثل یک پست وبلاگ.\u003C\u002Fli>\n\u003Cli>\u003Ccode dir=\"ltr\"><footer>\u003C\u002Fcode> — پایین صفحه؛ معمولاً حق نشر و لینک‌های فرعی.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>سه کسی که ازش سود می‌برند\u003C\u002Fh2>\n\u003Cp>\u003Cstrong>screen readerها.\u003C\u002Fstrong> کسی که با screen reader صفحه را می‌شنود، می‌تواند مستقیم بپرد به \u003Ccode dir=\"ltr\"><main>\u003C\u002Fcode> و از رد شدن از منو در هر صفحه خلاص شود. با تلِ \u003Ccode dir=\"ltr\"><div>\u003C\u002Fcode> این میان‌بر اصلاً وجود ندارد.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>موتورهای جستجو.\u003C\u002Fstrong> وقتی گوگل می‌بیند محتوای اصلی داخل \u003Ccode dir=\"ltr\"><main>\u003C\u002Fcode> و \u003Ccode dir=\"ltr\"><article>\u003C\u002Fcode> است، بهتر می‌فهمد صفحه درباره‌ی چیست و مهم‌ترین بخشش کجاست.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>خودت، سه ماه بعد.\u003C\u002Fstrong> وقتی به کد قدیمی‌ات برمی‌گردی، \u003Ccode dir=\"ltr\"><footer>\u003C\u002Fcode> در یک نگاه معنایش روشن است؛ ولی \u003Ccode dir=\"ltr\"><div class=\"f2\">\u003C\u002Fcode> را باید حدس بزنی.\u003C\u002Fp>\n\u003Ch2>پس قانون ساده این است\u003C\u002Fh2>\n\u003Cp>اول بپرس «این بخش چیست؟» و اگر یک tag با همان معنا وجود دارد، همان را به‌کار ببر. \u003Ccode dir=\"ltr\"><div>\u003C\u002Fcode> بد نیست؛ فقط باید آخرین انتخاب باشد، برای وقتی که واقعاً هیچ معنای خاصی در کار نیست و فقط به یک جعبه برای چیدمان نیاز داری. جالب این‌جاست که ظاهر صفحه با هیچ‌کدام از این‌ها عوض نمی‌شود — رنگ و چیدمان کارِ \u003Ccode dir=\"ltr\">CSS\u003C\u002Fcode> است، نه این tagها. (اگر فرق این دو برایت روشن نیست، نوشته‌ی \u003Ca href=\"\u002Fblog\u002Fhtml-vs-css\">HTML و CSS چه فرقی دارند؟\u003C\u002Fa> را ببین.)\u003C\u002Fp>\n\u003Cp>در خودآموز \u003Ca href=\"\u002Fcourses\u002Ftaropood\">تاروپود\u003C\u002Fa> از همان اول عادت می‌کنی به‌جای جعبه‌ی خالی، درست‌ترین tag را انتخاب کنی — و در آزمایشگاه زنده می‌بینی که این عادت چطور کدت را تمیزتر و صفحه‌ات را قابل‌فهم‌تر می‌کند.\u003C\u002Fp>","2026-07-20T05:30:00Z","یک تلِ div در مرورگر درست به‌نظر می‌رسد، ولی برای screen reader و موتور جستجو بی‌معنی است. چرا tagهای semantic مثل header و main و footer بهترند؟","HTML معنادار: چرا div کافی نیست؟ | یادستان","semantic-html",150,"چرا فقط div کافی نیست؟ HTML معنادار",1784827101874]