[{"data":1,"prerenderedAt":259},["ShallowReactive",2],{"lesson:t1-s06-semantic":3,"course:taropood":63},{"meta":4,"prev":11,"next":15,"sections":19},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},true,6,"t1-s06-semantic","book",1,"فصل ۰۶ — اسکلت معنادار صفحه",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},5,"t1-s05-lists","فصل ۰۵ — فهرست",{"free_preview":5,"order":16,"slug":17,"source":8,"term":9,"title_fa":18},7,"t1-s07-tables","فصل ۰۷ — جدول، فقط برای داده",[20,24,27,32,35,38,41,45,48,51,54,57,60],{"kind":21,"heading":22,"html":23},"normal","در این فصل چه می‌سازی","\u003Ch2 id=\"در-این-فصل-چه-می‌سازی\">در این فصل چه می‌سازی\u003Ca class=\"head-anchor\" href=\"#%D8%AF%D8%B1-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84-%DA%86%D9%87-%D9%85%DB%8C%E2%80%8C%D8%B3%D8%A7%D8%B2%DB%8C\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>آخر این فصل یک صفحهٔ کوچک ولی واقعی داری — یک وبلاگ ساده — که هر ناحیه‌اش با اسم خودش صدا زده می‌شود: اینجا سرصفحه است، اینجا منوی اصلی، اینجا محتوای اصلی، اینجا یک مطلبِ مستقل، اینجا حاشیه، اینجا پاصفحه. از بیرون شبیه هر صفحهٔ دیگری است، ولی از تویش، مرورگر و موتور جست‌وجو و screen reader دقیقاً می‌دانند هر تکه \u003Cstrong>چیست\u003C\u002Fstrong>.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F01-image-semantic-regions.09d6d3fb97.160.webp 160w, \u002F_img\u002F01-image-semantic-regions.09d6d3fb97.320.webp 320w, \u002F_img\u002F01-image-semantic-regions.09d6d3fb97.640.webp 640w, \u002F_img\u002F01-image-semantic-regions.09d6d3fb97.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F01-image-semantic-regions.09d6d3fb97.1280.jpg\" srcset=\"\u002F_img\u002F01-image-semantic-regions.09d6d3fb97.160.jpg 160w, \u002F_img\u002F01-image-semantic-regions.09d6d3fb97.320.jpg 320w, \u002F_img\u002F01-image-semantic-regions.09d6d3fb97.640.jpg 640w, \u002F_img\u002F01-image-semantic-regions.09d6d3fb97.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"طرح یک صفحهٔ وب با ناحیه‌های رنگی جدا: سرصفحه بالا، منو، محتوای اصلی شامل یک مطلب و یک بخش، یک ستون کناری، و پاصفحه\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cp>آخر این فصل می‌توانی:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>یک صفحه را با \u003Ccode><header>\u003C\u002Fcode>، \u003Ccode><nav>\u003C\u002Fcode>، \u003Ccode><main>\u003C\u002Fcode> و \u003Ccode><footer>\u003C\u002Fcode> به چهار ناحیهٔ اصلی تقسیم کنی\u003C\u002Fli>\n\u003Cli>فرق \u003Ccode><article>\u003C\u002Fcode> و \u003Ccode><section>\u003C\u002Fcode> را تشخیص بدهی و درست را انتخاب کنی\u003C\u002Fli>\n\u003Cli>\u003Ccode><aside>\u003C\u002Fcode> را برای محتوای کناری به‌کار ببری\u003C\u002Fli>\n\u003Cli>بگویی چرا \u003Ccode><div>\u003C\u002Fcode> آخرین انتخاب است، نه اولین\u003C\u002Fli>\n\u003C\u002Ful>\n",{"kind":21,"heading":25,"html":26},"قبل از شروع","\u003Ch2 id=\"قبل-از-شروع\">قبل از شروع\u003Ca class=\"head-anchor\" href=\"#%D9%82%D8%A8%D9%84-%D8%A7%D8%B2-%D8%B4%D8%B1%D9%88%D8%B9\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Cstrong>از فصل ۵:\u003C\u002Fstrong> فهرست‌ها (\u003Ccode><ul>\u003C\u002Fcode> و \u003Ccode><li>\u003C\u002Fcode>) — منوی صفحه را با یک فهرست از لینک‌ها می‌سازیم.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از فصل ۳:\u003C\u002Fstrong> \u003Ccode><a href>\u003C\u002Fcode> و \u003Ccode>#id\u003C\u002Fcode> داخل صفحه — لینک‌های منو به بخش‌های همین صفحه وصل می‌شوند.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از فصل ۲:\u003C\u002Fstrong> heading ها و ترتیب درستشان.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>مثل همیشه فقط یک مرورگر لازم داری، یا فقط همین آزمایشگاه.\u003C\u002Fp>\n",{"kind":28,"heading":29,"html":30,"embed":31},"lab","","— یک صفحه می‌بینی که تماماً از <div> ساخته شده. کارِ این فصل این است که خط‌به‌خط آن را به یک اسکلتِ معنادار تبدیل کنی و هر بار نتیجه را ببینی","\u002Flab\u002Fembed\u002Ftaropood\u002Fterm-1-html-structure\u002Fsession-06-semantic",{"kind":21,"heading":33,"html":34},"۱. یک صفحه که همه‌اش <div> است","\u003Ch2 id=\"۱-یک-صفحه-که-همه‌اش-div-است\">۱. یک صفحه که همه‌اش \u003Ccode><div>\u003C\u002Fcode> است\u003Ca class=\"head-anchor\" href=\"#%DB%B1-%DB%8C%DA%A9-%D8%B5%D9%81%D8%AD%D9%87-%DA%A9%D9%87-%D9%87%D9%85%D9%87%E2%80%8C%D8%A7%D8%B4-div-%D8%A7%D8%B3%D8%AA\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>تا اینجا هر tag یی که یاد گرفتی یک معنا داشت: \u003Ccode><h1>\u003C\u002Fcode> یعنی تیتر، \u003Ccode><p>\u003C\u002Fcode> یعنی پاراگراف، \u003Ccode><ul>\u003C\u002Fcode> یعنی فهرست. حالا با یک tag آشنا می‌شویم که \u003Cstrong>هیچ معنایی ندارد\u003C\u002Fstrong>: \u003Ccode><div>\u003C\u002Fcode>. \u003Ccode><div>\u003C\u002Fcode> فقط یک جعبهٔ خالی است؛ چیزی را دورِ محتوا می‌کشد بی‌آنکه بگوید آن محتوا چیست.\u003C\u002Fp>\n\u003Cp>خیلی‌ها کل صفحه را فقط با \u003Ccode><div>\u003C\u002Fcode> می‌سازند. بیا ببینیم چه شکلی می‌شود. در آزمایشگاه این را بنویس:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><div>وبلاگ من<\u002Fdiv>\n<div><a href="#posts">پست‌ها<\u002Fa> <a href="#about">دربارهٔ من<\u002Fa><\u002Fdiv>\n<div>اولین روزم با HTML<\u002Fdiv>\n<div>امروز یاد گرفتم هر تکه از صفحه یک اسم دارد.<\u002Fdiv>\n<div>ساختهٔ من — ۱۴۰۵<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>نگاهش کن. روی صفحه، بد به‌نظر نمی‌رسد: چند خط متن که زیر هم چیده شده‌اند و دو تا لینک. برای چشمِ تو کار می‌کند. مشکل جای دیگری است.\u003C\u002Fp>\n\u003Cp>فرض کن کسی که صفحه را نمی‌بیند از این صفحه استفاده می‌کند — با screen reader ای که متن را برایش می‌خواند. این آدم معمولاً بین \u003Cstrong>ناحیه‌های\u003C\u002Fstrong> صفحه می‌پرد: «برو به منوی اصلی»، «برو به محتوای اصلی»، «سرصفحه کجاست؟». حالا این صفحه را برایش تصور کن: \u003Cstrong>هیچ‌کدام از این ناحیه‌ها وجود ندارد.\u003C\u002Fstrong> یک \u003Ccode><div>\u003C\u002Fcode> هیچ‌چیز به screen reader نمی‌گوید، پس این آدم چیزی برای پریدن ندارد — فقط یک تودهٔ صافِ متن، بدون هیچ نقطهٔ گیر. حتی «وبلاگ من» هم تیتر نیست، چون داخل یک \u003Ccode><div>\u003C\u002Fcode> گذاشته‌ایمش نه یک \u003Ccode><h1>\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Cp>همان درسِ موذیِ HTML که از فصل ۱ می‌شناسی: \u003Cstrong>این صفحه خراب است ولی فریاد نمی‌زند.\u003C\u002Fstrong> برای تو درست به‌نظر می‌رسد، در حالی که برای ماشین‌ها هیچ ساختاری ندارد. بیا درستش کنیم.\u003C\u002Fp>\n",{"kind":21,"heading":36,"html":37},"۲. چهار ناحیهٔ اصلی: <header>، <nav>، <main>، <footer>","\u003Ch2 id=\"۲-چهار-ناحیهٔ-اصلی-header-nav-main-footer\">۲. چهار ناحیهٔ اصلی: \u003Ccode><header>\u003C\u002Fcode>، \u003Ccode><nav>\u003C\u002Fcode>، \u003Ccode><main>\u003C\u002Fcode>، \u003Ccode><footer>\u003C\u002Fcode>\u003Ca class=\"head-anchor\" href=\"#%DB%B2-%DA%86%D9%87%D8%A7%D8%B1-%D9%86%D8%A7%D8%AD%DB%8C%D9%87%D9%94-%D8%A7%D8%B5%D9%84%DB%8C-header-nav-main-footer\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>تقریباً هر صفحه‌ای روی وب همین چهار ناحیهٔ بزرگ را دارد. HTML برای هرکدام یک tag دارد که دقیقاً همان را \u003Cstrong>می‌گوید\u003C\u002Fstrong>:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode><header>\u003C\u002Fcode> — سرصفحه: چیزی که بالای صفحه می‌آید، معمولاً اسم سایت و منو.\u003C\u002Fli>\n\u003Cli>\u003Ccode><nav>\u003C\u002Fcode> — ناوبری: منوی اصلیِ لینک‌ها.\u003C\u002Fli>\n\u003Cli>\u003Ccode><main>\u003C\u002Fcode> — محتوای اصلی: قلبِ صفحه، چیزی که کاربر برایش آمده.\u003C\u002Fli>\n\u003Cli>\u003Ccode><footer>\u003C\u002Fcode> — پاصفحه: پایین صفحه، معمولاً حق‌نشر و لینک‌های فرعی.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F02-image-div-soup-vs-semantic.8c8d7f5604.160.webp 160w, \u002F_img\u002F02-image-div-soup-vs-semantic.8c8d7f5604.320.webp 320w, \u002F_img\u002F02-image-div-soup-vs-semantic.8c8d7f5604.640.webp 640w, \u002F_img\u002F02-image-div-soup-vs-semantic.8c8d7f5604.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F02-image-div-soup-vs-semantic.8c8d7f5604.1280.jpg\" srcset=\"\u002F_img\u002F02-image-div-soup-vs-semantic.8c8d7f5604.160.jpg 160w, \u002F_img\u002F02-image-div-soup-vs-semantic.8c8d7f5604.320.jpg 320w, \u002F_img\u002F02-image-div-soup-vs-semantic.8c8d7f5604.640.jpg 640w, \u002F_img\u002F02-image-div-soup-vs-semantic.8c8d7f5604.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"مقایسهٔ دو صفحه: سمت راست تودهٔ جعبه‌های خاکستریِ یک‌شکل و بی‌اسم، سمت چپ همان چیدمان با ناحیه‌های رنگیِ جدا و مشخص\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cp>حالا همان صفحهٔ فصل قبل را بردار و \u003Ccode><div>\u003C\u002Fcode> های بیرونی را با tag درستشان عوض کن. منو را هم — چون یک فهرست از لینک‌هاست — با \u003Ccode><ul>\u003C\u002Fcode> می‌سازیم، همان‌طور که در فصل ۵ یاد گرفتی:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><header>\n  <h1>وبلاگ من<\u002Fh1>\n  <nav>\n    <ul>\n      <li><a href="#posts">پست‌ها<\u002Fa><\u002Fli>\n      <li><a href="#about">دربارهٔ من<\u002Fa><\u002Fli>\n    <\u002Ful>\n  <\u002Fnav>\n<\u002Fheader>\n\n<main>\n  <p>اولین روزم با HTML<\u002Fp>\n<\u002Fmain>\n\n<footer>\n  <p>ساختهٔ من — ۱۴۰۵<\u002Fp>\n<\u002Ffooter>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>هیچ چیزِ ظاهری عوض نشد؛ صفحه تقریباً همان‌طور دیده می‌شود. ولی حالا زیرِ پوست، همه‌چیز فرق دارد: آن آدم با screen reader می‌تواند بگوید «برو به \u003Ccode><main>\u003C\u002Fcode>» و مستقیم می‌رسد به محتوای اصلی. این ناحیه‌های بزرگ اسم مخصوصی دارند: به‌شان \u003Cstrong>landmark\u003C\u002Fstrong> می‌گویند، یعنی نشانه‌هایی که کاربر می‌تواند بینشان بپرد.\u003C\u002Fp>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> روی صفحه هنوز همان متن و لینک‌ها را می‌بینی — و همین درست است. کارِ semantic برای چشم نیست؛ برای معناست. اگر چیزی روی صفحه جابه‌جا شده، احتمالاً یک tag را نبسته‌ای.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> فقط \u003Cstrong>یک\u003C\u002Fstrong> \u003Ccode><main>\u003C\u002Fcode> در هر صفحه. \u003Ccode><header>\u003C\u002Fcode>، \u003Ccode><nav>\u003C\u002Fcode> و \u003Ccode><footer>\u003C\u002Fcode> می‌توانند بیش از یکی باشند (مثلاً هر مطلب \u003Ccode><footer>\u003C\u002Fcode> خودش را دارد)، ولی \u003Ccode><main>\u003C\u002Fcode> یعنی «محتوای اصلیِ این صفحه» و صفحه فقط یک محتوای اصلی دارد. دو تا \u003Ccode><main>\u003C\u002Fcode> یعنی به کاربر می‌گویی «اصلی‌ترین جا اینجاست... نه، آنجاست».\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":39,"html":40},"۳. داخل <main>: <article> یا <section>؟","\u003Ch2 id=\"۳-داخل-main-article-یا-section\">۳. داخل \u003Ccode><main>\u003C\u002Fcode>: \u003Ccode><article>\u003C\u002Fcode> یا \u003Ccode><section>\u003C\u002Fcode>؟\u003Ca class=\"head-anchor\" href=\"#%DB%B3-%D8%AF%D8%A7%D8%AE%D9%84-main-article-%DB%8C%D8%A7-section\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>\u003Ccode><main>\u003C\u002Fcode> ناحیهٔ اصلی است، ولی خودش معمولاً از چند تکه ساخته می‌شود. دو tag برای این تکه‌ها داریم که تازه‌کارها بیشتر از هر چیزی سرشان گیج می‌شوند: \u003Ccode><article>\u003C\u002Fcode> و \u003Ccode><section>\u003C\u002Fcode>. فرقشان یک سؤال ساده است.\u003C\u002Fp>\n\u003Cp>\u003Ccode><article>\u003C\u002Fcode> یعنی یک تکهٔ \u003Cstrong>مستقل\u003C\u002Fstrong> که به‌تنهایی هم معنا دارد — اگر بِکَنی‌اش و جای دیگری بگذاری، باز کامل است. یک پست وبلاگ، یک خبر، یک کامنت، یک کارت محصول: هرکدام یک \u003Ccode><article>\u003C\u002Fcode> است.\u003C\u002Fp>\n\u003Cp>\u003Ccode><section>\u003C\u002Fcode> یعنی یک \u003Cstrong>بخشِ موضوعیِ\u003C\u002Fstrong> یک چیز بزرگ‌تر، که یک تیتر دارد ولی به‌تنهایی یک واحدِ کاملِ مستقل نیست — مثل بخش «دربارهٔ من» یا بخش «تماس» در یک صفحه.\u003C\u002Fp>\n\u003Cp>بیا داخل \u003Ccode><main>\u003C\u002Fcode> هم یک مطلبِ مستقل بگذاریم (\u003Ccode><article>\u003C\u002Fcode>) و هم یک بخشِ معرفی (\u003Ccode><section>\u003C\u002Fcode>):\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><main>\n  <article id="posts">\n    <h2>اولین روزم با HTML<\u002Fh2>\n    <p>امروز یاد گرفتم هر تکه از صفحه یک اسم دارد.<\u002Fp>\n  <\u002Farticle>\n\n  <section id="about">\n    <h2>چند کلمه دربارهٔ من<\u002Fh2>\n    <p>تازه ساختن سایت را یاد می‌گیرم.<\u002Fp>\n  <\u002Fsection>\n<\u002Fmain>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>هر دو یک \u003Ccode><h2>\u003C\u002Fcode> دارند، چون هر دو یک بخشِ نام‌دارند. فرقشان در معناست: آن پست، خودش یک واحدِ کامل است؛ آن معرفی، بخشی از این صفحهٔ خاص است.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>⚠️ \u003Cstrong>مواظب باش:\u003C\u002Fstrong> \u003Ccode><section>\u003C\u002Fcode> را به‌جای یک جعبهٔ همه‌کاره به‌کار نبر. اگر یک بخش تیتر ندارد و موضوعِ مشخصی را جمع نمی‌کند، تقریباً همیشه یا اصلاً به آن نیازی نیست، یا کارش با یک \u003Ccode><div>\u003C\u002Fcode> ساده درست است. \u003Ccode><section>\u003C\u002Fcode> بی‌تیتر یک نشانهٔ اشتباه است.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>یک لغزشِ رایجِ دیگر هم همین‌جا سرِ تودرتویی پیش می‌آید:\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🔧 \u003Cstrong>اگر کار نکرد:\u003C\u002Fstrong> بخش «دربارهٔ من» تودرتو رفت داخل مطلب، به‌جای اینکه کنارش بیاید؟ احتمالاً \u003Ccode><\u002Farticle>\u003C\u002Fcode> را جا انداخته‌ای؛ \u003Ccode><section>\u003C\u002Fcode> قبل از بسته‌شدنِ \u003Ccode><article>\u003C\u002Fcode> نوشته شده و افتاده تویش. اول \u003Ccode><article>\u003C\u002Fcode> را ببند، بعد \u003Ccode><section>\u003C\u002Fcode> را باز کن.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":42,"heading":43,"html":44},"checkpoint","چالش: یک کارت محصول","\u003Ch2 id=\"چالش-یک-کارت-محصول\">چالش: یک کارت محصول\u003Ca class=\"head-anchor\" href=\"#%DA%86%D8%A7%D9%84%D8%B4-%DB%8C%DA%A9-%DA%A9%D8%A7%D8%B1%D8%AA-%D9%85%D8%AD%D8%B5%D9%88%D9%84\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>در یک فروشگاه، هر محصول یک کارت دارد: عکس، اسم، قیمت، و دکمهٔ خرید — همه با هم، و این کارت را می‌شود همان‌طور کامل داخل صفحهٔ اصلی، صفحهٔ نتایج جست‌وجو، یا صفحهٔ علاقه‌مندی‌ها گذاشت. این کارت باید \u003Ccode><article>\u003C\u002Fcode> باشد یا \u003Ccode><section>\u003C\u002Fcode>؟ اول جواب بده.\u003C\u002Fp>\n\u003Chr>\n\u003Cp>\u003Cstrong>جواب:\u003C\u002Fstrong> \u003Ccode><article>\u003C\u002Fcode>. معیار همیشه یکی است: «اگر این تکه را بکَنم و جای دیگری بگذارم، باز به‌تنهایی کامل و معنادار است؟» کارت محصول این آزمون را پاس می‌کند — مستقل است و هرجا بگذاری‌اش سرِ پا می‌ماند. \u003Ccode><section>\u003C\u002Fcode> را وقتی انتخاب کن که تکه فقط به‌عنوان بخشی از همین صفحهٔ خاص معنا دارد.\u003C\u002Fp>\n",{"kind":21,"heading":46,"html":47},"۴. <aside>: چیزی که کنارِ محتواست، نه خودِ محتوا","\u003Ch2 id=\"۴-aside-چیزی-که-کنارِ-محتواست-نه-خودِ-محتوا\">۴. \u003Ccode><aside>\u003C\u002Fcode>: چیزی که کنارِ محتواست، نه خودِ محتوا\u003Ca class=\"head-anchor\" href=\"#%DB%B4-aside-%DA%86%DB%8C%D8%B2%DB%8C-%DA%A9%D9%87-%DA%A9%D9%86%D8%A7%D8%B1%D9%90-%D9%85%D8%AD%D8%AA%D9%88%D8%A7%D8%B3%D8%AA-%D9%86%D9%87-%D8%AE%D9%88%D8%AF%D9%90-%D9%85%D8%AD%D8%AA%D9%88%D8%A7\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>بعضی چیزها روی صفحه هستند ولی محتوای اصلی نیستند — یک ستونِ لینک‌های مفید، یک جعبهٔ «مطالب مرتبط»، یک نکتهٔ کناری. برای این‌ها \u003Ccode><aside>\u003C\u002Fcode> داریم: چیزی که \u003Cstrong>به\u003C\u002Fstrong> محتوا مربوط است ولی خودش محتوای اصلی نیست. اگر برش داری، محتوای اصلی هنوز کامل است.\u003C\u002Fp>\n\u003Cp>بیا کنارِ صفحه یک \u003Ccode><aside>\u003C\u002Fcode> با چند لینک مفید بگذاریم:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><aside>\n  <h2>لینک‌های مفید<\u002Fh2>\n  <ul>\n    <li><a href="#">راهنمای HTML<\u002Fa><\u002Fli>\n    <li><a href="#">تمرین‌های بیشتر<\u002Fa><\u002Fli>\n  <\u002Ful>\n<\u002Faside>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> یک تیتر «لینک‌های مفید» و دو لینک زیرش می‌بینی. روی صفحه فرقی با یک فهرست عادی ندارد — ولی به ماشین‌ها گفته‌ای «این‌ها حاشیه‌اند، نه اصلِ مطلب».\u003C\u002Fp>\n",{"kind":21,"heading":49,"html":50},"۵. صفحهٔ کامل و چرا <div> آخرین انتخاب است","\u003Ch2 id=\"۵-صفحهٔ-کامل-و-چرا-div-آخرین-انتخاب-است\">۵. صفحهٔ کامل و چرا \u003Ccode><div>\u003C\u002Fcode> آخرین انتخاب است\u003Ca class=\"head-anchor\" href=\"#%DB%B5-%D8%B5%D9%81%D8%AD%D9%87%D9%94-%DA%A9%D8%A7%D9%85%D9%84-%D9%88-%DA%86%D8%B1%D8%A7-div-%D8%A2%D8%AE%D8%B1%DB%8C%D9%86-%D8%A7%D9%86%D8%AA%D8%AE%D8%A7%D8%A8-%D8%A7%D8%B3%D8%AA\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>حالا همهٔ تکه‌ها را سرِ هم می‌کنیم. این صفحهٔ کاملِ semantic است — همان صفحهٔ div-ای فصل قبل، ولی این‌بار هر ناحیه اسم خودش را دارد:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><!-- index.html -->\n<!DOCTYPE html>\n<html lang="fa" dir="rtl">\n  <head>\n    <meta charset="UTF-8">\n    <title>وبلاگ من<\u002Ftitle>\n  <\u002Fhead>\n  <body>\n    <header>\n      <h1>وبلاگ من<\u002Fh1>\n      <nav>\n        <ul>\n          <li><a href="#posts">پست‌ها<\u002Fa><\u002Fli>\n          <li><a href="#about">دربارهٔ من<\u002Fa><\u002Fli>\n        <\u002Ful>\n      <\u002Fnav>\n    <\u002Fheader>\n\n    <main>\n      <article id="posts">\n        <h2>اولین روزم با HTML<\u002Fh2>\n        <p>امروز یاد گرفتم هر تکه از صفحه یک اسم دارد.<\u002Fp>\n        <p>دیگر لازم نیست همه‌چیز را داخل یک جعبهٔ بی‌اسم بگذارم.<\u002Fp>\n      <\u002Farticle>\n\n      <section id="about">\n        <h2>چند کلمه دربارهٔ من<\u002Fh2>\n        <p>تازه ساختن سایت را یاد می‌گیرم و هر چه یاد بگیرم همین‌جا می‌نویسم.<\u002Fp>\n      <\u002Fsection>\n    <\u002Fmain>\n\n    <aside>\n      <h2>لینک‌های مفید<\u002Fh2>\n      <ul>\n        <li><a href="#">راهنمای HTML<\u002Fa><\u002Fli>\n        <li><a href="#">تمرین‌های بیشتر<\u002Fa><\u002Fli>\n      <\u002Ful>\n    <\u002Faside>\n\n    <footer>\n      <p>ساختهٔ من — ۱۴۰۵<\u002Fp>\n    <\u002Ffooter>\n  <\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> روی صفحه یک وبلاگِ ساده می‌بینی — تیتر، منو، یک مطلب، یک بخش معرفی، ستون لینک‌ها، و پاصفحه. حالا به تعداد \u003Ccode><div>\u003C\u002Fcode> ها نگاه کن: \u003Cstrong>صفر\u003C\u002Fstrong>. هر تکه اسمِ درستِ خودش را دارد.\u003C\u002Fp>\n\u003Cp>پس \u003Ccode><div>\u003C\u002Fcode> کِی به‌کار می‌آید؟ \u003Cstrong>آخرین انتخاب.\u003C\u002Fstrong> وقتی هیچ tag معناداری برای کارت نمی‌خورد و فقط برای دسته‌بندی یا استایل‌دادن (که در ترم ۲ یاد می‌گیری) به یک جعبه نیاز داری. قانون این است: \u003Cstrong>اول دنبال یک tag معنادار بگرد؛ اگر هیچ‌کدام نمی‌خورد، تازه \u003Ccode><div>\u003C\u002Fcode>.\u003C\u002Fstrong> نه برعکس. \u003Ccode><div>\u003C\u002Fcode> بی‌معنایی‌اش عیب نیست — کارش دقیقاً «هیچ معنایی نده» است؛ فقط جایی استفاده‌اش کن که واقعاً همان را می‌خواهی.\u003C\u002Fp>\n",{"kind":21,"heading":52,"html":53},"۶. همیار AI: کمکِ درست، اشتباهِ رایج","\u003Ch2 id=\"۶-همیار-ai-کمکِ-درست-اشتباهِ-رایج\">۶. همیار AI: کمکِ درست، اشتباهِ رایج\u003Ca class=\"head-anchor\" href=\"#%DB%B6-%D9%87%D9%85%DB%8C%D8%A7%D8%B1-ai-%DA%A9%D9%85%DA%A9%D9%90-%D8%AF%D8%B1%D8%B3%D8%AA-%D8%A7%D8%B4%D8%AA%D8%A8%D8%A7%D9%87%D9%90-%D8%B1%D8%A7%DB%8C%D8%AC\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>اینجا اولین فصلی است که کاملاً به AI می‌پردازیم، چون semantic دقیقاً همان‌جایی است که AI هم بیشترین کمک و هم بیشترین اشتباه را دارد. سه قانونِ ثابتِ کار با AI در کل این خودآموز اینهاست:\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🤖 \u003Cstrong>با AI:\u003C\u002Fstrong> سه قانون را عیناً به خاطر بسپار: \u003Cstrong>«اول خودت، بعد AI»\u003C\u002Fstrong> — اول با معیارهای خودت تصمیم بگیر، بعد نظر AI را به‌عنوان نظرِ دوم بشنو، نه جوابِ نهایی. \u003Cstrong>«خط به خط»\u003C\u002Fstrong> — هر چیزی که AI می‌دهد را خط‌به‌خط بخوان و بفهم، هیچ‌وقت یک‌جا کپی نکن. \u003Cstrong>«AI هم اشتباه می‌کند»\u003C\u002Fstrong> — و همین الان یک نمونه‌اش را با هم می‌بینیم.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>\u003Cstrong>کاربردِ خوب.\u003C\u002Fstrong> بعد از اینکه خودت صفحه را semantic کردی، AI یک جفت‌چشم دومِ عالی است:\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🤖 \u003Cstrong>با AI:\u003C\u002Fstrong> صفحهٔ semantic خودت را به دستیار AI ات بده و بپرس: «هر ناحیهٔ این صفحه را کدام tag باید بپوشاند؟ جایی مانده که هنوز \u003Ccode><div>\u003C\u002Fcode> است ولی tag معنادارتری برایش هست؟». جوابش را با چیزی که \u003Cstrong>خودت می‌فهمی\u003C\u002Fstrong> بسنج — برای هر پیشنهاد از AI بپرس «چرا؟» و ببین دلیلش با معیارِ ما (این تکه مستقل است یا نه؟ تیتر و موضوع دارد یا نه؟) جور درمی‌آید.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>\u003Cstrong>کاربردِ اشتباه.\u003C\u002Fstrong> حالا نمونه‌ای که AI با اعتمادبه‌نفس اشتباه می‌گوید. بارها اگر بگویی «semantic صفحه‌ام را بهتر کن»، AI زیادی مشتاق می‌شود: \u003Cstrong>همه‌چیز\u003C\u002Fstrong> را داخل \u003Ccode><section>\u003C\u002Fcode> می‌پیچد و برای هر ناحیه یک \u003Ccode>role\u003C\u002Fcode> هم اضافه می‌کند. مثلاً چیزی شبیه این تحویلت می‌دهد:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><section role="banner">\n  <h1>وبلاگ من<\u002Fh1>\n  <nav role="navigation">\n    <ul>\n      <li><a href="#posts">پست‌ها<\u002Fa><\u002Fli>\n    <\u002Ful>\n  <\u002Fnav>\n<\u002Fsection>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>دو چیز اینجا غلط است، و با همان چیزی که در این فصل فهمیدی می‌توانی ردشان کنی. \u003Cstrong>اول:\u003C\u002Fstrong> این ناحیه سرصفحه است، پس \u003Ccode><header>\u003C\u002Fcode> درست است نه \u003Ccode><section>\u003C\u002Fcode>؛ AI یک بخشِ بی‌تیتر و بی‌موضوع را داخل \u003Ccode><section>\u003C\u002Fcode> پیچیده — دقیقاً همان اشتباهی که در بخش ۳ ⚠️ زدیم. \u003Cstrong>دوم:\u003C\u002Fstrong> آن \u003Ccode>role="navigation"\u003C\u002Fcode> یک attribute اضافه است که فقط همان چیزی را تکرار می‌کند که \u003Ccode><nav>\u003C\u002Fcode> از قبل می‌گوید. مثل این است که روی یک در، تابلوی «در» بزنی. \u003Ccode><nav>\u003C\u002Fcode> خودش به ماشین‌ها می‌گوید «این ناوبری است»؛ نوشتن \u003Ccode>role="navigation"\u003C\u002Fcode> رویش فقط شلوغی است، و \u003Ccode>role="banner"\u003C\u002Fcode> روی چیزی که اصلاً باید \u003Ccode><header>\u003C\u002Fcode> باشد دوبار غلط است.\u003C\u002Fp>\n\u003Cp>درستش همان چیزی است که خودت نوشتی: \u003Ccode><header>\u003C\u002Fcode> و \u003Ccode><nav>\u003C\u002Fcode>، بی‌هیچ \u003Ccode>role\u003C\u002Fcode>. این بهترین درسِ «AI هم اشتباه می‌کند» است — AI جمله‌ای می‌سازد که \u003Cstrong>درست به‌نظر می‌رسد\u003C\u002Fstrong>، ولی وقتی خط‌به‌خط با فهمِ خودت بسنجی‌اش، می‌بینی دارد پیچیدگیِ بی‌فایده اضافه می‌کند. اول خودت، بعد AI.\u003C\u002Fp>\n",{"kind":21,"heading":55,"html":56},"واژه‌های تازهٔ این فصل","\u003Ch2 id=\"واژه‌های-تازهٔ-این-فصل\">واژه‌های تازهٔ این فصل\u003Ca class=\"head-anchor\" href=\"#%D9%88%D8%A7%DA%98%D9%87%E2%80%8C%D9%87%D8%A7%DB%8C-%D8%AA%D8%A7%D8%B2%D9%87%D9%94-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>کلمه\u003C\u002Fth>\n\u003Cth>تلفظ به حروف فارسی\u003C\u002Fth>\n\u003Cth>یعنی چه\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>semantic\u003C\u002Ftd>\n\u003Ctd>سِمَنتیک\u003C\u002Ftd>\n\u003Ctd>معنادار؛ tag یی که می‌گوید محتوا \u003Cstrong>چیست\u003C\u002Fstrong>، نه چه شکلی است\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>landmark\u003C\u002Ftd>\n\u003Ctd>لَندمارک\u003C\u002Ftd>\n\u003Ctd>ناحیهٔ بزرگِ صفحه که کاربر می‌تواند بینشان بپرد (مثل \u003Ccode><main>\u003C\u002Fcode>)\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>header\u003C\u002Ftd>\n\u003Ctd>هِدِر\u003C\u002Ftd>\n\u003Ctd>سرصفحه؛ بالای صفحه، معمولاً اسم سایت و منو\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>nav\u003C\u002Ftd>\n\u003Ctd>نَو\u003C\u002Ftd>\n\u003Ctd>ناوبری؛ ناحیهٔ منوی اصلیِ لینک‌ها (\u003Ccode><nav>\u003C\u002Fcode>)\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>main\u003C\u002Ftd>\n\u003Ctd>مِین\u003C\u002Ftd>\n\u003Ctd>محتوای اصلیِ صفحه؛ فقط یکی در هر صفحه\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>article\u003C\u002Ftd>\n\u003Ctd>آرتیکِل\u003C\u002Ftd>\n\u003Ctd>یک تکهٔ مستقل که به‌تنهایی کامل است\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>section\u003C\u002Ftd>\n\u003Ctd>سِکشِن\u003C\u002Ftd>\n\u003Ctd>یک بخشِ موضوعیِ نام‌دار از یک چیز بزرگ‌تر\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>aside\u003C\u002Ftd>\n\u003Ctd>اَساید\u003C\u002Ftd>\n\u003Ctd>محتوای کناری که مربوط است ولی اصلِ مطلب نیست\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>footer\u003C\u002Ftd>\n\u003Ctd>فوتِر\u003C\u002Ftd>\n\u003Ctd>پاصفحه؛ پایین صفحه\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>div\u003C\u002Ftd>\n\u003Ctd>دیو\u003C\u002Ftd>\n\u003Ctd>جعبهٔ بی‌معنا؛ آخرین انتخاب، وقتی هیچ tag معناداری نمی‌خورد\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n",{"kind":42,"heading":58,"html":59},"تمرین‌ها","\u003Ch2 id=\"تمرین‌ها\">تمرین‌ها\u003Ca class=\"head-anchor\" href=\"#%D8%AA%D9%85%D8%B1%DB%8C%D9%86%E2%80%8C%D9%87%D8%A7\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>قبل از تمرین، بدون نگاه‌کردن به بالا جواب بده: فرق \u003Ccode><article>\u003C\u002Fcode> و \u003Ccode><section>\u003C\u002Fcode> در یک جمله چیست؟\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین اجباری:\u003C\u002Fstrong> یک صفحهٔ semantic دربارهٔ یک موضوعِ دلخواه بساز (یک کتاب، یک بازی، یک شهر). باید داشته باشد: یک \u003Ccode><header>\u003C\u002Fcode> با \u003Ccode><h1>\u003C\u002Fcode> و یک \u003Ccode><nav>\u003C\u002Fcode>، یک \u003Ccode><main>\u003C\u002Fcode> که تویش حداقل یک \u003Ccode><article>\u003C\u002Fcode> و یک \u003Ccode><section>\u003C\u002Fcode> باشد، یک \u003Ccode><aside>\u003C\u002Fcode>، و یک \u003Ccode><footer>\u003C\u002Fcode>. یک \u003Ccode><div>\u003C\u002Fcode> هم به‌کار نبر — این‌بار واقعاً به هیچ‌کدام نیازی نداری.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین ستاره‌دار ⭐:\u003C\u002Fstrong> یک صفحهٔ واقعی و بزرگ را باز کن و \u003Ccode>View Page Source\u003C\u002Fcode> بزن (همان کاری که در فصل ۱ کردی). چند تا \u003Ccode><header>\u003C\u002Fcode>، \u003Ccode><nav>\u003C\u002Fcode>، \u003Ccode><main>\u003C\u002Fcode>، \u003Ccode><article>\u003C\u002Fcode> و \u003Ccode><aside>\u003C\u002Fcode> پیدا می‌کنی؟ حالا بشمار چند تا \u003Ccode><div>\u003C\u002Fcode> هست — و برای دو تا از آن‌ها حدس بزن چرا سازنده مجبور شده \u003Ccode><div>\u003C\u002Fcode> بگذارد و نه یک tag معنادار.\u003C\u002Fp>\n",{"kind":21,"heading":61,"html":62},"در فصل بعد","\u003Ch2 id=\"در-فصل-بعد\">در فصل بعد\u003Ca class=\"head-anchor\" href=\"#%D8%AF%D8%B1-%D9%81%D8%B5%D9%84-%D8%A8%D8%B9%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>الان می‌توانی به هر صفحه یک اسکلتِ معنادار بدهی. فصل بعد سراغ یک tag می‌رویم که تازه‌کارها اغلب برای کارِ اشتباه استفاده‌اش می‌کنند: \u003Ccode><table>\u003C\u002Fcode>. یاد می‌گیری جدول فقط برای \u003Cstrong>داده‌های جدولی\u003C\u002Fstrong> است — نه هیچ‌وقت برای چیدنِ صفحه — و چطور یک جدولِ درست و قابل‌خواندن برای screen reader بسازی.\u003C\u002Fp>\n",{"course":64,"entitled":72,"lessons":73,"payments_enabled":72,"terms":258,"live":5},{"active_window":65,"effective_price_toman":66,"free":5,"lesson_count":67,"price_toman":68,"slug":69,"summary_fa":70,"title_fa":71},null,0,61,1500000,"taropood","از صفر تا ساختن سایت واقعی با HTML و CSS. متن‌محور، با آزمایشگاه زندهٔ داخل مرورگر و اصطلاح‌های اصیل.","تاروپود — خودآموز HTML و CSS",false,[74,77,81,85,89,90,91,92,96,100,104,107,110,113,116,119,122,125,128,131,134,138,141,144,147,150,153,156,159,162,165,168,171,174,177,180,183,186,189,192,195,198,201,204,207,210,213,216,219,222,225,228,231,234,237,240,243,246,249,252,255],{"free_preview":5,"order":9,"slug":75,"source":8,"term":9,"title_fa":76},"t1-s01-first-page","فصل ۰۱ — اولین صفحهٔ وب تو",{"free_preview":5,"order":78,"slug":79,"source":8,"term":9,"title_fa":80},2,"t1-s02-text","فصل ۰۲ — متن: عنوان و پاراگراف",{"free_preview":5,"order":82,"slug":83,"source":8,"term":9,"title_fa":84},3,"t1-s03-links","فصل ۰۳ — پیوند: چیزی که وب را وب کرد",{"free_preview":5,"order":86,"slug":87,"source":8,"term":9,"title_fa":88},4,"t1-s04-images","فصل ۰۴ — تصویر",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},{"free_preview":5,"order":16,"slug":17,"source":8,"term":9,"title_fa":18},{"free_preview":5,"order":93,"slug":94,"source":8,"term":9,"title_fa":95},8,"t1-s08-forms","فصل ۰۸ — فرم: گرفتن ورودی",{"free_preview":5,"order":97,"slug":98,"source":8,"term":9,"title_fa":99},9,"t1-s09-accessibility","فصل ۰۹ — دسترس‌پذیری از همان HTML",{"free_preview":5,"order":101,"slug":102,"source":8,"term":9,"title_fa":103},10,"t1-s10-first-project","فصل ۱۰ — پروژه: صفحهٔ معرفی خودت",{"free_preview":5,"order":9,"slug":105,"source":8,"term":78,"title_fa":106},"t2-s01-first-css","فصل ۰۱ — اولین CSS",{"free_preview":5,"order":78,"slug":108,"source":8,"term":78,"title_fa":109},"t2-s02-selectors","فصل ۰۲ — selector ها",{"free_preview":5,"order":82,"slug":111,"source":8,"term":78,"title_fa":112},"t2-s03-cascade","فصل ۰۳ — cascade، specificity و inheritance",{"free_preview":5,"order":86,"slug":114,"source":8,"term":78,"title_fa":115},"t2-s04-box-model","فصل ۰۴ — جعبه‌ها: box model",{"free_preview":5,"order":12,"slug":117,"source":8,"term":78,"title_fa":118},"t2-s05-units-colors","فصل ۰۵ — واحد و رنگ",{"free_preview":5,"order":6,"slug":120,"source":8,"term":78,"title_fa":121},"t2-s06-typography","فصل ۰۶ — تایپوگرافی و فونت فارسی",{"free_preview":5,"order":16,"slug":123,"source":8,"term":78,"title_fa":124},"t2-s07-flow","فصل ۰۷ — جریان عادی صفحه",{"free_preview":5,"order":93,"slug":126,"source":8,"term":78,"title_fa":127},"t2-s08-decoration","فصل ۰۸ — پس‌زمینه، حاشیه، سایه",{"free_preview":5,"order":97,"slug":129,"source":8,"term":78,"title_fa":130},"t2-s09-custom-props","فصل ۰۹ — متغیرهای خودت در CSS",{"free_preview":5,"order":101,"slug":132,"source":8,"term":78,"title_fa":133},"t2-s10-devtools","فصل ۱۰ — DevTools: ابزار واقعی",{"free_preview":5,"order":135,"slug":136,"source":8,"term":78,"title_fa":137},11,"t2-s11-styled-project","فصل ۱۱ — صفحهٔ ترم ۱ را زنده کن",{"free_preview":5,"order":9,"slug":139,"source":8,"term":82,"title_fa":140},"t3-s01-layout-intro","فصل ۰۱ — چیدمان: از جریان عادی شروع کن",{"free_preview":5,"order":78,"slug":142,"source":8,"term":82,"title_fa":143},"t3-s02-flex-basics","فصل ۰۲ — flexbox: یک محور",{"free_preview":5,"order":82,"slug":145,"source":8,"term":82,"title_fa":146},"t3-s03-flex-align","فصل ۰۳ — چیدن و وسط‌چین کردن",{"free_preview":5,"order":86,"slug":148,"source":8,"term":82,"title_fa":149},"t3-s04-flex-grow","فصل ۰۴ — انعطاف واقعی",{"free_preview":5,"order":12,"slug":151,"source":8,"term":82,"title_fa":152},"t3-s05-grid-basics","فصل ۰۵ — grid: دو محور",{"free_preview":5,"order":6,"slug":154,"source":8,"term":82,"title_fa":155},"t3-s06-grid-placement","فصل ۰۶ — جای‌گذاری در grid",{"free_preview":5,"order":16,"slug":157,"source":8,"term":82,"title_fa":158},"t3-s07-grid-areas","فصل ۰۷ — layout کامل صفحه با grid",{"free_preview":5,"order":93,"slug":160,"source":8,"term":82,"title_fa":161},"t3-s08-position","فصل ۰۸ — position",{"free_preview":5,"order":97,"slug":163,"source":8,"term":82,"title_fa":164},"t3-s09-stacking","فصل ۰۹ — z-index و stacking context",{"free_preview":5,"order":101,"slug":166,"source":8,"term":82,"title_fa":167},"t3-s10-logical","فصل ۱۰ — logical properties",{"free_preview":5,"order":135,"slug":169,"source":8,"term":82,"title_fa":170},"t3-s11-layout-project","فصل ۱۱ — پروژه: layout یک سایت کامل",{"free_preview":5,"order":9,"slug":172,"source":8,"term":86,"title_fa":173},"t4-s01-responsive-intro","فصل ۰۱ — responsive یعنی چه",{"free_preview":5,"order":78,"slug":175,"source":8,"term":86,"title_fa":176},"t4-s02-media-queries","فصل ۰۲ — media query",{"free_preview":5,"order":82,"slug":178,"source":8,"term":86,"title_fa":179},"t4-s03-responsive-images","فصل ۰۳ — تصویر responsive",{"free_preview":5,"order":86,"slug":181,"source":8,"term":86,"title_fa":182},"t4-s04-fluid-type","فصل ۰۴ — تایپوگرافی سیال و ریاضی در CSS",{"free_preview":5,"order":12,"slug":184,"source":8,"term":86,"title_fa":185},"t4-s05-container-queries","فصل ۰۵ — container query",{"free_preview":5,"order":6,"slug":187,"source":8,"term":86,"title_fa":188},"t4-s06-responsive-nav","فصل ۰۶ — ناوبری responsive",{"free_preview":5,"order":16,"slug":190,"source":8,"term":86,"title_fa":191},"t4-s07-dark-mode","فصل ۰۷ — dark mode",{"free_preview":5,"order":93,"slug":193,"source":8,"term":86,"title_fa":194},"t4-s08-responsive-project","فصل ۰۸ — پروژه: سایت کاملاً responsive",{"free_preview":5,"order":9,"slug":196,"source":8,"term":12,"title_fa":197},"t5-s01-states","فصل ۰۱ — حالت‌ها: pseudo-class تعاملی",{"free_preview":5,"order":78,"slug":199,"source":8,"term":12,"title_fa":200},"t5-s02-structural-selectors","فصل ۰۲ — selector های ساختاری و combinator ها",{"free_preview":5,"order":82,"slug":202,"source":8,"term":12,"title_fa":203},"t5-s03-pseudo-elements","فصل ۰۳ — pseudo-element ها",{"free_preview":5,"order":86,"slug":205,"source":8,"term":12,"title_fa":206},"t5-s04-forms-styling","فصل ۰۴ — استایل فرم",{"free_preview":5,"order":12,"slug":208,"source":8,"term":12,"title_fa":209},"t5-s05-forms-validation","فصل ۰۵ — اعتبارسنجی فرم",{"free_preview":5,"order":6,"slug":211,"source":8,"term":12,"title_fa":212},"t5-s06-transforms","فصل ۰۶ — transform",{"free_preview":5,"order":16,"slug":214,"source":8,"term":12,"title_fa":215},"t5-s07-transitions","فصل ۰۷ — transition",{"free_preview":5,"order":93,"slug":217,"source":8,"term":12,"title_fa":218},"t5-s08-animation","فصل ۰۸ — animation و احترام به کاربر",{"free_preview":5,"order":97,"slug":220,"source":8,"term":12,"title_fa":221},"t5-s09-has-selector","فصل ۰۹ — :has() و تعامل بدون JavaScript",{"free_preview":5,"order":101,"slug":223,"source":8,"term":12,"title_fa":224},"t5-s10-interaction-project","فصل ۱۰ — پروژه: یک component تعاملی بدون JS",{"free_preview":5,"order":9,"slug":226,"source":8,"term":6,"title_fa":227},"t6-s01-organizing","فصل ۰۱ — CSS را سازماندهی کن",{"free_preview":5,"order":78,"slug":229,"source":8,"term":6,"title_fa":230},"t6-s02-layers-nesting","فصل ۰۲ — `@layer` و nesting",{"free_preview":5,"order":82,"slug":232,"source":8,"term":6,"title_fa":233},"t6-s03-components","فصل ۰۳ — مثل component فکر کن",{"free_preview":5,"order":86,"slug":235,"source":8,"term":6,"title_fa":236},"t6-s04-design-system","فصل ۰۴ — design system کوچک خودت",{"free_preview":5,"order":12,"slug":238,"source":8,"term":6,"title_fa":239},"t6-s05-svg-icons","فصل ۰۵ — SVG و آیکون",{"free_preview":5,"order":6,"slug":241,"source":8,"term":6,"title_fa":242},"t6-s06-accessibility-deep","فصل ۰۶ — دسترس‌پذیری عمیق",{"free_preview":5,"order":16,"slug":244,"source":8,"term":6,"title_fa":245},"t6-s07-performance","فصل ۰۷ — سرعت",{"free_preview":5,"order":93,"slug":247,"source":8,"term":6,"title_fa":248},"t6-s08-architecture","فصل ۰۸ — معماری CSS در مقیاس بزرگ",{"free_preview":5,"order":97,"slug":250,"source":8,"term":6,"title_fa":251},"t6-s09-debugging","فصل ۰۹ — اشکال‌زدایی مثل حرفه‌ای‌ها",{"free_preview":5,"order":101,"slug":253,"source":8,"term":6,"title_fa":254},"t6-s10-capstone-build","فصل ۱۰ — پروژهٔ نهایی: ساخت سایت چندصفحه‌ای",{"free_preview":5,"order":135,"slug":256,"source":8,"term":6,"title_fa":257},"t6-s11-capstone-ship","فصل ۱۱ — پروژهٔ نهایی: انتشار زنده",[],1784827104705]