HTML5 چیست؟

این آموزش یک نمای کلی مقدماتی از HTML5 ارائه می دهد. اگر چیز زیادی در مورد آن نشنیده اید یا فقط می خواهید ارتباط آن را درک کنید، به جای درستی آمده اید.

HTML5 آخرین استاندارد مرورگرها برای نمایش و تعامل با صفحات وب است. در سال 2014 تایید شد و اولین به روز رسانی HTML در 14 سال گذشته بود. در عصر حاضر، این یک عمر بین به روز رسانی است.

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

در اینجا چند پیشرفت کلیدی در HTML5 آورده شده است:

• ساختار عناصر ساده‌تر و سرراست‌تری برای صفحات وجود دارد که ساخت، تنظیم و اشکال‌زدایی آنها را آسان‌تر می‌کند—و ایجاد سرویس‌های خودکاری که به شما در یافتن منابع مهم در وب کمک می‌کند.
• المان‌های استانداردی را برای اشیاء رسانه‌ای معمولی فراهم می‌کند که قبلاً به پلاگین‌های آزاردهنده برای صدا، تصویر و غیره نیاز داشتند.
• یکپارچگی بومی با رابط‌ها برای استفاده از نیازهای مدرن وب و موبایل وجود دارد. یکی از نمونه های مورد علاقه من در این مورد، موقعیت جغرافیایی است که به شما امکان می دهد مختصات GPS بازدیدکنندگان وب را از طریق مرورگر آنها تعیین کنید. این ویژگی قبلاً به برنامه های تلفن مجهز به GPS محدود شده بود.

به عنوان مثال، در زیر یک نمونه موقعیت جغرافیایی HTML5 از ساخت استارتاپ شما با PHP آورده شده است: مکان جغرافیایی و مکان‌های Google:

HTML5 برای چه کسانی اهمیت دارد؟

آیا شما فقط یک کاربر وب هستید یا یک طرفدار YouTube؟

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

آیا شما یک توسعه دهنده وب هستید؟

HTML5 زندگی شما را به طرز باورنکردنی آسان‌تر می‌کند و امکان‌پذیری را تا حد زیادی گسترش می‌دهد. همچنین به این معنی است که شما قادر خواهید بود چیزهایی بسازید و برای اطمینان از سازگاری بیشتر به سازندگان مرورگر تکیه کنید. این به معنای کد طرح بندی شرطی بسیار کمتر است.

آیا می خواهید یک مرورگر وب بسازید؟

از یک طرف، شما یک نقشه راه عالی در مشخصات HTML5 خواهید داشت که جزئیات چگونه و چه چیزی را باید بسازید. از سوی دیگر، کارهای بیشتری برای انجام دادن و درست شدن وجود دارد. تمایز مرورگر خود در مقایسه با تولیدکنندگان بزرگ مرورگر به این راحتی نخواهد بود.

پس زمینه HTML5

HTML5 از کجا آمده است؟

HTML5 آخرین استاندارد در بیش از 20 سال برنامه نویسی مرورگر از زمان راه اندازی وب در سال 1991 است.

تاریخچه HTML

HTML برای اولین بار در سال 1993 به عنوان یک استاندارد ظاهر شد، و در اینجا به شرح زیر است جدول زمانی نسخه های HTML پذیرفته شده توسط کمیته استاندارد:

• HTML 2.0: 1995
• HTML 4.0: 1997
• HTML 4.01: 2000
• HTML 5: 2014

اهداف HTML5

مطابق با ویکیپدیا، HTML5 برای ادغام نسخه های قبلی و انواع سند متمایز مانند XHTML 1 و DOM Level 2 HTML در نظر گرفته شده است:

[HTML5] نشانه گذاری موجود برای اسناد را گسترش می دهد، بهبود می بخشد و منطقی می کند، و نشانه گذاری و …(API) را برای برنامه های کاربردی پیچیده وب معرفی می کند…HTML5 همچنین یک نامزد بالقوه برای برنامه های کاربردی تلفن همراه چند پلتفرمی است. بسیاری از ویژگی ها با توجه به دستگاه های کم مصرف مانند تلفن های هوشمند و تبلت ها طراحی شده اند.

در اینجا خلاصه ای از چگونگی وجود دارد MakeUseOf اهداف HTML5 را توضیح داد:

• پلاگین هایی مانند فلش را برای ویژگی های رایجی که همه به آن نیاز دارند حذف کنید. پشتیبانی بومی برای چیزهایی مانند صدا و تصویر ایجاد کنید.
• با عناصر بومی جدید نیاز به جاوا اسکریپت و کد اضافی را کاهش دهید.
• ایجاد ثبات در مرورگرها و دستگاه ها.
• همه اینها را تا حد امکان شفاف انجام دهید.

تصویر اعتبار: موضوع ساده

HTML5 چه ویژگی های جدیدی ارائه می دهد؟

خیلی، معلوم است! HTML5 چنین فهرست قابل توجهی از قابلیت های جدید را ارائه می دهد که اکنون توسط اکثر مرورگرها پشتیبانی می شود.

عناصر جدید HTML5

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

برای چیدمان صفحه و ویژگی های کلیدی، اکنون عناصر خاصی مانند:

• <header> و <footer>
• <nav> برای انواع منوها
• <aside> برای نوارهای کناری یا محتوای مرتبط نزدیک
• <article> جایی که محتوا می رود مانند یک پست وبلاگ
• <section> شبیه به <div> اما بیشتر محتوا محور است
• <audio> و <video> برچسب‌ها برای اینکه مرورگرهای بومی، بازپخش هر کدام را مدیریت کنند. دیگر افزونه و به روز رسانی امنیتی برای این کار وجود ندارد
• <canvas> به طور خاص برای اینکه به شما امکان می دهد با استفاده از یک زبان برنامه نویسی جداگانه، گرافیک بکشید
• <embed> برای قرار دادن محتوا یا برنامه های خارجی در صفحه

