یادم می‌آید در یکی از اولین پروژه‌هایی که یک قالب قدیمی وردپرسی را بازسازی می‌کردم، مدیر فنی شرکت پرسید «این قالب HTML5 است؟» و من بدون تردید گفتم بله، چون در ابتدای فایل <!DOCTYPE html> نوشته شده بود. آن پاسخ، چند دقیقه بعد با یک بازبینی کوتاه از طرف او به یک درس تبدیل شد: قالب در ظاهر HTML5 بود اما هیچ‌کدام از تگ‌های معنایی، فرم‌های مدرن یا APIهای بومی HTML5 را نداشت. Doctype تنها نشانه‌ی HTML5 نیست؛ تفاوت‌های بنیادی‌تری وجود دارد که مرز بین یک سند HTML4 مدرن و یک سند HTML5 واقعی را مشخص می‌کنند. از آن روز، فهم من از HTML5 از یک «نسخه‌ی جدید HTML» به «یک استاندارد زنده و تکامل‌یابنده» تغییر کرد.

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

HTML5 دقیقاً چیست؟

HTML5 آخرین نسخه‌ی استاندارد HTML است که توسط کنسرسیوم W3C و گروه WHATWG (Web Hypertext Application Technology Working Group) توسعه یافته. اما این تعریف، نیمی از ماجراست. HTML5 در واقع یک استاندارد زنده است — به این معنا که دیگر «نسخه» ندارد و به‌طور مداوم به‌روزرسانی می‌شود. برخلاف HTML4 که نسخه‌های شماره‌دار داشت (HTML 4.01, XHTML 1.0 و ...)، HTML5 یک پلتفرم در حال تکامل است که هر چند ماه ویژگی‌های جدیدی به آن اضافه می‌شود.

سه دلیل که این تغییر فلسفی اهمیت دارد:

  • پایان عصر نسخه‌ها: دیگر منتظر «HTML6» نباشید — ویژگی‌های جدید، تدریجاً به همان HTML5 اضافه می‌شوند.
  • تکامل همراه با مرورگرها: هر مرورگر در زمان خودش ویژگی‌های جدید را پشتیبانی می‌کند و شما باید با feature detection (تشخیص ویژگی) تصمیم بگیرید چه چیزی را استفاده کنید.
  • رویکرد کاربر-محور: HTML5 از ابتدا برای «کاربر» طراحی شده، نه برای «سازنده‌ی مرورگر». این یعنی ویژگی‌هایی مثل اعتبارسنجی فرم بومی، پخش ویدیو بدون پلاگین و ذخیره‌سازی داده در مرورگر، همه در خدمت تجربه‌ی کاربری هستند.

یک نکته‌ی مهم که در تیم‌های فنی زیاد تکرار می‌کنم: HTML5 فقط یک زبان نشانه‌گذاری نیست؛ یک پلتفرم وب است که شامل HTML، CSS و JavaScript در تعامل با مجموعه‌ای از APIهای بومی مرورگر می‌شود. برای درک کامل این تفاوت فلسفی، مرور استانداردهای HTML و CSS و CSS مدرن از Flexbox تا Grid دید وسیع‌تری می‌دهد.

HTML5 یک نسخه نیست؛ یک استاندارد زنده است که هر روز نفس می‌کشد و نفس شما را در پروژه تعیین می‌کند.

داستان کوتاه: مسیر از HTML4 تا HTML5

برای درک بهتر HTML5، باید کمی به عقب برگردیم. در دهه‌ی ۲۰۰۰، دو مسیر موازی برای توسعه‌ی وب وجود داشت:

  • XHTML: مسیر سخت‌گیرانه و مبتنی بر XML که توسط W3C ترویج می‌شد. سند XHTML باید دقیقاً معتبر باشد، همه‌ی تگ‌ها بسته شده باشند و خودسری‌ای در ساختار جایز نبود.
  • HTML4: مسیر عملی که مرورگرها به‌طور واقعی پشتیبانی می‌کردند و بیشتر سایت‌ها بر پایه‌ی آن ساخته شده بودند.

