تا اینجا با مفاهیم اصلی HTML آشنا شدیم و یاد گرفتیم چگونه متن، لینک، تصویر، جدول، فرم و بخش‌های مختلف یک صفحه وب را ایجاد کنیم. همچنین با ویژگی‌ها و تگ‌های معنایی HTML آشنا شدیم و فهمیدیم که هر صفحه وب باید ساختار مشخصی داشته باشد. در این مقاله می‌خواهیم تمام این مفاهیم را در کنار یکدیگر قرار دهیم و ساختار استاندارد یک سند HTML را بررسی کنیم. هدف این است که بعد از مطالعه این مقاله، بتوانید یک فایل HTML را از ابتدا به‌درستی ایجاد کنید، بخش‌های مختلف آن را بشناسید و بدانید هر قسمت چه وظیفه‌ای دارد.

ساختار کلی یک صفحه HTML

یک صفحه HTML استاندارد معمولاً ساختاری شبیه نمونه زیر دارد:

<!DOCTYPE html>
<html lang="fa" dir="rtl">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>صفحه اصلی</title>
</head>

<body>

    <header>
        <h1>وب‌سایت من</h1>
    </header>

    <main>
        <section>
            <h2>درباره ما</h2>
            <p>
                این بخش درباره وب‌سایت توضیح می‌دهد.
            </p>
        </section>
    </main>

    <footer>
        <p>تمام حقوق محفوظ است.</p>
    </footer>

</body>

</html>

این ساختار شاید در نگاه اول کمی طولانی به نظر برسد، اما اگر هر قسمت را جداگانه بررسی کنیم، کاملاً قابل درک خواهد بود.

1. دستور DOCTYPE

اولین خط یک سند HTML معمولاً این است:

<!DOCTYPE html>

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

به زبان ساده:

DOCTYPE به مرورگر می‌گوید صفحه را با استاندارد HTML مدرن تفسیر کند.

نکته مهم این است که DOCTYPE یک تگ HTML معمولی نیست.

یعنی این موارد را با هم اشتباه نگیرید:

<!DOCTYPE html>

و:

<html>

اولی اعلام نوع سند است و دومی ریشه اصلی سند HTML محسوب می‌شود.

2. تگ <html>

بعد از DOCTYPE معمولاً تگ اصلی HTML قرار می‌گیرد:

<html>

تمام محتوای صفحه HTML باید درون این تگ قرار داشته باشد.

مثلاً:

<!DOCTYPE html>

<html>

    <head>
        ...
    </head>

    <body>
        ...
    </body>

</html>

تگ <html> را می‌توانیم ریشه یا Root سند HTML در نظر بگیریم.

3. مشخص کردن زبان صفحه با lang

برای مشخص کردن زبان اصلی صفحه می‌توانیم از ویژگی lang استفاده کنیم:

<html lang="fa">

در یک صفحه فارسی بهتر است زبان را فارسی مشخص کنیم:

<html lang="fa">

برای زبان انگلیسی:

<html lang="en">

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

بنابراین برای یک سایت فارسی معمولاً از این ساختار استفاده می‌کنیم:

<html lang="fa">

4. مشخص کردن جهت صفحه با dir

در زبان فارسی، متن معمولاً از راست به چپ نوشته می‌شود.

برای مشخص کردن این موضوع می‌توانیم از ویژگی dir استفاده کنیم:

<html lang="fa" dir="rtl">

rtl مخفف:

Right To Left

است.

یعنی:

راست به چپ

برای زبان‌هایی مانند انگلیسی که از چپ به راست نوشته می‌شوند، می‌توان از:

dir="ltr"

استفاده کرد.

بنابراین یک صفحه فارسی معمولاً با این خط شروع می‌شود:

<html lang="fa" dir="rtl">

5. بخش <head>

بعد از <html>، معمولاً دو بخش اصلی داریم:

<head>

و:

<body>

بخش <head> اطلاعاتی درباره صفحه را در خود نگه می‌دارد.

محتویات head معمولاً مستقیماً در قسمت اصلی قابل مشاهده صفحه نمایش داده نمی‌شوند.

یک نمونه:

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>وب‌سایت من</title>

</head>

6. تعیین Encoding با charset

یکی از مهم‌ترین تگ‌های داخل head این مورد است:

<meta charset="UTF-8">

UTF-8 یک استاندارد رایج برای نمایش کاراکترهای مختلف است.

این موضوع برای سایت‌های فارسی اهمیت زیادی دارد.

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

