۱. تگ <html>
ستون فقرات💡
این تگ، والد (Parent) تمام تگهای موجود در صفحه هست. یعنی وقتی مرورگر یک فایل رو باز میکنه، دنبال این تگ میگرده تا بفهمه کجای این فایل، شروع کدنویسی وب هست.
کارکرد = بدنه یه ساختمون
مثل بدنه یک ساختمونه که همه چیز (دیوارها، پنجرهها، سقف) داخل اون قرار میگیره!
🔸نکته فنی: هر کدی که برای سایتت مینویسی، باید داخل این تگ (بین <html> و </html>) باشه.
اگر نباشه، مرورگر ممکنه گیج بشه و سایتت درست نمایش داده نشه❌
۲. تگ <head>
مغز متفکر🧠
این تگ، جایگاه اطلاعات غیرمستقیه
یعنی چیزهایی که تو خود صفحه سایت به کاربر نمایش داده نمیشه، اما مرورگر و موتورهای جستجو (مثل گوگل) به شدت بهش نیاز دارن!!
کارکرد = پشتصحنه
مثلا پشت صحنه یه برنامه تلویزیونیه تماشاگرها شاید پشتصحنه رو نبینن، اما بدون اون برنامه اجرا نمیشه.
داخلش چی میذاریم؟
🔸عنوان صفحه (<title>): اسم سایت
🔸فایلهای استایل (<link>): اتصال فایل استایل css به فایل html
🔸اطلاعات متا (<meta>): توضیحات برای سئو (SEO) و تنظیمات فونت و زبان
۳. تگ <body>
صحنه نمایش🎭
حالا که با <head> آشنا شدی، وقتشه با برادرش آشنا بشی؛ تگ <body> یعنی هر چیزی که کاربر توی مرورگر میبینه، اینجاست
کارکرد = صحنه نمایش
متن ها، عکس ها، دکمه ها، ویدیوها، فرم ها… خلاصه کل محتوای قابل مشاهده، داخل این تگ قرار میگیره
🔸نکته: در هر صفحه فقط یک <body> داریم و همه چیز باید داخلش باشه
۴.تگ <h1>
بزرگترین تیتر♨️
تگ h1 یعنی Heading 1؛ مهمترین و بزرگترین عنوان صفحه
مثل تیتر درشت روزنامه یا اسم فیلم روی پوسترش
کارکرد = نمایانگر موضوع سایت
نشون میده موضوع اصلی صفحه چیه
🔸نکته سئو (SEO): گوگل اول از همه به h1 صفحه نگاه میکنه تا بفهمه صفحه دربارهی چیه! پس بهتره در هر صفحه فقط یک h1 داشته باشیم.
🔸خانوادهاش: h1 تا h6 داریم که هرچی عدد بزرگتر بشه، عنوان کوچیکتره (h2 برای زیرتیترها، h3 برای زیرمجموعه هاشون و…)