در سال ۲۰۰۴، گروهی از توسعه‌دهنده‌های بزرگ (از جمله Mozilla، Opera و Apple) گروه WHATWG را تشکیل دادند چون احساس می‌کردند W3C از واقعیت‌های عملی وب فاصله گرفته. آن‌ها مسیر جدیدی را شروع کردند که بعداً به HTML5 تبدیل شد. نهایتاً در سال ۲۰۰۸، W3C هم پذیرفت که HTML5 مسیر رسمی است و این دو گروه با هم به توسعه‌ی استاندارد ادامه دادند.

نتیجه‌ی این همکاری، یک استاندارد واحد و کاربردی است که از سال ۲۰۱۴ به‌عنوان استاندارد رسمی شناخته می‌شود اما امروز یک «Living Standard» است — یعنی همیشه در حال به‌روزرسانی، بدون شماره‌ی نسخه‌ی جدید.

DOCTYPE و مرز ظاهری HTML5

اولین نشانه‌ی ظاهری HTML5، سادگی DOCTYPE است:

<!DOCTYPE html>

در HTML4 و XHTML، DOCTYPE طولانی و پیچیده بود:

<!-- HTML 4.01 Strict -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

HTML5 این پیچیدگی را حذف کرد. DOCTYPE فعلی فقط یک هدف دارد: مرورگر را از حالت «quirks mode» (حالت رفتار قدیمی) خارج کند و به «standards mode» (حالت استاندارد) ببرد. اگر DOCTYPE را حذف کنید، مرورگر به quirks mode می‌رود و رفتارهایی مثل باکس‌سایزینگ و ترازبندی به‌شکل غیرمنتظره‌ای تغییر می‌کند. این تفاوت در فلکس باکس در CSS و گرید در CSS به‌طور واضح دیده می‌شود چون هر دو به box-sizing صحیح وابسته‌اند.

نکته‌ی مهم: DOCTYPE تنها نشانه‌ی HTML5 بودن یک سند نیست. بسیاری از قالب‌های وردپرسی، DOCTYPE را درست دارند اما هیچ‌کدام از ویژگی‌های بنیادی HTML5 را استفاده نمی‌کنند. تفاوت واقعی، در لایه‌های بعدی ظاهر می‌شود.

تگ‌های معنایی: بزرگ‌ترین تغییر واقعی

مهم‌ترین تفاوت HTML5 با نسخه‌های قبلی، معرفی تگ‌های معنایی است. قبل از HTML5، اگر می‌خواستید یک بخش از صفحه را مشخص کنید، چاره‌ای جز استفاده از <div> با کلاس معنادار نداشتید:

<!-- در HTML4 -->
<div id="header">...</div>
<div id="nav">...</div>
<div id="main">...</div>
<div id="footer">...</div>

در HTML5، این ساختار با تگ‌های معنایی جایگزین می‌شود:

<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>

تگ‌های معنایی جدید HTML5:

  • <header> — سربرگ صفحه یا یک بخش
  • <nav> — ناحیه‌ی ناوبری
  • <main> — محتوای اصلی (فقط یک‌بار در هر صفحه)
  • <article> — محتوای مستقل (پست، خبر، نظر کاربر)
  • <section> — بخشی از محتوا با موضوع مرتبط
  • <aside> — محتوای جانبی (سایدبار، تبلیغات)
  • <footer> — پانویس صفحه یا یک بخش
  • <figure> و <figcaption> — تصویر با توضیح
  • <time> — تاریخ یا زمان ماشین‌خوان
  • <mark> — متن هایلایت

در پروژه‌ای که یک قالب وردپرسی هفت‌ساله را بازنویسی کردیم، تبدیل کل ساختار از div به HTML5 معنایی باعث شد امتیاز Lighthouse در بخش Accessibility از ۵۸ به ۹۲ و SEO از ۷۱ به ۸۸ برسد، بدون یک خط تغییر در CSS. مطالعه‌ی کامل این مبحث در HTML سمنتیک آمده است.

فرم‌های HTML5 و اعتبارسنجی بومی

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

انواع جدید input

typeقابلیت جدید
emailاعتبارسنجی خودکار ایمیل
urlاعتبارسنجی آدرس وب
telکیبورد عددی در موبایل
numberکیبورد عددی + دکمه‌های بالا/پایین
date، time، datetime-localانتخابگر بومی تاریخ و ساعت
colorپالت رنگ بومی
rangeاسلایدر لمسی
searchفیلد جستجو با دکمه‌ی پاک کردن

اعتبارسنجی بومی

