HTML اسکلت هر صفحه وب رو می‌سازه و با تگ‌هایی مثل <head> برای اطلاعات پشت صحنه و <body> برای محتوای قابل دیدن، ساختار سایت رو مشخص می‌کنه. تگ‌های معنایی مثل <header>، <nav>، <main> و <footer> به نظم و سئو کمک می‌کنن. تو این مقاله یه صفحه ساده با هدر، منو، محتوا و فوتر ساختیم تا ببینی هر بخش کجا می‌ره. با دست به کد، ساختار HTML رو یاد بگیر و پایه سایتت رو محکم کن!

 

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

HTML و ساختار سایت

HTML یا "HyperText Markup Language" زبانیه که به مرورگر می‌گه صفحه وب چطور باید ساخته بشه. فکر کن بهش مثل یه نقشه ساختمانی: HTML مشخص می‌کنه کجا دیوار باشه، کجا پنجره و کجا در. هر صفحه وب یه ساختار مشخص داره که از تگ‌ها تشکیل شده. تگ‌ها دستورهایی هستن که به مرورگر می‌گن هر بخش چه نقشی داره، مثلاً تیتر، پاراگراف یا عکس.

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

بخش‌های اصلی ساختار HTML

هر فایل HTML یه اسکلت داره که از چند بخش اصلی تشکیل شده:

  1. اعلان اولیه (<!DOCTYPE html>): به مرورگر می‌گه این یه فایل HTMLه.
  2. تگ ریشه (<html>): کل محتوای صفحه رو در بر می‌گیره.
  3. سر صفحه (<head>): اطلاعات پشت صحنه مثل عنوان و لینک‌ها رو نگه می‌داره.
  4. بدنه (<body>): هر چیزی که تو صفحه دیده می‌شه، اینجاست.

بیایم اینا رو با یه مثال ببینیم.

یه فایل HTML ساده

این کد یه ساختار پایه رو نشون می‌ده:

<!DOCTYPE html>
<html>
<head>
    <title>اولین ساختار من</title>
</head>
<body>
    <h1>سلام دنیا!</h1>
    <p>این یه صفحه ساده‌ست.</p>
</body>
</html>
  • <!DOCTYPE html>: می‌گه این HTML نسخه ۵ه (آخرین استاندارد).
  • <html>: همه‌چیز رو تو خودش جا می‌ده.
  • <head>: عنوان صفحه رو تو نوار مرورگر نشون می‌ده.
  • <body>: محتوایی که کاربر می‌بینه، مثل تیتر و متن.

تگ‌های مهم برای ساختار سایت

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

۱. تگ‌های تیتر (<h1> تا <h6>)

تیترها برای عنوان‌ها و زیرعنوان‌ها استفاده می‌شن. <h1> بزرگ‌ترین و مهم‌ترینه:

<h1>عنوان اصلی</h1>
<h2>یه زیرعنوان</h2>
۲. پاراگراف (<p>)

برای متن‌های اصلی:

<p>این یه پاراگرافه که یه کم توضیح می‌ده.</p>
۳. بخش‌بندی (<div>)

یه جعبه نامرئی که چیزا رو گروه‌بندی می‌کنه:

<div>
    <h2>بخش اول</h2>
    <p>توضیحات این بخش.</p>
</div>
۴. لینک‌ها (<a>)

برای وصل کردن صفحات یا سایت‌های دیگه:

<a href="https://dastbekod.ir">سایت دست به کد</a>
۵. تصاویر (<img>)

برای اضافه کردن عکس:

<img src="photo.jpg" alt="یه عکس ساده">

ساختار یه صفحه واقعی

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

HTML:
<!DOCTYPE html>
<html>
<head>
    <title>ساختار یه سایت</title>
</head>
<body>
    <!-- هدر -->
    <header>
        <h1>دست به کد</h1>
    </header>

    <!-- منوی导航 -->
    <nav>
        <a href="#home">خانه</a> |
        <a href="#about">درباره ما</a> |
        <a href="#contact">تماس</a>
    </nav>

    <!-- محتوای اصلی -->
    <main>
        <h2>خوش اومدی!</h2>
        <p>اینجا قراره طراحی سایت رو یاد بگیری.</p>
        <img src="web.jpg" alt="تصویر وب">
    </main>

    <!-- فوتر -->
    <footer>
        <p>© 2025 دست به کد - همه حقوق محفوظه</p>
    </footer>
