منظور از HTML5 چیست؟ فرق HTML با HTML5 چیست؟ چگونه بازی HTML5 بسازیم؟ در این مقاله یعنی آشنایی با HTML5 می‌خواهیم در رابطه با HTML5 به صورت کامل آشنا شویم.
سرفصل‌های پست
تاریخچه HTML
قبل از شروع آشنایی با HTML5 بهتر هست که بدانیم روز های اول دنیای پهناور وب، نسخه های مختلفی از html بود و این زبان تاریخچه جالبی دارد.
| سال | نسخه |
| 1989 | Tim berners lee نسخه www را ایجاد کرد |
| 1991 | Tim berners lee نسخه اول html را خلق کرد |
| 1993 | Dave raggett پیش نویس html+ را نوشت |
| 1995 | گروه html نسخه html 2.0 را تعریف کرد |
| 1997 | W3c نسخه html 3.2 را توصیه کرد |
| 1999 | W3c نسخه html 4.01 را توصیه کرد |
| 2000 | W3c نسخه xhtml 1.0 را توصیه کرد |
| 2008 | اولین پیش نویس عمومی html5 در whatwg |
| 2012 | نسخه زنده استاندارد html5 در whatwg |
| 2014 | توصیه html5 توسط w3c |
| 2016 | توصیه کاندید html5.1 توسط w3c |
| 2017 | توصیه html5.1 ویرایش دوم توسط w3c |
| 2017 | توصیه html5.2 توسط w3c |
از سال 1991 تا 1999، نسخه html از 1 تا 4 توسعه یافت.
در سال 2000، کنسرسیوم w3c نسخه xhtml 1.0 را توصیه کرد. قوانین موجود در xhtml بسیار سخت گیرانه بودند و توسعه دهندگان مجبور بودند کد های شکل یافته و معتبر بنویسند.
در سال 2004، w3c تصمیم گرفت تا توسعه html را برای محبوبیت xhtml متوقف کند.
همچنین در همین سال whatwg (گروه کاری hypertext تکنولوژی وب) شکل گرفت. گروه whatwg قصد توسعه مجدد html را داشت، این گروه در نحوه استفاده html در وب استوار بودند، با این حال نسخه جدید html با نسخه های قدیمی آن سازگار نبود.
در سال 2004 تا 2006، whatwg پشتیبانی عمده ای بر روی سازندگان مرورگر ها قرار داد.
در سال 2006، w3c اعلام کرد که قصد پشتیبانی whatwg را دارد.
در 2008، اولین پیش نویس به صورت عمومی منتشر شد.
در سال 2012، whatwg و w3c تصمیم به جدایی گرفتند.
گروه whatwg قصد توسعه html به عنوان یک استاندارد زنده را داشت. یک استاندارد زنده همیشه در حال توسعه و به روز رسانی است. ویژگی های جدیدی می توانند اضافه شدند اما کارایی قدیمی آن حذف نمی شود.
نسخه استاندارد زنده HTML5 توسط whatwg در سال 2012 منتشر شد و به صورت مداوم در حال به روز رسانی است.
با این حال w3c قصد توسعه یک نسخه قطعی از استاندارد HTML5 و xhtml داشت.
نسخه توصیه شده w3c از HTML5 در 28 اکتبر 2014 منتشر شد.
نسخه توصیه شده w3c از html5.1 ویرایش دوم در 3 اکتبر 2017 منتشر شد.
نسخه توصیه شده w3c از html5.2 در 14 دسامبر 2017 منتشر شد.
معرفی html5
تعریف یک سند html5 بسیار آسان است، کد زیر یک سند HTML5 تعریف می کند.
<!DOCTYPE html>
تعریف انکود کاراکتر (charset) برای سند در HTML5 نیز همچنان ساده است.
<meta charset="UTF-8">
یک نمونه از سند کامل HTML5 :
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title of the document</title> </head> <body> Content of the document...... </body> </html>
تگ‌های جدید در HTML5
جالب‌ترین تگ های جدید معنایی مانند <article> ، <footer> ، <header> و <section>
نوع های جدید فرم مانند : number, date, time, calendar و range در رابطه با این نوع ها در مقاله آشنایی با تگ input به صورت کامل آشنا شدیم.
تگ‌های گرافیکی جدید : <canvas> و <svg>
تگ‌های چند رسانه ای مانند <audio> و <video>
در این مقاله تگ‌های جدید معنایی بیشتر آشنا میشویم ولی در رابطه با تگ‌های گرافیکی و تگ‌های چند رسانه‌ای در مقاله‌هایی جدا صحبت خواهیم کرد.
تگ Article
برای ایجاد محتوای خود محور یا self-contained از تگ مستقل Article استفاده می‌کنیم.
یک Article باید وجه تمایز خود را نسبت به بقیه قسمت های سایت مشخص کند.
منابعی که می‌توانیم برای تگ Article استفاده کنیم، عناصر زیر هستند :
- مقالات تالار های گفتمان
- مقالات بلاگ
- اخبار
- نظرات
مثال :
در مثال زیر یک نمونه از استفاده از تگ Article را آورده ایم.
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
تگ Header
به طور کلی از تگ header برای محتوای معرفی صفحه یا مجموعه از لینک های ناوبری استفاده می‌کنند.
به طور کلی در هر تگ Header آیتم های زیر وجود دارد:
- به طور کلی یک یا چند تیتر از نوع h1 تا h6
- لوگو ویا آیکون
- اطلاعات مربوط به نویسنده
شما می‌توانید از چند تگ Header در صفحه استفاده کنید.
[box type=”warning” align=”aligncenter” class=”” width=””]توجه داشته باشید که نمی‌توانید از تگ header درون تگ های footer ، address و حتی خود header استفاده کنید.[/box]مثال : در مثال زیر از تگ header درون یک تگ ایجاد کننده مقاله یا همون Article که در گذشته یاد گرفتیم استفاده کردیم.
<article>
<header>
<h1>Most important heading here</h1>
<h2>Less important heading here</h2>
<p>Some additional information here</p>
</header>
<p>Lorem Ipsum dolor set amet....</p>
</article>
برای استفاده از پانوشت در یک سند یا صفحه از تگ footer استفاده می‌کنیم.
به طور کلی یک پانوشت که با تگ footer ایجاد میشود اطلاعات زیر را داراست:
- بخش اطلاعات نویسنده
- کپی و رایت
- اطلاعات تماس
- نقشه سایت (sitemap)
- دکمه برگشت به بالا
- اسناد یا صفحات مشابه
شما می‌توانید در یک صفحه از چندین Footer استفاده کنید.
مثال : در مثال زیر مشخصات تماس را ایجاد کرده ایم.
<footer> <p>Posted by: Ali Esmaeili</p> <p>Contact information: <a href="mailto:alies@mizfa.com">alies@mizfa.com</a>.</p> </footer>
تگ section
تگ Section برای بخشی از سند، شامل تیتر ها ، header ها ، Footer ها و دیگر قسمت های صفحات استفاده میشود.
<section>
<h2>WWF</h2>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>
دیگر تگ‌های معنایی جدید در HTML5
در جدول زیر لیست تگ‌های معنایی جدید موجود در HTML5 را قرار داده‌ایم.
| تگ | توضیح |
| <article> | تعریف یک مقاله |
| <aside> | تعریف یک محتوا در کنار محتوای صفحه |
| <details> | تعریف جزییات که کاربر می تواند آن را ببیند یا مخفی کند |
| <figcaption> | تعریف یک عنوان برای عنصر <figure> |
| <figure> | تعریف یک محتوای خود نگهدارنده مانند تصویر، کد و … |
| <footer> | تعریف یک فوتر برای سند یا بخش |
| <header> | تعریف یک هدر برای سند یا بخش |
| <main> | تعریف محتوای اصلی صفحه |
| <mark> | تعریف یک متن نشانه گذاری شده یا برجسته |
| <nav> | تعریف ناوبری لینک |
| <section> | تعریف یک بخش در یک سند |
| <summary> | تعریف یک عنوان قابل مشاهده برای عنصر <details> |
| <time> | تعریف تاریخ و زمان |
Api جدید در HTML5
مهم ترین api جدید در html5 عبارت اند از:
- Geolocation
- Drag and drop
- Local storage
- Application cache
- Web workers
- Sse
نکته: ذخیره سازی محلی html5 جایگزین مناسبی برای کوکی ها است.
در رابطه هر کدام از این API ها در مقاله ای جدا بحث خواهیم کرد.
تگ‌های حذف شده در HTML5
تگ‌های زیر در html4 وجود داشتند اما در HTML5 حذف شده است.
| عنصر حذف شده | جایگزین |
| <acronym> | <abbr> |
| <applet> | <object> |
| <basefont> | Css |
| <big> | Css |
| <center> | Css |
| <dir> | <ul> |
| <font> | Css |
| <frame> | ندارد |
| <frameset> | ندارد |
| <noframes> | ندارد |
| <strike> | Css, <s> , <del> |
| <tt> | css |
پایان ترم
[box type=”info” class=”question-from-users” width=””]یک تگ حذف شده و یک تگ جدید در HTML5 را مثال بزنید و کاربرد آن‌ها را بیان کنید. ۱۰ نمره =)))
به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)
[/box]نتیجه گیری
در این مقاله با HTML5 آشنا شدیم. امیدوارم از این مقاله استفاده لازم را برده باشید.
در ادامه با این نسخه بیشتر آشنا میشویم، با ما همراه باشید.
اگر سوال، پیشنهاد یا انتقادی داشتید حتما در بخش نظرات با انرژی مثبت بپرسید.
تا مقاله بعد…
7 پاسخ
جواب سوال:
تگ footer (با کاربرد ایجاد پانوشت) از تگ های معنایی که در این نسخه اضافه شده است
تگ acronym (با کاربرد نشان دادن سرنام کلمات برای مخفف کردن) هم حذف شده که جایگزین آن abbr است
acronym نمایش یک عبارت مخفف استفاده می شود
footer به عنوان پانوشت در یک سند یا صفحه استفاده میشود
سلام علی اکبر، درسته ممنونم. جایزه‌ات شارژ شد.
پاسخ سوال :
تگ acronym و abbr
برای نمایش یک عبارت مخفف استفاده می شود.
سلام محمد بله درسته. سپاس فراوان.
سلام
تگ article برای محصولات سایت میشه استفاده کرد؟
سلام
برای توضیحاتش میشه استفاده کرد. ولی از نظر سئو به کدهای schema بیشتر توجه کنید.