برای مثال، در یک صفحه فارسی بهتر است داشته باشیم:

<meta charset="UTF-8">

7. تگ viewport

یکی دیگر از تگ‌های مهم:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

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

برای مثال، کاربران ممکن است سایت شما را با این دستگاه‌ها مشاهده کنند:

• کامپیوتر

• لپ‌تاپ

• تبلت

• موبایل

این تگ یکی از پایه‌های مهم برای طراحی Responsive است که در بخش CSS دوره به‌صورت کامل‌تر با آن آشنا خواهیم شد.

در بیشتر صفحات وب امروزی، استفاده از آن توصیه می‌شود.

8. تگ <title>

تگ <title> عنوان صفحه را مشخص می‌کند:

<title>صفحه اصلی سایت</title>

این عنوان معمولاً در تب مرورگر نمایش داده می‌شود.

برای مثال:

<head>

    <title>بنو سرویس</title>

</head>

عنوان صفحه باید تا حد امکان واضح و مرتبط با محتوای صفحه باشد.

برای مثال:

<title>فروشگاه اینترنتی</title>

بهتر از عنوانی مانند:

<title>صفحه 1</title>

است.

9. توضیحات صفحه با description

می‌توانیم توضیح کوتاهی درباره صفحه نیز در head قرار دهیم:

<meta
    name="description"
    content="آشنایی با خدمات و محصولات این وب‌سایت">

این اطلاعات بخشی از محتوای قابل مشاهده صفحه نیست.

استفاده درست از اطلاعاتی مانند title و description در ساختار صفحات وب و موضوعات مرتبط با SEO اهمیت دارد که در مباحث بعدی و هنگام کار روی صفحات واقعی بیشتر با آن آشنا خواهیم شد.

10. Favicon چیست؟

احتمالاً هنگام باز کردن بعضی سایت‌ها در کنار عنوان صفحه در تب مرورگر، یک آیکون کوچک دیده‌اید.

به این آیکون معمولاً Favicon گفته می‌شود.

برای اضافه کردن آن می‌توانیم از تگ link استفاده کنیم:

<link rel="icon" href="images/favicon.png">

برای مثال اگر ساختار پروژه ما این باشد:

project/
│
├── index.html
│
└── images/
    └── favicon.png

می‌توانیم بنویسیم:

<link rel="icon" href="images/favicon.png">

Favicon یک جزئیات کوچک است، اما در پروژه‌های واقعی به حرفه‌ای‌تر شدن ظاهر سایت کمک می‌کند.

11. اتصال فایل CSS

اگر بخواهیم ظاهر صفحه را با CSS طراحی کنیم، می‌توانیم فایل CSS را از داخل head متصل کنیم.

مثلاً:

<link rel="stylesheet" href="style.css">

اگر فایل‌ها به شکل زیر باشند:

project/
│
├── index.html
└── style.css

کد بالا صحیح است.

در این حالت HTML مسئول ساختار محتوا است و CSS مسئول ظاهر آن خواهد بود.

مثلاً:

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>وب‌سایت من</title>

    <link rel="stylesheet" href="style.css">

</head>

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

12. بخش <body>

بعد از head، بخش مهم دیگری داریم:

<body>

محتوای اصلی و قابل مشاهده صفحه معمولاً درون body قرار می‌گیرد.

برای مثال:

<body>

    <h1>سلام دنیا</h1>

    <p>
        این اولین صفحه وب من است.
    </p>

</body>

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

13. ساختار محتوای داخل Body

داخل body می‌توانیم از تگ‌هایی که در مقالات قبلی یاد گرفتیم استفاده کنیم.

مثلاً:

<body>

    <h1>فروشگاه من</h1>

    <p>
        به فروشگاه اینترنتی ما خوش آمدید.
    </p>

    <a href="products.html">
        مشاهده محصولات
    </a>

</body>

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

برای مثال:

<body>

    <header>
        ...
    </header>

    <main>
        ...
    </main>

    <footer>
        ...
    </footer>

</body>

این موضوع را در مقاله مربوط به تگ‌های معنایی HTML یاد گرفتیم.

14. استفاده از Header

header معمولاً برای بخش ابتدایی یک صفحه یا یک بخش از محتوا استفاده می‌شود.

مثلاً:

<header>

    <h1>فروشگاه من</h1>

    <nav>
        <a href="index.html">خانه</a>
        <a href="products.html">محصولات</a>
        <a href="contact.html">تماس با ما</a>
    </nav>

</header>

15. استفاده از Main

