فصل ۲: ساختار پایه یک سند 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>هر پاراگراف، هر عکس، هر لینکی، همه‌ش توی <body> قرار می‌گیره.</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 که می‌سازین، حداقل باید این ساختار پایه رو داشته باشه. در فصل‌های بعدی، شروع می‌کنیم به پر کردن این ساختار با انواع و اقسام محتوا و تگ‌های مختلف! هیجان‌انگیزه، نه؟ 😉