HTML5 چند ویژگی استاندارد برای اعتبارسنجی معرفی کرد که بدون یک خط جاوااسکریپت کار می‌کنند:

<input
  type="text"
  pattern="[0-9]{10}"
  minlength="10"
  maxlength="10"
  required
  title="کد ملی باید ۱۰ رقم باشد">

مرورگر قبل از ارسال فرم، این ویژگی‌ها را چک می‌کند و پیام خطای بومی نمایش می‌دهد. این یک برد سه‌گانه است: سریع‌تر از اعتبارسنجی سرور، دسترس‌پذیرتر از بازنویسی با JS، و بومی با زبان مرورگر کاربر. مطالعه‌ی کامل فرم‌ها در HTML5 در فرم در HTML آمده است.

HTML5 اعتبارسنجی فرم را از دوش جاوااسکریپت برداشت و به مرورگر سپرد؛ همین یک تصمیم، حجم کد فرم‌ها در پروژه‌های واقعی را محسوس کاهش می‌دهد.

Audio و Video: پایان عصر پلاگین

قبل از HTML5، اگر می‌خواستید در سایت ویدیو یا صدا پخش کنید، چاره‌ای جز استفاده از Adobe Flash یا پلاگین‌های مشابه نداشتید. این وابستگی، مشکلات امنیتی، سازگاری و کارایی زیادی ایجاد می‌کرد — به‌ویژه روی موبایل که Flash هیچ‌وقت به‌طور کامل پشتیبانی نشد.

HTML5 با دو تگ <audio> و <video>، پخش رسانه را به یک قابلیت بومی تبدیل کرد:

<video controls width="800" height="450" poster="poster.webp">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
  <track kind="captions" src="captions.vtt" srclang="fa" label="فارسی">
  مرورگر شما از تگ video پشتیبانی نمی‌کند.
</video>

سه ویژگی مهم در این تگ:

  • controls: نمایش کنترل‌های بومی پخش (پلی، صدا، تمام‌صفحه).
  • poster: تصویر پیش‌نمایش قبل از شروع پخش.
  • track: زیرنویس یا توضیحات صوتی — حیاتی برای دسترس‌پذیری. مطالعه‌ی بیشتر در استانداردهای دسترس‌پذیری وب.

نکته‌ی مهم: پشتیبانی مرورگرها از فرمت‌های ویدیو متفاوت است. به همین دلیل، معمولاً از چند <source> استفاده می‌شود تا مرورگر اولین فرمت پشتیبانی‌شده را انتخاب کند. الگوی رایج امروز: MP4 (H.264) به‌عنوان fallback و WebM (VP9) به‌عنوان نسخه‌ی بهینه‌ی مرورگرهای مدرن.

Canvas و SVG: گرافیک بدون افزونه

HTML5 دو روش بومی برای گرافیک معرفی کرد:

<canvas>

یک بوم گرافیکی دو‌بعدی که با جاوااسکریپت رسم می‌شود. کاربرد اصلی: نمودارهای داینامیک، بازی‌های مرورگری، ویرایشگر تصویر، و انیمیشن‌های پیچیده. مطالعه‌ی موازی این لایه با JavaScript در کار با DOM در جاوااسکریپت و مفاهیم پیشرفته جاوااسکریپت آمده است.

<svg>

گرافیک برداری که در HTML ادغام می‌شود و با CSS قابل استایل‌دهی است. کاربرد اصلی: آیکون‌ها، لوگوها، نمودارهای ساده. مزیت SVG بر canvas: قابلیت scale بی‌افت کیفیت، دسترسی به DOM، و قابلیت استایل‌دهی با CSS. مطالعه‌ی بیشتر در انتخابگرهای CSS.

APIهای بومی HTML5 که هنوز ناشناخته‌اند