محتوای اصلی صفحه را می‌توان داخل main قرار داد:

<main>

    <h2>محصولات جدید</h2>

    <p>
        در این بخش محصولات جدید فروشگاه نمایش داده می‌شوند.
    </p>

</main>

main باید نشان‌دهنده محتوای اصلی همان صفحه باشد.

16. استفاده از Section

اگر بخش اصلی صفحه چند قسمت مختلف داشته باشد، می‌توانیم از section استفاده کنیم:

<main>

    <section>
        <h2>درباره ما</h2>

        <p>
            ما در زمینه طراحی سایت فعالیت می‌کنیم.
        </p>
    </section>

    <section>
        <h2>خدمات ما</h2>

        <p>
            طراحی سایت، طراحی اپلیکیشن و خدمات دیجیتال.
        </p>
    </section>

</main>

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

17. استفاده از Footer

در قسمت پایانی صفحه می‌توانیم از footer استفاده کنیم:

<footer>

    <p>
        تمام حقوق محفوظ است.
    </p>

</footer>

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

18. یک قالب استاندارد و ساده برای صفحات فارسی

حالا می‌توانیم یک قالب مناسب برای شروع پروژه‌های HTML داشته باشیم:

<!DOCTYPE html>

<html lang="fa" dir="rtl">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta
        name="description"
        content="توضیح کوتاهی درباره صفحه">

    <title>عنوان صفحه</title>

    <link rel="icon" href="images/favicon.png">

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <header>

        <h1>عنوان سایت</h1>

        <nav>
            <a href="index.html">خانه</a>
            <a href="about.html">درباره ما</a>
            <a href="contact.html">تماس با ما</a>
        </nav>

    </header>

    <main>

        <section>

            <h2>عنوان بخش</h2>

            <p>
                محتوای این بخش در این قسمت قرار می‌گیرد.
            </p>

        </section>

    </main>

    <footer>

        <p>
            تمام حقوق محفوظ است.
        </p>

    </footer>

</body>

</html>

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

19. بررسی خط‌به‌خط قالب استاندارد

بیایید این قالب را به شکل خلاصه مرور کنیم.

خط اول

<!DOCTYPE html>

نوع سند را مشخص می‌کند.

تگ HTML

<html lang="fa" dir="rtl">

ریشه سند است و زبان و جهت متن را مشخص می‌کند.

Head

<head>

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

Charset

<meta charset="UTF-8">

Encoding صفحه را مشخص می‌کند.

Viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

برای نمایش مناسب صفحه در اندازه‌های مختلف صفحه‌نمایش اهمیت دارد.

Description

<meta name="description" content="...">

توضیح کوتاهی درباره صفحه ارائه می‌کند.

Title

<title>عنوان صفحه</title>

عنوان صفحه را مشخص می‌کند.

Favicon

<link rel="icon" href="images/favicon.png">

آیکون صفحه را مشخص می‌کند.

CSS

<link rel="stylesheet" href="style.css">

فایل CSS را به صفحه متصل می‌کند.

Body

<body>

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

20. اهمیت مرتب‌نویسی HTML

فرض کنید HTML خود را به این شکل بنویسیم:

<html><head><title>صفحه</title></head><body><h1>سلام</h1><p>متن</p></body></html>

از نظر خوانایی بسیار نامناسب است.

بهتر است آن را به شکل زیر بنویسیم:

<html>

    <head>
        <title>صفحه</title>
    </head>

    <body>

        <h1>سلام</h1>

        <p>
            متن
        </p>

    </body>

</html>

مرتب‌نویسی باعث می‌شود:

• ساختار صفحه را راحت‌تر بفهمیم.

• خطاها را سریع‌تر پیدا کنیم.

• تغییرات آینده ساده‌تر شوند.

• کد حرفه‌ای‌تر و قابل نگهداری‌تر باشد.

21. تو در تو بودن تگ‌ها

همان‌طور که در مقاله‌های قبلی یاد گرفتیم، تگ‌ها می‌توانند داخل یکدیگر قرار بگیرند.

مثلاً:

<main>

    <section>

        <h2>درباره ما</h2>

        <p>
            این متن درباره شرکت است.
        </p>

    </section>

</main>

در اینجا:

main
 └── section
      ├── h2
      └── p

قرار گرفته است.

هرچه پروژه بزرگ‌تر شود، رعایت این ساختار اهمیت بیشتری پیدا می‌کند.

22. یک اشتباه رایج: قرار دادن محتوای قابل مشاهده داخل Head

این کار صحیح نیست:

