HTML5

HTML5 آخرین نسخه از مجموعه استانداردهای HTML است، که نشان‌دهنده‌ی دو مفهوم متفاوت است:

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

این صفحه به منابع متفاوتی از فناوری‌های HTML5 پیوند خورده است، دسته‌بندی شده در گروه‌های مختلف، که هر گروه دربرگیرنده‌ی فعالیتی متفاوت است: semantics (عنصر‌های معناگرا)، که در توضیح هر چه بیشتر و دقیق‌تر محتوا نقش دارند، connectivity (اتصال)، که روش‌های جدیدی برای برقراری ارتباط با سرور معرفی می‌کند، offline & storage (ذخیره‌سازی آفلاین)، که وب‌سایت را برای ذخیره‌ی داده‌های آفلاین و عملکرد بهتر زمانی که مرورگر کاربر در حالت آفلاین قرار دارد بهینه می‌کند، multimedia (محتوای چندرسانه‌ای)، که صوت و تصویر را به عنوان شهروند درجه یک وب معرفی می‌کند، 3D، Graphics & Effects (سه‌بعدی، گرافیک و جلوه‌های تصویری)، که به ارایه‌ی جلوه‌های تصویری پیچیده‌تر منجر می‌شود، performance & integration (عملکرد و جامعیت)، که وب‌سایتی سریع‌تر و در عین حال منطبق‌تر با رایانه‌ی کاربر می‌سازد، device access (دسترسی از طریق سایر دستگاه‌ها)، که اجازه‌ی استفاده‌ی دستگاه‌های ورودی/خروجی بیشتری را می‌دهد، و styling (سبک‌دهی)، که دست توسعه‌دهندگان در ایجاد قالب‌های پیچیده‌تر را باز می‌کند.

Semantics (عنصرهای معناگرا)

بخش‌های مختلف صفحه در HTML5: نگاهی به عنصرهای بخش‌بندی صفحه در HTML5:; <section>, <article>, <nav>, <header>, <footer>, <aside> و <hgroup>.
استفاده از audio و vedio در HTML5: عنصرهای <audio> و <video> با قرارگرفتن در صفحه، اجازه‌ی تغییراتی جدید در نحوه‌ی اجرای محتوای چندرسانه‌ای را می‌دهند.
فرم‌ها در HTML5: نگاهی به بهبودهای ایجادشده در فرم‌های وب، constraint validation API، چند صفت جدید، مقدارهای جدیدی برای <input> صفت type و عنصر جدید <output>.
عنصرهای معناگرای جدید: علاوه بر عنصرهای بخش‌بندی، رسانه و فرم، عنصرهای متعددی مانند <mark>، <figure>، <figcaption>، <data>، <time>، <output>، <progress>، یا <meter> تعداد عنصرهای مجاز HTML5 را افرایش می‌دهند.
بهبودهای ایجادشده در <iframe>: با استفاده از صفت‌هایsandbox، seamless و srcdoc توسعه‌دهندگان می‌توانند میزان امنیت و کارکرد یک عنصر <iframe> را به دقت بررسی کنند.
MathML: استفاده از فرمول‌های ریاضی را به صورت مستقیم در کد، ممکن می‌سازد.
مقدمه‌ای بر HTML5: این مقاله به معرفی مشکلات موجود HTML5 که در طراحی وب یا برنامه‌ی وب ممکن است وجود داشته باشند، می‌پردازد.
مفسر منطبق بر HTML5: مفسر، که بایت به بایت از یک سند HTML را به درخت DOM تبدیل می‌کند، گسترش یافته‌است و به دقت رفتاری که در تمامی حالت‌ها پیش می‌آید بررسی کرده، حتی کد نامعتبر HTML را، که منجر به بهینه‌تر شدن و قابل‌پیش‌بینی‌تر شدن مرورگرهای منطبق با HTML5 می‌شود.

Connectivity (اتصال)

Web Sockets: اجازه‌ی برقراری یک ارتباط پایدار بین صفحه و سرور را می‌دهد که از طریق آن می‌توان به مبادله‌ی داده‌هایی غیر از سند HTML پرداخت.
رخدادهای سمت سرور: سابق بر این سرور تنها با دریافت درخواست از مرورگر (کاربر) می‌توانست به آن پاسخ دهد اما الان می‌تواند این کار را بدون درخواست مرورگر نیز انجام دهد.
WebRTC: این فناوری، که مخفف Real-Time Communication یا ارتباط بلادرنگ است، اجازه‌ی برقراری ارتباط با سایر افراد و کنترل ویدیوکنفرانس به طور مستقیم از مرورگر را می‌هد بدون آن‌که به افزونه‌ای خاص یا برنامه‌ای خارجی نیاز باشد.

Offline & storage (ذخیره‌سازی آفلاین)

