[{"data":1,"prerenderedAt":13},["ShallowReactive",2],{"blog:html-vs-css":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\u002Fhtml-vs-css.jpg","\u003Cp>تصور کن یک صفحه‌ی وب یک پارچه است. هر پارچه از دو نخ بافته می‌شود: تار و پود. تار نخ‌های محکمی‌اند که اسکلت پارچه را نگه می‌دارند؛ پود نخ‌هایی‌اند که از میان تار رد می‌شوند و رنگ و نقش را می‌آورند. وب دقیقاً همین است: \u003Ccode dir=\"ltr\">HTML\u003C\u002Fcode> تارِ صفحه است، یعنی ساختار و معنا؛ و \u003Ccode dir=\"ltr\">CSS\u003C\u002Fcode> پودِ آن است، یعنی رنگ و شکل و چیدمان. تازه‌کارها اغلب این دو را قاتی می‌کنند، ولی همین‌که مرزشان روشن شود، بقیه‌ی وب ساده می‌شود.\u003C\u002Fp>\n\u003Ch2>HTML ساختار و معنا را می‌سازد\u003C\u002Fh2>\n\u003Cp>هر چیزی که در یک صفحه می‌بینی — عنوان، پاراگراف، تصویر، دکمه، فهرست — با \u003Ccode dir=\"ltr\">HTML\u003C\u002Fcode> ساخته می‌شود. تو به مرورگر می‌گویی «این یک عنوان است»، «این یک پاراگراف است»، «این یک تصویر است». هر کدام از این‌ها یک \u003Ccode dir=\"ltr\">tag\u003C\u002Fcode> دارد؛ مثلاً یک عنوان اصلی را داخل \u003Ccode dir=\"ltr\"><h1>\u003C\u002Fcode> می‌گذاری و یک پاراگراف را داخل \u003Ccode dir=\"ltr\"><p>\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Cp>نکته‌ی مهم این است: \u003Ccode dir=\"ltr\">HTML\u003C\u002Fcode> فقط می‌گوید هر چیز \u003Cstrong>چیست\u003C\u002Fstrong>، نه این‌که چه شکلی است. یک \u003Ccode dir=\"ltr\"><h1>\u003C\u002Fcode> یعنی «مهم‌ترین عنوان این صفحه» — چه بزرگ باشد چه کوچک، چه آبی باشد چه سیاه. همین معنا همان چیزی است که مرورگر، موتور جستجو و screen reader به آن تکیه می‌کنند. این‌که چرا این معنا این‌قدر مهم است، خودش یک بحث کامل است که در نوشته‌ی \u003Ca href=\"\u002Fblog\u002Fsemantic-html\">چرا فقط <div> کافی نیست؟\u003C\u002Fa> بازش کرده‌ایم.\u003C\u002Fp>\n\u003Ch2>CSS ظاهر را می‌سازد\u003C\u002Fh2>\n\u003Cp>حالا که ساختار آماده است، نوبت پود می‌رسد. با \u003Ccode dir=\"ltr\">CSS\u003C\u002Fcode> می‌گویی همان عنوان چه رنگی باشد، چه‌قدر بزرگ باشد، چه فاصله‌ای از بقیه داشته باشد و کجای صفحه بنشیند. اول یک \u003Ccode dir=\"ltr\">selector\u003C\u002Fcode> می‌نویسی که می‌گوید «کدام element»، بعد می‌گویی «چه شکلی». مثلاً به همه‌ی \u003Ccode dir=\"ltr\"><h1>\u003C\u002Fcode>ها می‌گویی رنگتان آبی باشد، یا با \u003Ccode dir=\"ltr\">margin\u003C\u002Fcode> دورشان فاصله می‌گذاری.\u003C\u002Fp>\n\u003Cp>نکته‌ی جالب این است: تو ساختار را دست نمی‌زنی. همان \u003Ccode dir=\"ltr\">HTML\u003C\u002Fcode> ثابت می‌ماند، ولی با عوض کردن چند خط \u003Ccode dir=\"ltr\">CSS\u003C\u002Fcode> کل ظاهر صفحه عوض می‌شود. درست مثل همان پارچه که تارش ثابت است ولی با پودِ متفاوت، نقشِ متفاوت می‌گیرد.\u003C\u002Fp>\n\u003Ch2>چرا از هم جدا نگه‌شان می‌داریم؟\u003C\u002Fh2>\n\u003Cp>می‌شد همه‌چیز را قاتی کرد، ولی جدا نگه‌داشتنِ ساختار از ظاهر چند سود بزرگ دارد:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>یک بار ساختار را می‌نویسی و بارها ظاهرش را عوض می‌کنی، بدون این‌که محتوا به‌هم بریزد.\u003C\u002Fli>\n\u003Cli>یک فایل \u003Ccode dir=\"ltr\">CSS\u003C\u002Fcode> می‌تواند ظاهر ده‌ها صفحه را با هم مدیریت کند؛ یک تغییر، همه‌جا اعمال می‌شود.\u003C\u002Fli>\n\u003Cli>وقتی معنا (\u003Ccode dir=\"ltr\">HTML\u003C\u002Fcode>) از رنگ‌ولعاب (\u003Ccode dir=\"ltr\">CSS\u003C\u002Fcode>) جدا باشد، موتورهای جستجو و screen readerها راحت‌تر صفحه را می‌فهمند.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>یک مثال کوچک\u003C\u002Fh2>\n\u003Cp>فرض کن این را می‌نویسی: یک عنوان و یک پاراگراف زیرش. با \u003Ccode dir=\"ltr\">HTML\u003C\u002Fcode> می‌گویی این عنوان است و آن پاراگراف. تا اینجا مرورگر یک متنِ ساده‌ی سیاه‌وسفید نشان می‌دهد — و همین درست است، چون هنوز پود نبافته‌ای. بعد با چند خط \u003Ccode dir=\"ltr\">CSS\u003C\u002Fcode> می‌گویی عنوان بزرگ‌تر و آبی باشد و پاراگراف کمی خاکستری. حالا همان ساختار، ظاهرِ دلخواه تو را گرفت. اگر فردا نظرت عوض شد، فقط پود را عوض می‌کنی، نه تار را.\u003C\u002Fp>\n\u003Ch2>پس فرقشان در یک جمله\u003C\u002Fh2>\n\u003Cp>\u003Ccode dir=\"ltr\">HTML\u003C\u002Fcode> می‌گوید صفحه از \u003Cstrong>چه\u003C\u002Fstrong> ساخته شده؛ \u003Ccode dir=\"ltr\">CSS\u003C\u002Fcode> می‌گوید آن چیزها \u003Cstrong>چه شکلی\u003C\u002Fstrong> باشند. یکی تار است و یکی پود، و وب از بافتِ این دو ساخته می‌شود. در خودآموز \u003Ca href=\"\u002Fcourses\u002Ftaropood\">تاروپود\u003C\u002Fa> از همین‌جا شروع می‌کنیم: اول تار را محکم می‌بافیم، بعد با پود رنگ و نقش می‌زنیم — قدم‌به‌قدم و با آزمایشگاه زنده‌ی داخل مرورگر، تا هر چیزی را که می‌سازی همان لحظه ببینی.\u003C\u002Fp>","2026-07-19T05:30:00Z","HTML تارِ صفحه است و CSS پودِ آن؛ یکی ساختار و معنا می‌سازد و دیگری رنگ و شکل. با استعاره‌ی تار و پود، فرق این دو را ساده و روشن توضیح می‌دهیم.","فرق HTML و CSS در چیست؟ | یادستان","html-vs-css",140,"HTML و CSS چه فرقی دارند؟ تار و پود وب",1784827101874]