<head>

    <h1>عنوان سایت</h1>

</head>

چون head برای اطلاعات و تنظیمات مربوط به سند است.

محتوای اصلی قابل مشاهده باید داخل body قرار بگیرد:

<body>

    <h1>عنوان سایت</h1>

</body>

23. یک اشتباه رایج: فراموش کردن Title

ممکن است صفحه بدون title نیز باز شود، اما بهتر است هر صفحه عنوان مشخصی داشته باشد:

<title>صفحه اصلی</title>

در پروژه‌های واقعی، هر صفحه باید عنوان مناسب خودش را داشته باشد.

برای مثال:

<title>محصولات | فروشگاه من</title>

و:

<title>تماس با ما | فروشگاه من</title>

24. یک اشتباه رایج: فراموش کردن UTF-8

برای سایت‌های فارسی بهتر است این خط را در head قرار دهید:

<meta charset="UTF-8">

این کار از مشکلات مربوط به نمایش حروف و کاراکترها جلوگیری می‌کند.

25. یک اشتباه رایج: اشتباه در مسیر فایل‌ها

اگر بنویسیم:

<link rel="stylesheet" href="style.css">

اما فایل CSS در پوشه دیگری باشد، مرورگر نمی‌تواند آن را پیدا کند.

مثلاً اگر ساختار پروژه این باشد:

project/
│
├── index.html
│
├── css/
│   └── style.css
│
└── images/

باید بنویسیم:

<link rel="stylesheet" href="css/style.css">

همان مفهومی که در مقاله مربوط به مسیرها یاد گرفتیم، برای CSS، تصاویر، فایل‌های JavaScript و سایر فایل‌ها نیز کاربرد دارد.

26. یک صفحه HTML کامل

حالا یک مثال واقعی‌تر ایجاد کنیم.

فرض کنید می‌خواهیم صفحه اصلی یک سایت ساده را ایجاد کنیم:

<!DOCTYPE html>

<html lang="fa" dir="rtl">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta
        name="description"
        content="صفحه اصلی یک وب‌سایت آموزشی">

    <title>وب‌سایت آموزشی</title>

</head>

<body>

    <header>

        <h1>وب‌سایت آموزشی</h1>

        <nav>
            <a href="index.html">خانه</a>
            <a href="courses.html">دوره‌ها</a>
            <a href="about.html">درباره ما</a>
            <a href="contact.html">تماس با ما</a>
        </nav>

    </header>

    <main>

        <section>

            <h2>به وب‌سایت ما خوش آمدید</h2>

            <p>
                در این وب‌سایت می‌توانید مطالب آموزشی مختلفی
                درباره طراحی وب و برنامه‌نویسی مطالعه کنید.
            </p>

        </section>

        <section>

            <h2>دوره‌های آموزشی</h2>

            <ul>
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
            </ul>

        </section>

    </main>

    <footer>

        <p>
            تمام حقوق محفوظ است.
        </p>

    </footer>

</body>

</html>

این صفحه هنوز ظاهر حرفه‌ای ندارد؛ زیرا هنوز CSS را شروع نکرده‌ایم.

اما از نظر ساختار HTML، پایه مناسبی برای ادامه کار محسوب می‌شود.

27. HTML به تنهایی چه کاری انجام می‌دهد؟

تا اینجا بیشتر روی ساختار تمرکز کردیم.

HTML می‌تواند مواردی مانند این‌ها را مشخص کند:

• عنوان‌ها

• متن‌ها

• لینک‌ها

• تصاویر

• فرم‌ها

• جدول‌ها

• لیست‌ها

• بخش‌های مختلف صفحه

• ساختار کلی سند

اما HTML به تنهایی ابزار مناسبی برای طراحی ظاهر حرفه‌ای نیست.

برای مثال، HTML مشخص می‌کند:

<h1>فروشگاه من</h1>

اما اینکه این عنوان:

• چه رنگی باشد

• چه اندازه‌ای داشته باشد

• چه فونتی داشته باشد

• کجا قرار بگیرد

• چه فاصله‌ای داشته باشد

بیشتر وظیفه CSS است.

در نتیجه:

HTML → ساختار و محتوا
CSS → ظاهر و طراحی
JavaScript → رفتار و تعامل

این سه مفهوم پایه اصلی مسیر یادگیری طراحی وب ما هستند.

28. تمرین اول — ساخت یک صفحه فارسی استاندارد

یک فایل به نام:

index.html

ایجاد کنید.