</body>
</html>

 

این کدها چیکار می‌کنن؟

  • <header>: بالای صفحه که معمولاً لوگو یا تیتر اصلی رو داره.
  • <nav>: منوی برای جابه‌جایی تو سایت.
  • <main>: محتوای اصلی صفحه.
  • <footer>: پایین صفحه که اطلاعات تماس یا کپی‌رایت رو نگه می‌داره.

این تگ‌ها از HTML5 هستن و به اسم "تگ‌های معنایی" شناخته می‌شن چون به مرورگر و موتورهای جستجو (مثل گوگل) می‌گن هر بخش چه نقشی داره. این کار سایتت رو هم برای کاربر و هم برای سئو بهتر می‌کنه.

چرا ساختار مهمه؟

  • خوانایی: کاربر سریع می‌فهمه کجا چی پیدا کنه.
  • سئو: گوگل سایت‌های منظم رو بیشتر دوست داره.
  • نگهداری: بعداً که سایتت بزرگ شد، راحت‌تر تغییرش می‌دی.

یه پروژه عملی: صفحه "درباره ما"

بیایم با هم یه صفحه "درباره ما" بسازیم تا ساختار رو تمرین کنیم.

HTML:
<!DOCTYPE html>
<html>
<head>
    <title>درباره ما - دست به کد</title>
</head>
<body>
    <header>
        <h1>دست به کد</h1>
        <p>یادگیری طراحی سایت از صفر</p>
    </header>

    <nav>
        <a href="#home">خانه</a> |
        <a href="#about">درباره ما</a> |
        <a href="#learn">آموزش‌ها</a>
    </nav>

    <main>
        <h2>ما کی هستیم؟</h2>
        <p>دست به کد یه سایت آموزشیه که بهت کمک می‌کنه قدم به قدم طراحی سایت رو یاد بگیری.</p>
        <img src="team.jpg" alt="تیم ما">
    </main>

    <footer>
        <p>تماس: info@dastbekod.ir</p>
    </footer>
</body>
</html>

این کد یه صفحه ساده با ساختار مشخصه. می‌تونی یه فایل بسازی، اینو توش کپی کنی و تو مرورگر بازش کنی. هنوز استایل (CSS) نداره، ولی اسکلتش کاملاً مشخصه.

نکات مهم برای ساختار بهتر

  1. از تگ‌های معنایی استفاده کن: به جای <div> برای همه‌چیز، از <header>، <footer> و <main> استفاده کن.
  2. نظم رو رعایت کن: تگ‌ها رو درست ببند (مثلاً <p> با </p>).
  3. توضیح اضافه کن: با <!-- کامنت --> بخش‌ها رو مشخص کن تا بعداً گم نشی.
  4. alt رو فراموش نکن: برای <img> همیشه توضیح بنویس که اگه عکس لود نشد، معلوم باشه چیه.

مشکلات رایج و راه‌حل‌ها

  • صفحه به‌هم‌ریخته‌ست: چک کن تگ‌ها درست بسته شدن یا نه.
  • لینک کار نمی‌کنه: مطمئن شو آدرس href درست باشه.
  • عکس نمیاد: مسیر فایل (src) رو بررسی کن.

قدم بعدی چیه؟

حالا که ساختار HTML رو شناختی، می‌تونی بری سراغ:

  • اضافه کردن استایل با CSS.
  • تعاملی کردن با جاوااسکریپت.
  • ساختن صفحات بیشتر و لینک کردنشون.

حرف آخر

ساختار HTML مثل چیدن آجرای یه خونه‌ست؛ اگه درست بچینی، بقیه کارا راحت‌تر پیش می‌ره. با این مقاله، دیگه می‌دونی یه صفحه وب چطور ساخته می‌شه. دست به کد بزن، این مثال‌ها رو تست کن و اگه سوالی داشتی، تو کامنت‌های "دست به کد" بپرس. تو مقاله‌های بعدی، CSS و جاوااسکریپت رو به این اسکلت اضافه می‌کنیم تا سایتت کامل‌تر بشه!