معرفی HTML5 و تفاوت اون با نسخه‌های قبلی

HTML5 چیه و چرا این‌قدر مهمه؟

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

یه نگاه سریع به قبل از HTML5

قبل از HTML5، اگه می‌خواستی یه ویدیو تو صفحه‌ات نمایش بدی، باید سراغ Flash می‌رفتی. برای پخش صدا هم همین‌طور. نه فلش امن بود، نه روی موبایل‌ها درست کار می‌کرد، نه استاندارد مشخصی داشت. از طرفی، کدنویس‌ها برای هر بخش از صفحه (منو، هدر، فوتر) مجبور بودن از یه <div> ساده با یه کلاس دلخواه استفاده کنن؛ یعنی نه مرورگر می‌فهمید این بخش «منو»ست، نه گوگل، نه ابزارهای صفحه‌خوان برای افراد کم‌بینا.

HTML5 چه چیزی رو عوض کرد؟

HTML5 که کارش از سال ۲۰۰۸ شروع شد و رسماً در سال ۲۰۱۴ نهایی شد، چند تا تغییر اساسی آورد:

• پخش مستقیم صدا و ویدیو با تگ‌های <audio> و <video>، بدون نیاز به هیچ افزونه‌ای.
• تگ‌های معنایی (Semantic) مثل <header>، <footer>، <nav>، <article> که هم به مرورگر و هم به گوگل می‌گن «این قسمت دقیقاً چیه».
• فرم‌های هوشمندتر با انواع جدید ورودی مثل ایمیل، تاریخ و شماره، که خودشون اعتبارسنجی اولیه رو انجام می‌دن.
• رسم و طراحی مستقیم تو مرورگر با <canvas>، بدون نیاز به تصویر آماده.
• ذخیره‌سازی اطلاعات تو خود مرورگر با Web Storage، جایگزین بهتر و امن‌تری برای کوکی‌های قدیمی.

یه مقایسه ساده

فرض کن می‌خوای بخش منوی سایتت رو بسازی. تو HTML قدیمی این‌جوری می‌نوشتی:

<div class="nav">
  <div class="nav-item">خانه</div>
  <div class="nav-item">درباره ما</div>
</div>

مرورگر و گوگل از این کد فقط می‌فهمن چند تا div تو هم هستن؛ هیچ نشونه‌ای از «منو بودن» این بخش نیست. اما تو HTML5 همین بخش رو این‌جوری می‌نویسیم:

<nav>
  <a href="/">خانه</a>
  <a href="/about">درباره ما</a>
</nav>

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

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

یه چیزی که خیلی‌ها گیج میشن: دیگه چیزی به اسم «HTML5.1» یا «HTML5.2» رسماً منتشر نمیشه. از یه جایی به بعد، مرجع نگهداری استاندارد (که بهش WHATWG می‌گن) تصمیم گرفت HTML رو به‌صورت یه استاندارد زنده (Living Standard) نگه داره؛ یعنی هر وقت یه ویژگی جدید لازم باشه، به‌مرور به همین HTML5 اضافه میشه، بدون اینکه منتظر یه نسخه‌ی کاملاً جدید بمونیم.

چند اشتباه رایج

• خیلی‌ها فکر می‌کنن HTML5 فقط یعنی «تگ ویدیو و صوت»؛ در حالی که بخش بزرگی از قدرتش تو ساختار معنایی و فرم‌های هوشمنده.
• بعضیا هنوز از <div class="header"> استفاده می‌کنن، در حالی که تگ استاندارد <header> وجود داره.
• فکر کردن اینکه چون HTML5 قدیمیه (از ۲۰۱۴)، دیگه چیز جدیدی نداره؛ در صورتی که چون Living Standard هست، هنوز هم داره APIهای جدید بهش اضافه میشه.

نکته‌ی سئو

استفاده از تگ‌های معنایی HTML5 مثل <article>، <section> و <nav> مستقیماً روی سئوی سایت اثر می‌ذاره، چون گوگل بهتر می‌فهمه کدوم بخش صفحه محتوای اصلیه و کدوم بخش فقط منو یا سایدباره. این یعنی رتبه‌بندی بهتر با همون محتوا، فقط با تغییر ساختار کد.

جمع‌بندی

HTML5 صرفاً یه به‌روزرسانی جزئی نبود؛ یه بازنگری کامل تو نحوه‌ی ساخت صفحات وب بود که هم به مرورگرها قدرت بیشتری داد (پخش رسانه، رسم گرافیک، ذخیره‌سازی)، هم به کدنویس‌ها ابزار بهتری برای نوشتن کدی معنادار و قابل فهم برای ماشین‌ها.