اولین فایل HTML5 خودت رو بساز
تا اینجا فقط دربارهی HTML حرف زدیم؛ حالا وقتشه یه فایل واقعی بسازیم. تو این درس قراره دقیقاً ببینیم یه فایل HTML5 استاندارد از چه تیکههایی تشکیل شده و هر تیکه چه وظیفهای داره.
اسکلت پایهی هر فایل HTML5
هر فایل HTML5، فارغ از اینکه چقدر پیچیده باشه، از همین اسکلت ثابت شروع میشه:
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<title>عنوان صفحه</title>
</head>
<body>
<h1>سلام دنیا</h1>
<p>این اولین صفحهی من هست.</p>
</body>
</html>الان بیا این کد رو خط به خط باز کنیم و ببینیم هر بخشش دقیقاً چیکار میکنه.
خط اول: DOCTYPE
<!DOCTYPE html>این خط اولین چیزیه که باید تو هر فایل HTML بنویسی. کارش اینه که به مرورگر میگه «این سند رو با آخرین استاندارد HTML5 تفسیر کن». تو نسخههای قدیمی HTML این خط خیلی طولانی و پیچیده بود (مثلاً برای HTML 4.01 یه آدرس کامل و شماره نسخه داشت)، اما تو HTML5 این خط به همین شکل ساده خلاصه شده. اگه این خط رو ننویسی، بعضی مرورگرها ممکنه صفحه رو تو «حالت quirks» نمایش بدن که باعث رفتارهای غیرمنتظره تو ظاهر صفحه میشه.
تگ html و ویژگیهای lang و dir
<html lang="fa" dir="rtl">تگ <html> ریشهی اصلی کل سنده؛ یعنی همهچیز، از head تا body، باید داخل همین تگ قرار بگیره.
lang="fa"به مرورگر و موتورهای جستجو میگه محتوای این صفحه به زبان فارسیه. این ویژگی هم برای سئو مهمه، هم برای صفحهخوانها (که تلفظ درست کلمات رو بر اساس زبان انتخاب میکنن).dir="rtl"جهت متن رو از راستبهچپ تنظیم میکنه؛ بدون این ویژگی، مرورگر بهصورت پیشفرض متن فارسی رو هم چپبهراست نمایش میده که کاملاً بههمریخته میشه.
بخش head
<head>
<meta charset="UTF-8">
<title>عنوان صفحه</title>
</head>هر چیزی که داخل <head> باشه، تو خود صفحه نمایش داده نمیشه؛ این بخش فقط اطلاعات پشتصحنه رو نگه میداره، مثل:
<meta charset="UTF-8">: مشخص میکنه فایل با کدگذاری UTF-8 ذخیره شده. این خط خیلی مهمه، مخصوصاً برای زبان فارسی؛ بدونش حروف فارسی به شکل علامتهای عجیب و درهم نمایش داده میشن.<title>: متنی که تو تب مرورگر و نتایج جستجوی گوگل بهعنوان عنوان صفحه نشون داده میشه.
بخش body
<body>
<h1>سلام دنیا</h1>
<p>این اولین صفحهی من هست.</p>
</body>برخلاف head، هر چیزی که داخل <body> بنویسی، همون چیزیه که کاربر تو صفحه میبینه: متنها، تصاویر، لینکها، فرمها و... تو این مثال، یه عنوان (h1) و یه پاراگراف (p) داریم که بعداً تو درسهای بعدی کامل باهاشون آشنا میشیم.
خروجی این کد چیه؟
اگه این فایل رو با اسمی مثل index.html ذخیره کنی و تو مرورگر باز کنی، یه صفحهی ساده میبینی که بالای تب مرورگرش نوشته «عنوان صفحه»، و داخل صفحه یه تیتر بزرگ «سلام دنیا» و زیرش یه جملهی معمولی «این اولین صفحهی من هست» به شکل راستچین نمایش داده میشه.
نکتهی مهم دربارهی تودرتو بودن تگها (Nesting)
تگها تو HTML باید بهدرستی تودرتو بسته بشن. یعنی اگه تگی رو داخل تگ دیگه باز کردی، باید اول اون تگ داخلی رو ببندی، بعد تگ بیرونی رو. مثلاً این کد درسته:
<p>این یک <strong>متن مهم</strong> است.</p>اما این کد اشتباهه، چون ترتیب بستن تگها رعایت نشده:
<p>این یک <strong>متن مهم</p></strong> است.چند اشتباه رایج
- فراموشکردن
<!DOCTYPE html>که باعث میشه مرورگر صفحه رو درست تفسیر نکنه. - ننوشتن
meta charset="UTF-8"که باعث بهمریختگی حروف فارسی میشه. - گذاشتن محتوای قابلنمایش (مثل متن یا تصویر) داخل
<head>بهجای<body>. - فراموشکردن
dir="rtl"برای صفحات فارسی که باعث میشه متن بههمریخته نمایش داده بشه.
بهترین روشها
- همیشه فایل رو با کدگذاری UTF-8 ذخیره کن، مخصوصاً وقتی محتوای فارسی داری.
- برای صفحات فارسی همیشه
lang="fa"وdir="rtl"رو با هم بذار. - تورفتگی (Indentation) مرتب برای تگهای تودرتو استفاده کن تا کد خواناتر بمونه.
نکتهی سئو
تگ <title> یکی از مهمترین فاکتورهای سئوی هر صفحهست؛ همون چیزیه که تو نتایج گوگل بهعنوان لینک آبیرنگ نمایش داده میشه. ویژگی lang هم به گوگل کمک میکنه صفحه رو برای کاربرای همزبان بهتر نمایش بده.
نکتهی دسترسیپذیری
ویژگی lang برای نرمافزارهای صفحهخوان (Screen Reader) حیاتیه، چون بدون این ویژگی، این نرمافزارها ممکنه متن فارسی رو با تلفظ اشتباه (مثل انگلیسی) بخونن.
جمعبندی
هر فایل HTML5 از یه ساختار ثابت تشکیل شده: اعلام نوع سند با DOCTYPE، تگ ریشه html با زبان و جهت مشخص، بخش head برای اطلاعات پشتصحنه، و بخش body برای محتوای قابلمشاهده. همین چهار تیکه، پایهی تمام صفحاتی هست که از این به بعد میسازیم.