یکی از مهم‌ترین جنبه‌های HTML5 که اکثراً نادیده گرفته می‌شود، مجموعه‌ی APIهای بومی است که مرورگرها در اختیار توسعه‌دهنده‌ها قرار می‌دهند:

  • Web Storage API: localStorage و sessionStorage برای ذخیره‌سازی داده در مرورگر کاربر، بدون کوکی. ساده‌تر، سریع‌تر و بدون محدودیت حجمی کوکی‌ها.
  • Geolocation API: دسترسی به موقعیت جغرافیایی کاربر (با اجازه‌ی صریح او).
  • Drag and Drop API: پیاده‌سازی drag-and-drop بومی برای فایل‌ها و عناصر HTML.
  • Web Workers: اجرای JavaScript در thread جداگانه، بدون بلاک کردن UI. مطالعه‌ی بیشتر در بهینه سازی جاوااسکریپت.
  • History API: کنترل برنامه‌ای روی history مرورگر، پایه‌ی SPAها.
  • File API: خواندن و پردازش فایل‌های آپلودشده، بدون ارسال به سرور. مطالعه‌ی موازی در فرم در HTML.

در پروژه‌ای که یک داشبورد تحلیلی داشتیم، استفاده از Web Workers برای پردازش داده‌های بزرگ، تجربه‌ی کاربری را به‌طور محسوسی روان‌تر کرد. چون thread اصلی مرورگر آزاد می‌ماند و UI در حین پردازش، پاسخگو بود. مطالعه‌ی این لایه در بهینه‌سازی سرعت سایت و Core Web Vitals چیست آمده است.

مقایسه‌ی دقیق HTML4 و HTML5

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

ویژگیHTML4 / XHTMLHTML5
DOCTYPEطولانی با DTD<!DOCTYPE html>
ساختار معناییdiv با id/classheader، nav، main، article، section، aside، footer
اعتبارسنجی فرمفقط با JSبومی با required، pattern، type
پخش رسانهپلاگین (Flash، Silverlight)audio و video بومی
گرافیکپلاگین یا تصویرcanvas و svg
ذخیره‌سازی دادهفقط کوکیWeb Storage، IndexedDB
بومی برای موبایلنداردviewport، form types، touch events
APIهای جانبینداردGeolocation، Web Workers، History و ...

HTML5 در دنیای امروز: استاندارد زنده

نکته‌ای که خیلی‌ها نمی‌دانند: HTML5 از سال ۲۰۱۴ «استاندارد زنده» است. یعنی دیگر نسخه‌ی شماره‌دار ندارد و به‌طور مداوم به‌روزرسانی می‌شود. ویژگی‌هایی مثل <dialog>، <details>، <template> و حتی ویژگی‌های CSS مثل Container Queries، همه در چارچوب همان HTML5 و استانداردهای مرتبط با آن به‌وجود آمده‌اند.

سه نتیجه‌ی عملی این تغییر فلسفی:

  1. دیگر منتظر HTML6 نباشید: ویژگی‌های جدید تدریجاً اضافه می‌شوند و شما با feature detection تصمیم می‌گیرید از کدام‌شان استفاده کنید.
  2. پشتیبانی مرورگرها همگام نیست: بعضی ویژگی‌ها در Chrome زودتر از Safari می‌آیند. باید با ابزارهایی مثل Can I Use پشتیبانی را چک کنید.
  3. تست مداوم ضروری است: هر چند ماه، قابلیت‌های جدیدی اضافه می‌شوند که می‌توانند کار شما را ساده‌تر کنند.

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

اشتباهات رایج درباره HTML5

  • DOCTYPE به‌تنهایی کافی است: این رایج‌ترین اشتباه. اگر سند شما فقط DOCTYPE دارد اما از تگ‌های معنایی و ویژگی‌های جدید استفاده نمی‌کند، از مزیت‌های HTML5 بهره نمی‌برید.
  • استفاده از تگ‌های منسوخ: تگ‌هایی مثل <center>، <font>، <big> و <frame> در HTML5 حذف شده‌اند. جایگزین‌های CSS آن‌ها در آموزش CSS از صفر آمده است.
  • نادیده گرفتن viewport: بدون متا viewport، HTML5 در موبایل بی‌فایده است. مطالعه‌ی کامل در متا تگ ها در HTML.
  • فراموش کردن feature detection: استفاده از APIهایی که همه‌ی مرورگرها پشتیبانی نمی‌کنند بدون fallback. همیشه با if (feature in window) قبل از استفاده چک کنید.
  • عدم استفاده از تگ‌های معنایی: در قالب‌هایی که DOCTYPE جدید اما ساختار div-محور دارند. این‌ها HTML5 ظاهری دارند اما نه واقعی.
  • video و audio بدون زیرنویس: نادیده گرفتن دسترس‌پذیری رسانه. زیرنویس با <track> یک الزام، نه لوکس. مطالعه‌ی بیشتر در استانداردهای دسترس‌پذیری وب.
  • عدم تست cross-browser: ویژگی‌های HTML5 در همه‌ی مرورگرها یکسان نیستند. همیشه روی Chrome، Firefox، Safari و مرورگرهای موبایل تست کنید.
  • نادیده گرفتن سمنتیک رسانه: استفاده از <div> به‌جای <figure> برای تصویر و ویدیو. این ساختار، معنای معنایی را از بین می‌برد.