منابع آفلاین: حافظه‌ی نهان برنامه: Firefox به طور کامل منابع آفلاین در HTML5 را پشتیبانی می‌کند. سایر مرورگرها نیز این ویژگی را کمابیش پشتیبانی می‌کنند.
رخدادهای آنلاین و آفلاین: Firefox 3 مستندات WHATWG درباره‌ی رخدادهای آنلاین و آفلاین را پشتیبانی می‌کند، که به برنامه‌ها اجازه می‌دهد تشخیص بدهند آیا یک اتصال اینترنت فعال موجود است یا خیر، یا اینکه آیا یک اتصال قطع و وصل می‌شود یا خیر.
نشست سمت-مرورگر WHATWG و ذخیره‌سازی پایدار (در برابر ذخیره‌سازی DOM): نشست سمت-مرورگر و ذخیره‌سازی پایدار به برنامه‌های وب اجازه می‌دهند که ساختارداده‌های مورد نیاز خود را در مرورگر کاربر ذخیره‌سازی کنند.
IndexedDB: یک استاندارد وب است که برای ذخیره‌سازی داده‌ها با حجم بالا در مرورگر کاربر به کار می‌رود و برای جستجوهای با سرعت بالا بر این داده‌ها با استفاده از اندیس‌ها، صورت می‌پذیرد.
استفاده از فایل‌ها توسط برنامه‌های وب: پشتیبانی از API جدید فایل در HTML5 به Gecko اضافه‌شده است تا برنامه‌های وب بتوانند به فایل‌هایی که کاربر انتخاب می‌کنند دسترسی داشته باشند، که این امر شامل پشتیبانی از فایل‌های چندگانه با استفاده از عنصر <input> که از نوع فایل می‌باشد، می‌شود یا صفت جدید multiple. همچنین FileReader نیز وجود دارد.

Multimedia (چندرسانه‌ای)

استفاده از audio و vedio در HTML5: عنصرهای <audio> و <video> با قرارگرفتن در صفحه، اجازه‌ی تغییراتی جدید در نحوه‌ی اجرای محتوای چندرسانه‌ای را می‌دهند.
WebRTC: این فناوری، که مخفف Real-Time Communication یا ارتباط بلادرنگ است، اجازه‌ی برقراری ارتباط با سایر افراد و کنترل ویدیوکنفرانس به طور مستقیم از مرورگر را می‌هد بدون آن‌که به افزونه‌ای خاص یا برنامه‌ای خارجی نیاز باشد.
استفاده از API دوربین: اجازه‌ی استفاده، تغییر و ذخیره‌سازی یک تصویر (عکس) را از دوربین رایانه‌ی کاربر می‌دهد.

3D, graphics & effects (سه‌بعدی، گرافیک و جلوه‌های تصویری)

خودآموز Canvas: درباره‌ی عنصر جدید <canvas> و چگونگی رسم نمودارها و سایر اشیا در Firefox بیاموزید.
API متن HTML5 برای عنصرهای <canvas>: API متن در HTML5 توسط عنصرهای <canvas> پشتیبانی می‌شوند.
WebGL: WebGL گرافیک سه‌بعدی را با معرفی APIای که بسیار نزدیک به OpenGL ES 2.0 عمل می‌کند، به صفحات وب می‌آورد که می‌تواند در عنصرهای <canvas> در HTML5 به کار رود.
SVG: فرمتی مبتنی بر XML از تصاویر برداری که به صورت مستقیم می‌تواند در سند HTML به کار رود.

Performance & integration (عملکرد و جامعیت)

Web Workers: به فایل‌های JavaScript اجازه می‌دهد که در پس‌زمینه و بدون این‌که رخدادهای فعال را درگیر خود سازند، اجرا شوند.
XMLHttpRequest سطح ۲: اجازه‌ی برقراری ارتباط بخشی از صفحه با سرور را می‌دهد، تا محتوای پویا را بر اساس فعالیت کاربران یا زمان تغییر دهد. این فناوری پایه و اساس Ajax است.
JIT - کامپایل‌کردن موتورهای JavaScript: نسل‌ جدید موتورهای JavaScript بسیار قدرتمندتر از نسل قبلی هستند که در اجرا و عملکرد برنامه‌های JavaScript بسیار تاثیرگذار هستند.
History API: اجازه‌ی دستکاری تاریخچه (history) مرورگر را می‌دهد که این کار برای صفحاتی که شامل اطلاعات جدید هستند، مفید می‌باشد.
صفت contentEditable: وب‌سایت خود را به یک wiki تبدیل کنید!: HTML5 صفت contentEditable را استاندارد کرده است. درباره‌ی این ویژگی بیشتر بدانید.
کشیدن و رهاکردن: API کشیدن و رهاکردن در HTML5 پشتیبانی از این عملیات را در وب‌سایت‌ها و بین‌ وبسایت‌ها میسر می‌کند. همچنین یک API ساده‌تر را جهت استفاده در extensionها و برنامه‌های مبتنی بر Mozilla شامل می‌شود.
مدیریت Focus در HTML: صفت‌های جدید activeElement و hasFocus در HTML5 پشتیبانی می‌شوند.
protocol handlerهای مبتنی بر وب: شما اکنون می‌توانید برنامه‌های وب را با استفاده از متد navigator.registerProtocolHandler() به عنوان protocol handler ثبت کنید.
requestAnimationFrame: اجازه‌ی کنترل رندرشدن انیمیشن‌ها را برای دستیابی به عملکردی بهینه، می‌دهد.
Fullscreen API: چگونگی استفاده از حالت تمام‌صفحه را کنترل می‌کند، بدون این‌که واسط کاربری (پیش‌فرض) مرورگر نمایش داده شود.
Pointer Lock API: اجازه‌ی قفل شدن اشاره‌گر (ماوس) روی محتوا را می‌دهد، تا بازی‌ها و برنامه‌های مشابه دیگر مشکل از دست‌رفتن focus را نداشته باشند.
رخدادهای آنلاین و آفلاین: برای ایجاد یک برنامه‌ی وب با قابلیت اجرای آفلاین، شما باید بدانید چه زمانی برنامه‌ی شما واقعا در حالت آفلاین قرار می‌گیرد. همین‌طور باید بدانید چه زمانی برنامه‌ی شما در حالت آفلاین باز می‌گردد.

