HTML و CSS چه فرقی دارند؟ تار و پود وب
تصور کن یک صفحهی وب یک پارچه است. هر پارچه از دو نخ بافته میشود: تار و پود. تار نخهای محکمیاند که اسکلت پارچه را نگه میدارند؛ پود نخهاییاند که از میان تار رد میشوند و رنگ و نقش را میآورند. وب دقیقاً همین است: HTML تارِ صفحه است، یعنی ساختار و معنا؛ و CSS پودِ آن است، یعنی رنگ و شکل و چیدمان. تازهکارها اغلب این دو را قاتی میکنند، ولی همینکه مرزشان روشن شود، بقیهی وب ساده میشود.
HTML ساختار و معنا را میسازد
هر چیزی که در یک صفحه میبینی — عنوان، پاراگراف، تصویر، دکمه، فهرست — با HTML ساخته میشود. تو به مرورگر میگویی «این یک عنوان است»، «این یک پاراگراف است»، «این یک تصویر است». هر کدام از اینها یک tag دارد؛ مثلاً یک عنوان اصلی را داخل <h1> میگذاری و یک پاراگراف را داخل <p>.
نکتهی مهم این است: HTML فقط میگوید هر چیز چیست، نه اینکه چه شکلی است. یک <h1> یعنی «مهمترین عنوان این صفحه» — چه بزرگ باشد چه کوچک، چه آبی باشد چه سیاه. همین معنا همان چیزی است که مرورگر، موتور جستجو و screen reader به آن تکیه میکنند. اینکه چرا این معنا اینقدر مهم است، خودش یک بحث کامل است که در نوشتهی چرا فقط <div> کافی نیست؟ بازش کردهایم.
CSS ظاهر را میسازد
حالا که ساختار آماده است، نوبت پود میرسد. با CSS میگویی همان عنوان چه رنگی باشد، چهقدر بزرگ باشد، چه فاصلهای از بقیه داشته باشد و کجای صفحه بنشیند. اول یک selector مینویسی که میگوید «کدام element»، بعد میگویی «چه شکلی». مثلاً به همهی <h1>ها میگویی رنگتان آبی باشد، یا با margin دورشان فاصله میگذاری.
نکتهی جالب این است: تو ساختار را دست نمیزنی. همان HTML ثابت میماند، ولی با عوض کردن چند خط CSS کل ظاهر صفحه عوض میشود. درست مثل همان پارچه که تارش ثابت است ولی با پودِ متفاوت، نقشِ متفاوت میگیرد.
چرا از هم جدا نگهشان میداریم؟
میشد همهچیز را قاتی کرد، ولی جدا نگهداشتنِ ساختار از ظاهر چند سود بزرگ دارد:
- یک بار ساختار را مینویسی و بارها ظاهرش را عوض میکنی، بدون اینکه محتوا بههم بریزد.
- یک فایل
CSSمیتواند ظاهر دهها صفحه را با هم مدیریت کند؛ یک تغییر، همهجا اعمال میشود. - وقتی معنا (
HTML) از رنگولعاب (CSS) جدا باشد، موتورهای جستجو و screen readerها راحتتر صفحه را میفهمند.
یک مثال کوچک
فرض کن این را مینویسی: یک عنوان و یک پاراگراف زیرش. با HTML میگویی این عنوان است و آن پاراگراف. تا اینجا مرورگر یک متنِ سادهی سیاهوسفید نشان میدهد — و همین درست است، چون هنوز پود نبافتهای. بعد با چند خط CSS میگویی عنوان بزرگتر و آبی باشد و پاراگراف کمی خاکستری. حالا همان ساختار، ظاهرِ دلخواه تو را گرفت. اگر فردا نظرت عوض شد، فقط پود را عوض میکنی، نه تار را.
پس فرقشان در یک جمله
HTML میگوید صفحه از چه ساخته شده؛ CSS میگوید آن چیزها چه شکلی باشند. یکی تار است و یکی پود، و وب از بافتِ این دو ساخته میشود. در خودآموز تاروپود از همینجا شروع میکنیم: اول تار را محکم میبافیم، بعد با پود رنگ و نقش میزنیم — قدمبهقدم و با آزمایشگاه زندهی داخل مرورگر، تا هر چیزی را که میسازی همان لحظه ببینی.