در اینجا یک طرح کلی بصری زیبا از این موارد توسط مجله Smashing:

در اینجا برخی از ویژگی‌های پیشرفته‌تر HTML5، از جمله ادغام API، کدنویسی در جاوا اسکریپت برای اقدامات پیچیده‌تر و سازگارتر در مرورگرها آورده شده است:

• پخش صدا و تصویر: پخش رسانه را در مرورگرها بدون افزونه فراهم می کند.
• موقعیت جغرافیایی: شناسایی مکان بازدید کننده.
• کشیدن و انداختن: برای آپلود فایل ها از مرورگر با حرکات ساده.
• کارگران وب: جاوا اسکریپت را در پس زمینه اجرا می کند (غیر مسدود کننده).
• رویدادهای ارسال شده توسط سرور: به سرورها اجازه می دهد تا صفحات وب را پس از بارگیری در مرورگر به روز کنند، ساده تر و کارآمدتر از AJAX و جاوا اسکریپت.
• ذخیره سازی اطلاعات آفلاین: راهی برای ذخیره داده ها به صورت محلی در مرورگر بدون کوکی ها ارائه می دهد.

باید ببینید کدام ویژگی ها در کدام مرورگرها پشتیبانی می شوند؟ HTML5 تست یک ارزیابی تعاملی مفید برای ویژگی ها و پشتیبانی مرورگر دارد:

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

چند نمونه HTML5 در عمل

بیایید به چند نمونه جالب از HTML5 در عمل نگاهی بیندازیم.

صفحه HTML5 Boilerplate

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML 5 Boilerplate</title>
    <link rel="stylesheet" href="
  </head>
  <body>
    <script src="index.js"></script>
  </body>
</html>

توجه داشته باشید که یک تگ doctype ساده‌تر، تگ‌های پیوند و تگ‌های اسکریپت وجود دارد. اگر می‌خواهید روش‌های دیگری را ببینید، آن را بررسی کنید HTML5 Boilerplate، یک صفحه HTML5 پیش فرض منبع باز گسترده تر.

عنصر ویدئو و پخش کننده ها

در اینجا یک نسخه ی نمایشی CodePen وجود دارد که نشان می دهد چقدر آسان است که یک پخش کننده ویدیو را به وب سایت خود اضافه کنید <video> عنصر:

هیچ پلاگین مورد نیاز و بدون به روز رسانی وجود دارد. تنها کاری که برای افزودن پخش کننده ویدیو باید انجام می دادم این بود که خطوط HTML زیر را وارد کنم:

<video controls width="600" src=" type="video/mp4">
</video>

تشکیل می دهد

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

نسخه ی نمایشی بالا از یکی از آموزش های موجود در Envato Tuts+ است که به شما می آموزد چگونه اعتبار سنجی فرم را با HTML5 انجام دهید.

در اینجا چند آموزش دیگر در مورد Tuts+ مربوط به فرم های HTML5 و اعتبار سنجی آنها آورده شده است.

گرافیک برداری مقیاس پذیر (SVG)

در HTML5، می توانید عناصر را با جاوا اسکریپت راحت تر متحرک کنید. دموی CodePen زیر رشد یک گیاه را از یک گلدان با کمک انیمیشن SVG نشان می دهد.

بعد چه می شود؟

امیدوارم از این مرور کلی از مزایای HTML5 لذت برده باشید. اگر می خواهید HTML5 را بیشتر بررسی کنید، دو منبع دیگر وجود دارد که می خواهم پیشنهاد کنم:

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

در اینجا نمونه ای از دموهای قابل مرور در HTML5 Demos آورده شده است:

اگر شما یک مدیر سایت وردپرس هستید، مانند بسیاری از خوانندگان Envato Tuts+، ممکن است بخواهید تم های آینده را از نظر انطباق آنها با HTML5 ارزیابی کنید. توسعه مبتنی بر استانداردها با پشتیبانی مداوم مرورگر، توسعه وب را برای بسیاری از ما بسیار آسان‌تر می‌کند و تعداد اشکالاتی را که مشتریان ما با آن‌ها مواجه می‌شوند کاهش می‌دهد، در حالی که به طور فزاینده‌ای تجربیات کاربری بهتری را ارائه می‌دهد.

به طور کلی، من کاملاً تحت تأثیر HTML5 قرار گرفتم و به نظر می رسد که به تکامل خود ادامه خواهد داد.

علاوه بر این، اگر به دنبال ابزارهای دیگر برای کمک به رشد مهارت های HTML5 خود هستید، فراموش نکنید که چه چیزی را ببینید. ما در بازار Envato موجود است.

از آنجایی که منابع بسیار مفیدی برای HTML5 وجود دارد، من یک کمک اضافی از برخی از مواردی که به نظرم مفیدتر هستند اضافه کرده ام:

این پست با مشارکت‌ها به‌روزرسانی شده است نیتیش کومار. Nitish یک توسعه دهنده وب با تجربه در ایجاد وب سایت های تجارت الکترونیک در سیستم عامل های مختلف است. او اوقات فراغت خود را صرف پروژه‌های شخصی می‌کند که زندگی روزمره‌اش را آسان‌تر می‌کند یا به پیاده‌روی طولانی عصرانه با دوستانش می‌پردازد.