بخشی از این اشتباهات در HTML سمنتیک و تگ های پرکاربرد HTML هم آمده است.

زیر پوست HTML5: موتور مرورگر و نسل جدید

اینجا وارد لایه‌ای می‌شوم که در پروژه‌های معمولی به آن نگاه نمی‌شود اما برای مهندسان پلتفرم و توسعه‌دهنده‌های ارشد اهمیت دارد. آنچه موتور مرورگر با HTML5 شما می‌کند، در پنج مفهوم خلاصه می‌شود:

  1. HTML5 Parser و دو حالت Parsing: HTML5 یک الگوریتم پارس دقیق و مشخص تعریف می‌کند که مرورگرها موظف به پیاده‌سازی آن هستند. برخلاف HTML4 که در موارد خطا آزادی عمل داشت، HTML5 رویکرد «تخفیف با ترمیم» دارد: خطاها را نادیده می‌گیرد اما با یک الگوریتم مشخص آن‌ها را ترمیم می‌کند. نتیجه: خروجی یکسان از سند نامعتبر در تمام مرورگرها. این پیشرفت، تفاوت بین یک تجربه‌ی سازگار و یک تجربه‌ی متفاوت در هر مرورگر است. مطالعه‌ی موازی این لایه با استانداردها در استانداردهای HTML و CSS آمده است.
  2. Feature Detection و Progressive Enhancement: چون HTML5 یک استاندارد زنده است و مرورگرها همگام پیشرفت نمی‌کنند، شما باید با تشخیص ویژگی تصمیم بگیرید چه چیزی را استفاده کنید. الگو: ابتدا با HTML5 سمنتیک پایه بنویسید، سپس با JavaScript قابلیت‌های پیشرفته‌تر را اضافه کنید. این رویکرد progressive enhancement در پروژه‌های حرفه‌ای، تفاوت بین یک سایت مقاوم و یک سایت شکننده است. مطالعه‌ی موازی این لایه با JavaScript در مفاهیم پیشرفته جاوااسکریپت و کار با DOM در جاوااسکریپت آمده است.
  3. HTML5 APIs و Sandbox Security: APIهای بومی HTML5 مثل Geolocation، Web Storage و File API به منابع حساس کاربر دسترسی دارند. مرورگرها این دسترسی‌ها را در یک چارچوب امنیتی مشخص مدیریت می‌کنند: اجازه‌ی صریح کاربر، محدودیت cross-origin، و جداسازی thread. برای توسعه‌دهنده، این یعنی درک امنیتی نه‌فقط در سرور بلکه در سمت مرورگر هم ضروری است. مطالعه‌ی این لایه در XSS چیست و امنیت وردپرس برای مبتدیان آمده است.
  4. Media Pipeline و Video Rendering: پخش ویدیو در HTML5 از یک pipeline پیچیده استفاده می‌کند که شامل decode، demux و render است. این pipeline می‌تواند روی GPU یا CPU اجرا شود، بسته به فرمت و مرورگر. برای توسعه‌دهنده، این یعنی انتخاب فرمت درست و استفاده از codecهای سخت‌افزاری، تفاوت بین یک تجربه‌ی روان و یک ویدیوی lag‌دار است. مطالعه‌ی موازی این لایه با کارایی در بهینه سازی جاوااسکریپت و بهینه‌سازی سرعت سایت آمده است.
  5. Interaction با LLM و Semantic Extraction: در عصر AEO و GEO، HTML5 سمنتیک به‌عنوان سیگنال ساختاری برای مدل‌های زبانی استفاده می‌شود. صفحه‌ای که از تگ‌های article، header، main و time استفاده می‌کند، برای مدل‌های هوش مصنوعی معنادارتر از یک توده div است. این یک مزیت رقابتی است که در سال‌های آینده اهمیت بیشتری خواهد یافت. مطالعه‌ی این لایه در نقش Schema در AEO، AEO چیست و سئو فراتر از کلمات کلیدی آمده است.

