تگ‌های اصلی: html، head، body

تگ‌های اصلی: <html>، <head>، <body> – ستون‌های اصلی صفحه وب! 🏛️

سلام به همگی! توی فصل‌های قبلی با ساختار کلی یه سند HTML آشنا شدیم و اون خط مهم <!DOCTYPE html> رو شناختیم. حالا می‌خوایم عمیق‌تر بشیم و سه تا از مهم‌ترین و اساسی‌ترین تگ‌ها رو بررسی کنیم که هر سند HTML بدون اون‌ها کامل نیست: <html>، <head> و <body>. این‌ها مثل سه بخش اصلی یه خونه هستن: اسکلت کلی، قسمتی که اطلاعات خونه رو نگهداری می‌کنه و جایی که ما زندگی می‌کنیم!

این سه تگ، ساختار بنیادی هر صفحه وب رو تشکیل می‌دن و برای مرورگرها حیاتی هستن.

۱. تگ <html>: پادشاه کل صفحه! 👑

تگ <html>، ریشه‌ی اصلی تمام تگ‌های دیگه توی یه صفحه HTML هست. هر چیزی که در مورد صفحه وب می‌نویسیم، چه اطلاعات مربوط به صفحه (توی <head>) و چه محتوای قابل مشاهده (توی <body>)، باید داخل این تگ قرار بگیره.

کاربرد اصلی:

تعریف کل محتوای صفحه به عنوان یه سند HTML.
معمولاً شامل خصوصیت `lang` برای مشخص کردن زبان صفحه است (مثلاً `lang=”fa”` یا `lang=”en”`).

مثال:


<!DOCTYPE html>
<html lang="fa"> <!-- تمام صفحه داخل این تگ قرار می‌گیره -->
  <!-- اینجا محتوای  و  قرار می‌گیره -->
</html>

۲. تگ <head>: مغز متفکر صفحه! 🧠

تگ <head>، درست بعد از تگ <html> باز می‌شه و اطلاعات مربوط به صفحه رو در خودش نگه می‌داره. این اطلاعات مستقیماً در صفحه نمایش داده نمی‌شن، اما برای مرورگر، موتورهای جستجو و سئو خیلی مهم هستن.

محتویات رایج در <head>:

<meta charset=”UTF-8″>: برای تعیین کدگذاری حروف.
<title>: عنوان صفحه که در تب مرورگر یا بوک‌مارک‌ها دیده می‌شه.
<meta name=”viewport” …>: برای تنظیمات نمایش در دستگاه‌های مختلف.
لینک به فایل‌های CSS خارجی (برای استایل‌دهی).
لینک به فایل‌های JavaScript.
تگ‌های متا برای توضیحات صفحه، کلمات کلیدی و…

مثال:


<html lang="fa">
  <head> <!-- اطلاعات صفحه اینجا قرار می‌گیره -->
    <meta charset="UTF-8">
    <title>صفحه آموزشی من</title>
    <link rel="stylesheet" href="style.css"> <!-- لینک به فایل CSS -->
  </head>
  <body>
    <!-- محتوای قابل مشاهده -->
  </body>
</html>

۳. تگ <body>: جایی که همه چیز اتفاق می‌افته! 🤩

تگ <body>، قلب تپنده صفحه وب شماست! هر چیزی که کاربر در مرورگر می‌بینه و باهاش تعامل داره، باید داخل این تگ قرار بگیره. متن‌ها، پاراگراف‌ها، عکس‌ها، لینک‌ها، جداول، ویدیوها، همه و همه!

کاربرد اصلی:

نگهداری تمام محتوای قابل مشاهده و تعاملی صفحه.
مرورگر این قسمت رو پردازش می‌کنه و به کاربر نمایش می‌ده.

مثال:


<html lang="fa">
  <head>
    <meta charset="UTF-8">
    <title>صفحه آموزشی من</title>
  </head>
  <body> <!-- محتوای قابل مشاهده صفحه -->
    <h1>به دنیای HTML خوش آمدید!</h1>
    <p>این یه پاراگراف ساده است.</p>
    <img src="image.jpg" alt="یه عکس زیبا"> <!-- یه عکس -->
  </body>
</html>

تگ‌های <html>، <head> و <body> پایه‌های اصلی ساختار هر صفحه HTML هستن. مثل پایه‌های یک ساختمان که استحکامش رو تضمین می‌کنن.

با این سه تگ کلیدی، دیگه یه دید کلی و خیلی خوب نسبت به ساختار صفحات وب پیدا کردیم. توی قسمت‌های بعدی، شروع می‌کنیم به پر کردن تگ <body> با انواع مختلف محتوا! پس آماده باشین که خلاقیتمون رو به کار بندازیم! ✨