Device access (دسترسی از طریق سایر دستگاه‌ها)

استفاده از API دوربین: اجازه‌ی استفاده، تغییر و ذخیره‌سازی یک تصویر (عکس) را از دوربین رایانه‌ی کاربر می‌دهد.
رخدادهای Touch: handlerهایی که به رخدادهای ایجادشده توسط کاربری که با صفحه‌ی لمسی کار می‌کند، پاسخ می‌دهد.
استفاده از geolocation: این اجاره را به مرورگر می‌دهد تا موقعیت جغرافیایی کاربر را شناسایی کند.
شناسایی جهت دستگاه: این اجازه را به مرورگر می‌دهد تا هرگاه جهت دستگاهی که مرورگر روی آن کار می‌کند تغییر یافت، اطلاعات آن را دریافت کند. از این ویژگی می‌توان به عنوان یک دستگاه ورودی استفاده کرد برای نمونه (ساخت بازی‌هایی که به تغییر جهت دستگاه واکنش نشان می‌دهند یا منطبق ساختن ظاهر یک صفحه با جهت نمایش دستگاه - افقی یا عمودی).
Pointer Lock API: اجازه‌ی قفل شدن اشاره‌گر (ماوس) روی محتوا را می‌دهد، تا بازی‌ها و برنامه‌های مشابه دیگر مشکل از دست‌رفتن focus را نداشته باشند.

Styling (سبک‌دهی)

CSS گسترش یافته است تا سبک‌دهی به عنصرها را به حالتی پیشرفته‌تر منتقل کند. از این ویژگی‌ها اغلب به عنوان CSS3 یاد می‌شود، از این رو CSS دیگر یک استاندارد یک‌پارچه نیست و ماژول‌های مختلف آن در سطح ۳ نیستند، بعضی در سطح ۱ و بعضی در سطح ۴، با تمام سطح‌های میانی که وجود دارند.

ویژگی‌های جدید در سبک‌دهی تصویر پس‌زمینه: اکنون ایجاد سایه در یک عنصر (جعبه) با استفاده از box-shadow میسر است و تصویرهای پس‌زمینه‌ی چندگانه قابل استفاده هستند.
حاشیه‌هایی جذاب‌تر: اکنون نه تنها می‌توان با استفاده از تصویر‌ها و به کارگیری border-image ،‌حاشیه‌ی عنصرها را ایجاد کرد بلکه کناره‌های گرد (rounded-borders) نیز با استفاده از ویژگی border-radius قابل پیاده‌سازی هستند.
پویانمایی: با استفاده از تبدیلات در CSS برای پویانمایی بین حالت‌های مختلف یا از پویانمایی در CSS جهت پویانمایی بخشی از صفحه بدون نیاز به رخدادهای جاوااسکریپت، شما می‌توانید عنصرهای متحرک در صفحه‌ی خود را کنترل کنید.
بهبودهای ایجاد شده در Typography: توسعه‌دهندگان برای دسترسی به Typography بهتر اکنون کنترل بیشتری دارند. آن‌ها می‌توانند text-overflow و فاصله‌گذاری را کنترل کنند، همچنین سایه‌ای که به متن اعمال می‌شود یا جزییات‌متن را به دقت کنترل کنند. به لطف ویژگی @font-face فونت‌های مختلفی را می‌توان به صفحه‌ی خود پیوست کرد.
لایه‌های نمایشی جدید: در راستای ارتقای انعطاف‌پذیری در طراحی، دو لایه‌ی جدید افزوده شده‌اند: CSS multi-column layout و CSS flexible box layout.