در درس قبل اولین فایل HTML خود را ساختیم، چند خط کد داخل آن نوشتیم و نتیجه را در مرورگر مشاهده کردیم. در آن مرحله هدف این بود که خیلی سریع وارد بخش عملی شویم و اولین صفحه وب خود را بسازیم.
حالا وقت آن رسیده است که کدی را که نوشتهایم دقیقتر بررسی کنیم و با ساختار سند HTML آشنا شویم.
تقریباً هر صفحه HTML از یک ساختار پایه تشکیل میشود. در این ساختار بخشهایی مانند <!DOCTYPE html>، عنصر <html>، بخش <head> و بخش <body> هرکدام وظیفه مشخصی دارند.
در این درس یاد میگیریم این قسمتها چه کاری انجام میدهند، در چه ترتیبی قرار میگیرند و چگونه یک سند HTML استاندارد و مرتب ایجاد کنیم.
ساختار سند HTML چگونه است؟
یک فایل HTML ساده میتواند ساختاری شبیه نمونه زیر داشته باشد:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>صفحه آزمایشی من</title>
</head>
<body>
<h1>به وبسایت من خوش آمدید</h1>
<p>این اولین صفحه HTML من است.</p>
</body>
</html>در نگاه اول ممکن است این ساختار کمی پیچیده به نظر برسد، اما بخشهای اصلی آن بسیار ساده هستند.
اگر بخواهیم ساختار بالا را به شکل خلاصه ببینیم، میتوانیم آن را اینطور در نظر بگیریم:
DOCTYPE
│
└── html
├── head
│ ├── meta
│ └── title
│
└── body
├── h1
└── pعنصر html عنصر اصلی سند است و دو بخش مهم head و body را در خود قرار میدهد.
در ادامه هرکدام از این بخشها را جداگانه بررسی میکنیم.
DOCTYPE در HTML چیست؟
اولین خطی که معمولاً در ابتدای یک سند HTML جدید مشاهده میکنیم این است:
<!DOCTYPE html>این عبارت به مرورگر اعلام میکند که سند پیش رو باید بهعنوان یک سند HTML مدرن پردازش شود.
DOCTYPE یک عنصر معمولی HTML مانند p یا h1 نیست و محتوایی در صفحه ایجاد نمیکند.
در HTML امروزی همین شکل کوتاه کافی است:
<!DOCTYPE html>اگر در منابع بسیار قدیمی HTML جستجو کنید، ممکن است DOCTYPEهای بسیار طولانیتری مشاهده کنید. برای نمونه در نسخههای قدیمی HTML و XHTML اعلانهای پیچیدهتری استفاده میشد.
برای پروژههای HTML امروزی نیازی به استفاده از آن ساختارهای قدیمی نداریم.
DOCTYPE را کجا قرار دهیم؟
DOCTYPE باید در ابتدای سند HTML و قبل از عنصر html نوشته شود:
<!DOCTYPE html>
<html>
</html>در پروژههای این دوره نیز از همین ساختار استفاده خواهیم کرد.
تگ html چیست؟
بعد از DOCTYPE به عنصر اصلی سند HTML میرسیم:
<html>
</html>عنصر html ریشه اصلی سند HTML است و تقریباً تمام محتوای سند داخل آن قرار میگیرد.
ساختار پایه به شکل زیر است:
<!DOCTYPE html>
<html>
...
</html>بخشهای اصلی head و body نیز داخل همین عنصر قرار میگیرند:
<html>
<head>
...
</head>
<body>
...
</body>
</html>ویژگی lang در تگ html چیست؟
در مثالهای این دوره معمولاً عنصر html را به شکل زیر مینویسیم:
<html lang="fa">قسمت lang="fa" زبان اصلی محتوای سند را مشخص میکند.
fa کد زبان فارسی است.
بنابراین:
<html lang="fa">به این معناست که زبان اصلی محتوای این سند فارسی است.
اگر صفحهای به زبان انگلیسی داشته باشیم، میتوانیم بنویسیم:
<html lang="en">و برای زبانهای دیگر نیز کد زبان مناسب استفاده میشود.
چرا مشخص کردن زبان صفحه مهم است؟
مشخص کردن زبان سند به مرورگرها و ابزارهای مختلف کمک میکند زبان اصلی محتوا را بهتر تشخیص دهند.
این اطلاعات بهخصوص برای ابزارهای دسترسپذیری مانند صفحهخوانها اهمیت دارد و میتواند در پردازش صحیح محتوای صفحه نیز مؤثر باشد.
به همین دلیل بهتر است از همان ابتدای یادگیری عادت کنیم زبان اصلی هر سند را مشخص کنیم.
تگ head در HTML چیست؟
اولین بخش اصلی داخل عنصر html معمولاً head است:
<head>
</head>بخش head حاوی اطلاعات و تنظیماتی درباره خود سند HTML است.
بخش زیادی از اطلاعاتی که داخل head قرار میگیرند مستقیماً بهعنوان محتوای صفحه به کاربر نمایش داده نمیشوند.
برای مثال ممکن است اطلاعات زیر در این قسمت قرار بگیرند:
- عنوان سند
- نوع کدگذاری کاراکترها
- توضیحات صفحه
- اطلاعات مرتبط با نمایش در موبایل
- لینک فایلهای CSS
- برخی فایلهای JavaScript
- اطلاعات و متادیتای مربوط به صفحه
یک بخش ساده head میتواند به شکل زیر باشد:
<head>
<meta charset="UTF-8">
<title>آموزش HTML</title>
</head>فعلاً فقط دو مورد مهم charset و title را بهصورت مقدماتی بررسی میکنیم. در درسهای بعدی درباره عناصر و متادیتای بخش head بیشتر صحبت خواهیم کرد.
meta charset=”UTF-8″ چیست؟
درون بخش head معمولاً این خط را مشاهده میکنیم:
<meta charset="UTF-8">این دستور مشخص میکند سند ما از کدگذاری کاراکتری UTF-8 استفاده میکند.
به زبان ساده، Character Encoding مشخص میکند کاراکترها و حروف موجود در فایل چگونه تفسیر شوند.
UTF-8 از مجموعه بسیار بزرگی از کاراکترها و زبانهای مختلف، از جمله زبان فارسی، پشتیبانی میکند.
به همین دلیل در پروژههای HTML این دوره از UTF-8 استفاده خواهیم کرد.
اگر charset را مشخص نکنیم چه میشود؟
مرورگرهای امروزی در بسیاری از شرایط میتوانند نوع کدگذاری متن را تشخیص دهند، اما بهتر است این موضوع را به حدس مرورگر واگذار نکنیم.
با قرار دادن:
<meta charset="UTF-8">از همان ابتدا بهطور مشخص اعلام میکنیم سند با چه نوع کدگذاری نوشته شده است.
تگ title در HTML چیست؟
یکی دیگر از عناصر مهم بخش head عنصر title است:
<title>آموزش HTML</title>عنصر title عنوان سند HTML را مشخص میکند.
این عنوان معمولاً در تب مرورگر نمایش داده میشود.
برای مثال:
<title>صفحه درباره ما</title>باعث میشود مرورگر این عنوان را برای سند در نظر بگیرد.
title با h1 چه تفاوتی دارد؟
این دو را نباید با یکدیگر اشتباه بگیریم.
title در بخش head قرار میگیرد و عنوان خود سند را مشخص میکند:
<head>
<title>آموزش طراحی سایت</title>
</head>اما h1 داخل body قرار میگیرد و یکی از عنوانهای محتوایی قابل مشاهده صفحه است:
<body>
<h1>آموزش طراحی سایت</h1>
</body>ممکن است متن این دو مشابه باشد، اما نقش آنها با یکدیگر متفاوت است.
در درسهای مربوط به عنوانها و همچنین مباحث SEO این تفاوت را دقیقتر بررسی خواهیم کرد.
تگ body در HTML چیست؟
دومین بخش اصلی سند HTML عنصر body است:
<body>
</body>بخش اصلی محتوایی که کاربر داخل صفحه مرورگر مشاهده میکند، معمولاً درون body قرار میگیرد.
برای مثال:
<body>
<h1>آموزش HTML</h1>
<p>به وبسایت من خوش آمدید.</p>
</body>در این نمونه عنوان و پاراگراف داخل بدنه صفحه قرار گرفتهاند و برای کاربر قابل مشاهده هستند.
در آینده عناصر مختلفی را داخل body خواهیم نوشت؛ از جمله:
- عنوانها
- پاراگرافها
- لینکها
- تصاویر
- فهرستها
- جدولها
- فرمها
- ویدئو و صوت
- بخشهای مختلف ساختار صفحه
تفاوت head و body چیست؟
درک تفاوت این دو بخش از همان ابتدای یادگیری HTML اهمیت زیادی دارد.
به صورت ساده میتوان گفت:
head = اطلاعات و تنظیمات مربوط به سند
body = محتوای اصلی صفحه
برای مثال:
<head>
<meta charset="UTF-8">
<title>صفحه من</title>
</head>
<body>
<h1>عنوان صفحه</h1>
<p>محتوای صفحه</p>
</body>عنوان موجود در title بخشی از اطلاعات سند است، اما عنوان h1 و پاراگراف موجود در body بخشی از محتوای قابل مشاهده صفحه هستند.
ترتیب صحیح بخشهای سند HTML
بهتر است از همان ابتدا ساختار استاندارد و مرتب یک فایل HTML را یاد بگیریم.
نمونه پیشنهادی ما به شکل زیر است:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>عنوان صفحه</title>
</head>
<body>
<h1>عنوان اصلی صفحه</h1>
<p>محتوای صفحه در این قسمت قرار میگیرد.</p>
</body>
</html>به ترتیب:
- DOCTYPE در ابتدای سند قرار میگیرد.
- عنصر
htmlسند را دربرمیگیرد. - ابتدا بخش
headقرار میگیرد. - بعد از آن بخش
bodyقرار میگیرد. - محتوای قابل مشاهده صفحه داخل
bodyنوشته میشود.
چرا کدها را با تورفتگی مینویسیم؟
در مثالهای این دوره مشاهده میکنید که عناصر داخلی کمی نسبت به عناصر والد فاصله دارند:
<html>
<head>
<title>صفحه من</title>
</head>
</html>این فاصلهها یا تورفتگیها باعث میشوند رابطه بخشهای مختلف کد را راحتتر تشخیص دهیم.
برای مثال از روی ساختار بالا بهسادگی متوجه میشویم که:
headداخلhtmlقرار دارد.titleداخلheadقرار دارد.
مرتب نوشتن کد تأثیر زیادی بر خوانایی و نگهداری پروژه دارد، مخصوصاً زمانی که فایل HTML بزرگتر شود.
آیا فاصله و خط خالی روی نتیجه HTML تأثیر دارد؟
در بسیاری از قسمتهای کد HTML میتوان برای خوانایی بیشتر بین بخشها خط خالی یا فاصله قرار داد.
برای مثال:
<body>
<h1>عنوان صفحه</h1>
<p>پاراگراف اول</p>
<p>پاراگراف دوم</p>
</body>این خطهای خالی باعث میشوند کد برای ما خواناتر شود.
البته نحوه پردازش فاصلهها در HTML جزئیات بیشتری دارد که در مباحث مربوط به متن و عناصر HTML با آن آشنا خواهیم شد.
آیا میتوان head یا body را حذف کرد؟
در بعضی شرایط، قواعد پردازش HTML به مرورگر اجازه میدهند برخی تگها را حتی در صورت نوشته نشدن در کد منبع بهصورت ضمنی در ساختار سند ایجاد کند.
اما این موضوع به این معنا نیست که در زمان یادگیری یا نوشتن کدهای معمول خودمان بهتر است این بخشها را حذف کنیم.
در این دوره ساختار سند را بهصورت صریح، خوانا و کامل مینویسیم:
<html>
<head>
...
</head>
<body>
...
</body>
</html>این روش برای یادگیری بسیار واضحتر است و ساختار فایل را نیز برای توسعهدهنده خواناتر میکند.
یک فایل HTML استاندارد برای تمرین بسازیم
حالا فایل index.html را که در درس قبل ساختیم باز کنید.
محتوای آن را به شکل زیر قرار دهید:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>تمرین ساختار HTML</title>
</head>
<body>
<h1>اولین پروژه HTML من</h1>
<p>من در حال یادگیری ساختار یک سند HTML هستم.</p>
</body>
</html>فایل را ذخیره کنید و آن را در مرورگر باز کنید.
در صفحه باید عنوان اصلی و پاراگراف را مشاهده کنید.
همچنین به تب مرورگر نگاه کنید. عبارت زیر باید بهعنوان عنوان سند نمایش داده شود:
تمرین ساختار HTMLاین مقدار همان متنی است که داخل عنصر title نوشتهایم.
یک آزمایش ساده انجام دهیم
برای اینکه تفاوت head و body بهتر مشخص شود، ابتدا مقدار title را تغییر دهید:
<title>وبسایت آزمایشی من</title>فایل را ذخیره و صفحه را Refresh کنید.
مشاهده میکنید که عنوان تب مرورگر تغییر میکند.
حالا متن داخل h1 را تغییر دهید:
<h1>به وبسایت من خوش آمدید</h1>دوباره فایل را ذخیره و صفحه را Refresh کنید.
این بار محتوایی که داخل خود صفحه مشاهده میکنید تغییر خواهد کرد.
این آزمایش ساده تفاوت میان اطلاعات موجود در head و محتوای موجود در body را بهتر نشان میدهد.
اشتباهات رایج در ساختار سند HTML
در ابتدای یادگیری HTML ممکن است چند اشتباه ساده رخ دهد. بهتر است از همین ابتدا با آنها آشنا باشیم.
فراموش کردن DOCTYPE
بهتر است فایلهای HTML جدید را با این خط آغاز کنید:
<!DOCTYPE html>قرار دادن body بیرون از html
ساختار زیر صحیح نیست:
<html>
</html>
<body>
<p>متن صفحه</p>
</body>body باید درون عنصر html قرار بگیرد:
<html>
<body>
<p>متن صفحه</p>
</body>
</html>قرار دادن محتوای اصلی صفحه در head
عنوانها، پاراگرافها، تصاویر و سایر محتوای اصلی صفحه را نباید بهصورت معمول داخل head قرار دهیم.
این محتوا متعلق به بخش body است.
فراموش کردن charset
بهتر است از همان ابتدا کدگذاری UTF-8 را در بخش head مشخص کنیم:
<meta charset="UTF-8">مشخص نکردن زبان سند
برای یک صفحه فارسی بهتر است زبان اصلی سند را مشخص کنیم:
<html lang="fa">آیا باید این ساختار را حفظ کنیم؟
نیازی نیست با فشار تمام خطوط را حفظ کنید.
ساختار پایه HTML آنقدر در تمرینها و پروژههای آینده تکرار خواهد شد که پس از مدتی بهصورت طبیعی آن را به خاطر خواهید سپرد.
مهمتر این است که بدانید هر بخش چه وظیفهای دارد:
<!DOCTYPE html>نوع سند HTML را مشخص میکند.<html>عنصر اصلی سند است.langزبان اصلی سند را مشخص میکند.<head>اطلاعات و متادیتای سند را نگهداری میکند.<meta charset="UTF-8">کدگذاری کاراکترها را مشخص میکند.<title>عنوان سند را مشخص میکند.<body>محتوای اصلی صفحه را در خود قرار میدهد.
تمرین درس سوم
برای تمرین، یک فایل جدید با نام زیر بسازید:
practice.htmlبدون کپی کردن مثالهای بالا، سعی کنید خودتان ساختار اصلی فایل را بنویسید.
فایل شما باید شامل این موارد باشد:
- DOCTYPE
- عنصر
htmlبا زبان فارسی - بخش
head - کدگذاری UTF-8
- یک عنوان برای سند
- بخش
body - یک عنوان اصلی
- یک پاراگراف
سپس فایل را در مرورگر باز کنید و مطمئن شوید هم محتوای صفحه و هم عنوان تب مرورگر مطابق انتظار نمایش داده میشوند.
در این درس چه چیزهایی یاد گرفتیم؟
در این درس با ساختار پایه یک فایل HTML آشنا شدیم و یاد گرفتیم:
- ساختار اصلی یک سند HTML چگونه است.
- DOCTYPE چیست و در کجای سند قرار میگیرد.
- عنصر
htmlچه نقشی دارد. - چرا زبان صفحه را با
langمشخص میکنیم. - بخش
headبرای چه اطلاعاتی استفاده میشود. - UTF-8 چیست و چگونه آن را مشخص میکنیم.
- عنصر
titleچه کاربردی دارد. - بخش
bodyچه محتوایی را در خود نگه میدارد. - تفاوت اصلی بین
headوbodyچیست.
جمعبندی
حالا با ساختار سند HTML آشنا هستیم و میدانیم قسمتهای اصلی یک فایل HTML چگونه در کنار یکدیگر قرار میگیرند.
DOCTYPE در ابتدای سند قرار میگیرد، عنصر html ساختار اصلی سند را دربرمیگیرد، head اطلاعات مربوط به سند را نگهداری میکند و محتوای اصلی صفحه داخل body قرار میگیرد.
درک این ساختار بسیار مهم است، زیرا تقریباً تمام فایلهای HTML که در ادامه دوره میسازیم بر همین پایه شکل خواهند گرفت.
در درس بعدی از نمای کلی سند عبور میکنیم و دقیقتر بررسی میکنیم که تگ و عنصر در HTML چیست، تگهای باز و بسته چگونه کار میکنند و عناصر چگونه داخل یکدیگر قرار میگیرند.
درس قبلی: شروع کار با HTML؛ ابزارهای لازم و ساخت اولین صفحه وب
درس بعدی: تگ و عنصر در HTML چیست؟ آشنایی با تگ باز، بسته و عناصر تو در تو
حبیب قنبری
نویسنده و مدرس در ویترین؛ علاقهمند به انتقال تجربههای کاربردی و قابل اجرا.
مشاهده همه نوشتهها
2 دیدگاه