سپس یک ساختار استاندارد برای آن بنویسید که شامل موارد زیر باشد:

• DOCTYPE

• html

• head

• charset

• viewport

• title

• body

عنوان صفحه را مثلاً این قرار دهید:

اولین صفحه وب من

29. تمرین دوم — ساخت صفحه شخصی

یک صفحه شخصی ساده ایجاد کنید.

صفحه باید شامل این بخش‌ها باشد:

Header
    نام شما
    منوی ساده

Main
    معرفی
    مهارت‌ها
    علاقه‌مندی‌ها

Footer
    اطلاعات تماس

برای بخش مهارت‌ها از لیست استفاده کنید:

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

30. تمرین سوم — اضافه کردن تصویر و لینک

به صفحه شخصی خود یک تصویر اضافه کنید:

<img src="images/profile.jpg" alt="تصویر پروفایل">

سپس چند لینک به صفحات مختلف اضافه کنید:

<nav>

    <a href="index.html">خانه</a>

    <a href="about.html">درباره من</a>

    <a href="contact.html">تماس با من</a>

</nav>

31. تمرین چهارم — ساخت ساختار یک سایت شرکتی

فرض کنید می‌خواهید یک سایت شرکتی ساده بسازید.

ساختار زیر را ایجاد کنید:

Header
 ├── نام شرکت
 └── منو

Main
 ├── معرفی شرکت
 ├── خدمات
 └── تماس با ما

Footer
 └── اطلاعات حقوقی

برای هر قسمت از تگ مناسب استفاده کنید.

چالش این مقاله

بدون کپی کردن نمونه کامل بالا، یک فایل HTML از صفر ایجاد کنید.

صفحه شما باید شامل موارد زیر باشد:

Header

• نام سایت

• منوی اصلی

Main

• یک عنوان اصلی

• یک پاراگراف معرفی

• یک بخش درباره ما

• یک بخش خدمات

• یک تصویر

• یک لیست از خدمات

Footer

• متن کپی‌رایت

• یک لینک تماس

همچنین موارد زیر را فراموش نکنید:

<!DOCTYPE html>

<html lang="fa" dir="rtl">

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

و:

<title>...</title>

نکات مهم این مقاله

در این مقاله یاد گرفتیم:

• هر سند HTML با DOCTYPE شروع می‌شود.

• تگ html ریشه سند HTML است.

• lang زبان صفحه را مشخص می‌کند.

• dir جهت متن را مشخص می‌کند.

• head شامل اطلاعات مربوط به سند است.

• body شامل محتوای اصلی صفحه است.

• meta charset="UTF-8" برای تعیین Encoding استفاده می‌شود.

• viewport برای نمایش مناسب صفحه در دستگاه‌های مختلف اهمیت دارد.

• title عنوان صفحه را مشخص می‌کند.

• description می‌تواند توضیحی درباره صفحه ارائه کند.

• favicon آیکون کوچک صفحه است.

• فایل CSS را می‌توان با link به HTML متصل کرد.

• محتوای صفحه را می‌توان با header، main، section و footer ساختاربندی کرد.

• مرتب‌نویسی HTML باعث خوانایی و نگهداری بهتر کد می‌شود.

• مسیر فایل‌ها باید به‌درستی نوشته شوند.

جمع‌بندی

ساختار استاندارد HTML یکی از مهم‌ترین پایه‌های طراحی وب است. اگر از همان ابتدا صفحات خود را با ساختار صحیح ایجاد کنید، در ادامه کار با CSS و JavaScript نیز بسیار راحت‌تر خواهید بود. یک صفحه HTML استاندارد از بخش‌هایی مانند DOCTYPE، html، head و body تشکیل می‌شود و هرکدام وظیفه مشخصی دارند. همچنین با استفاده از تگ‌های معنایی مانند header، main، section و footer می‌توانیم محتوای صفحه را به شکل منطقی و قابل فهم سازمان‌دهی کنیم.

با پایان این مقاله، بخش اول دوره یعنی «آشنایی با وب و HTML» به پایان رسید. در این بخش از شناخت اولیه صفحات وب شروع کردیم و قدم‌به‌قدم با HTML، ساختار تگ‌ها، متن، لینک، تصویر، فرم، ویژگی‌ها و تگ‌های معنایی آشنا شدیم.

در بخش بعدی وارد دنیای HTML5 می‌شویم و با قابلیت‌ها و امکانات جدیدتر HTML آشنا خواهیم شد.

مقاله بعدی: «HTML5 چیست و چه تفاوتی با HTML دارد؟»