فصل ۲: ساختار پایه یک سند HTML

فصل ۲: ساختار پایه یک سند HTML 🏗️

سلام دوباره به همراه‌های کنجکاو و خلاقم! 😍 توی فصل اول با هم اولین قدم رو برداشتیم و یه صفحه “Hello World!” ساختیم. حالا وقتشه که بریم سراغ ساختار اصلی و استخوان‌بندی یه صفحه HTML. مثل وقتی که می‌خوایم یه خونه بسازیم، اول باید یه نقشه و اسکلت قوی براش داشته باشیم، درسته؟ HTML هم همین کار رو برای صفحات وب انجام می‌ده.

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

کالبدشکافی یه سند HTML استاندارد 🧐

بذارین یه سند HTML استاندارد رو با هم ببینیم و اجزاش رو بشناسیم:


<!DOCTYPE html>
<html lang="fa"> <!-- زبان صفحه رو فارسی انتخاب کردیم -->

  <head>
    <meta charset="UTF-8"> <!-- تعیین کننده کدگذاری حروف برای پشتیبانی از زبان فارسی -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- تنظیمات برای نمایش بهتر در دستگاه‌های مختلف -->
    <title>عنوان صفحه من</title> <!-- این همون عنوانیه که توی تب مرورگر نشون داده می‌شه -->
    <!-- اینجا می‌تونیم لینک فایل‌های CSS یا اطلاعات دیگه رو هم اضافه کنیم -->
  </head>

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

</html>

حالا بریم سراغ معنی هر کدوم از این قسمت‌ها:

<!DOCTYPE html>: این خط اول صفحه، یه جور اعلامیه به مرورگره که می‌گه “هی مرورگر! این صفحه با نسخه ۵ زبان HTML نوشته شده!” این خط خیلی مهمه و باید اولین چیزی باشه که توی فایل HTML می‌نویسیم.
<html>: این تگ، مثل یه کادر بزرگ دور تمام محتوای صفحه ما می‌کشه. یعنی کل صفحه HTML داخل این تگ قرار می‌گیره.
lang=”fa”: این یه خصوصیت (Attribute) برای تگ `html` هست که به مرورگر و موتورهای جستجو می‌گه زبان اصلی صفحه فارسی هست. برای سئو و دسترسی‌پذیری خیلی مهمه که زبان درست رو مشخص کنیم. اگه صفحه انگلیسی بود، می‌نوشتیم `lang=”en”`.
<head>: این قسمت مثل سرِ صفحه ماست. اینجا اطلاعاتی قرار می‌گیره که مرورگر برای فهمیدن و نمایش بهتر صفحه نیاز داره، ولی مستقیماً توی خود صفحه دیده نمی‌شه.
<meta charset=”UTF-8″>: این تگ متا، کدگذاری حروف رو مشخص می‌کنه. `UTF-8` یه کدگذاری استاندارد هست که همه زبان‌ها، از جمله فارسی رو به خوبی پشتیبانی می‌کنه. بدون این، ممکنه حروف فارسی رو به صورت درهم و برهم ببینین.
<meta name=”viewport” …>: این تگ برای اینه که صفحه ما توی دستگاه‌های مختلف (موبایل، تبلت، دسکتاپ) درست نمایش داده بشه و قابلیت ریسپانسیو بودن رو داشته باشه.
<title>: متنی که اینجا می‌نویسیم، همون عنوانیه که توی تب مرورگر یا موقع بوک‌مارک کردن صفحه نشون داده می‌شه.
<body>: این قسمت، همون بدن و محتوای اصلی صفحه ماست! هرچیزی که کاربر توی مرورگر می‌بینه (متن‌ها، عکس‌ها، لینک‌ها، جدول‌ها و…) باید داخل تگ `body` قرار بگیره.

ساختار بالا، پایه و اساس هر صفحه HTML هست. مثل یه قالبه که همیشه ازش استفاده می‌کنیم و بعد محتوای خودمون رو داخلش می‌چینیم.

چرا این ساختار مهمه؟ 🤔

این ساختار استاندارد به چند دلیل خیلی مهمه:

قابل فهم برای مرورگرها: همه مرورگرها این ساختار رو می‌شناسن و می‌دونن چطور محتوا رو پردازش کنن.
برای سئو (SEO) عالیه: موتورهای جستجو مثل گوگل، این ساختار رو می‌فهمن و می‌تونن محتوای شما رو بهتر ایندکس کنن. مشخص کردن زبان صفحه (مثل `lang=”fa”`) هم به سئو کمک می‌کنه.
دسترسی‌پذیری (Accessibility): با رعایت استانداردها، صفحه شما برای افراد با نیازهای خاص (مثلاً کسانی که از صفحه‌خوان استفاده می‌کنن) هم قابل استفاده‌تر می‌شه.
مدیریت راحت‌تر: وقتی یه ساختار مشخص داشته باشین، اضافه کردن CSS، جاوااسکریپت و محتوای جدید خیلی راحت‌تر و منظم‌تر می‌شه.

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