یک تجربه‌ی واقعی از پروژه‌ای که با مسئله‌ی Feature Detection روبرو شدیم: در یک سایت آموزشی که از تگ <dialog> برای نمایش مودال‌ها استفاده می‌کرد، کاربران مرورگرهای قدیمی‌تر می‌دیدند که دکمه‌های باز کردن مودال هیچ واکنشی نشان نمی‌دهند. راه‌حل: یک feature detection ساده با if (typeof HTMLDialogElement === 'function') و یک fallback ساده با CSS که مودال را به‌شکل یک بخش تمام‌صفحه نمایش می‌داد. یک لایه‌ی محافظ که تجربه‌ی کاربری را برای همه‌ی مرورگرها تضمین کرد.

اگر روی پروژه‌های وردپرسی هستید و می‌خواهید این لایه‌ها را در قالب خود اعمال کنید، پیشنهاد می‌کنم ابتدا به قالب سبک مهاجرت کنید و بعد ساختار HTML5 را بازبینی کنید. برای مطالعه‌ی موازی با استانداردها و معماری، استانداردهای HTML و CSS و CSS مدرن از Flexbox تا Grid دید وسیع‌تری می‌دهند. برای درک این لایه در چارچوب سئو، سئو تکنیکال چیست، سئوی درون‌صفحه چیست و سئو تکنیکال از خزش تا ایندکس منابع کلیدی هستند. اگر روی دسترس‌پذیری متمرکز هستید، استانداردهای دسترس‌پذیری وب و WCAG چیست را هم ببینید.

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

خط پایان این بررسی

HTML5 را می‌توان در یک جمله خلاصه کرد: «یک استاندارد زنده که وب را از یک سند متنی به یک پلتفرم تعاملی تبدیل کرد.» سه درس که از این مسیر با خودم بردم:

  1. DOCTYPE فقط شروع است، نه پایان. تفاوت واقعی HTML5 در تگ‌های معنایی، فرم‌های مدرن، رسانه‌ی بومی و APIهای جانبی است. اگر سند شما فقط DOCTYPE جدید دارد، از HTML5 بهره نمی‌برید.
  2. سمنتیک را جدی بگیرید. در عصر AEO، سئوی تکنیکال و دسترس‌پذیری، تگ‌های معنایی HTML5 دیگر یک انتخاب زیبایی‌شناختی نیستند؛ یک ضرورت معماری هستند.
  3. Feature detection را عادت کنید. چون HTML5 استاندارد زنده است و مرورگرها همگام پیشرفت نمی‌کنند، همیشه قبل از استفاده از یک قابلیت جدید، پشتیبانی آن را چک کنید و یک fallback داشته باشید.

مسیر یادگیری وب با این نوشته تمام نمی‌شود. اگر می‌خواهید مرحله‌ی بعدی را بردارید، آموزش CSS از صفر، آموزش جاوااسکریپت از صفر و متا تگ ها در HTML سه قدم منطقی بعدی هستند. اگر روی دسترس‌پذیری متمرکز هستید، استانداردهای دسترس‌پذیری وب و WCAG چیست منابع کلیدی هستند. اگر هم به سمت سئو و بهینه‌سازی می‌روید، سئوی درون‌صفحه چیست، سئو تکنیکال چیست و نقش Schema در AEO دید وسیع‌تری می‌دهند.

اگر در پروژه‌ای با یک مورد عجیب HTML5 روبرو شده‌اید — مثلاً تگی که در بعضی مرورگرها کار می‌کند و در بعضی نه، یا APIای که در دسکتاپ رفتار و در موبایل رفتار دیگری دارد، یا موردی که با بازنویسی ساختار از div به تگ‌های معنایی، امتیاز Accessibility یا SEO تغییر محسوسی داشت — جزئیات سناریو را در دیدگاه بنویسید. مخصوصاً اگر با استفاده از یکی از APIهای جدید HTML5 مثل Web Workers یا History API توانسته‌اید حجم کد جاوااسکریپتی قابل توجهی را حذف کنید، همان تجربه برای خواننده‌ی بعدی از هر توضیح کلی ارزشمندتر است.