HTML5
آشنایی با HTML5
تگ های جدید، تگ های حذف شده و API ها
منظور از HTML5 چیست؟ فرق HTML با HTML5 چیست؟ چگونه بازی HTML5 بسازیم؟
- 1 تاریخچه HTML
- 2 معرفی html5
- 3 تگهای جدید در HTML5
- 3.1 تگ Article
- 3.2 تگ Header
- 3.3 تگ Footer
- 3.4 تگ section
- 3.5 دیگر تگهای معنایی جدید در HTML5
- 4 Api جدید در HTML5
- 5 تگهای حذف شده در 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">
یک نمونه از سند کامل :
<!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 در صفحه استفاده کنید.
مثال :
در مثال زیر از تگ 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 استفاده میکنیم.
به طور کلی یک پانوشت که با تگ footer ایجاد میشود اطلاعات زیر را داراست:
- بخش اطلاعات نویسنده
- کپی و رایت
- اطلاعات تماس
- نقشه سایت (sitemap)
- دکمه برگشت به بالا
- اسناد یا صفحات مشابه
شما میتوانید در یک صفحه از چندین Footer استفاده کنید.
مثال :
در مثال زیر مشخصات تماس را ایجاد کرده ایم.
<footer> <p>Posted by: RAHELEH TABRIZI</p> <p>Contact information: <a href="mailto:tabrizi.r92l@gmail.com@gmail.com">mailto:tabrizi.r92l@gmail.com@gmail.com</a>.</p> </footer>
تگ section
تگ Section برای بخشی از سند، شامل تیتر ها ، header ها ، Footer ها و دیگر قسمت های صفحات استفاده میشود.
<section>
<h2>WWF</h2>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>
دیگر تگهای معنایی جدید در HTML5
تگ | توضیح |
<article> | تعریف یک مقاله |
<aside> | تعریف یک محتوا در کنار محتوای صفحه |
<details> | تعریف جزییات که کاربر می تواند آن را ببیند یا مخفی کند |
<figcaption> | تعریف یک عنوان برای عنصر <figure> |
<figure> | تعریف یک محتوای خود نگهدارنده مانند تصویر، کد و … |
<footer> | تعریف یک فوتر برای سند یا بخش |
<header> | تعریف یک هدر برای سند یا بخش |
<main> | تعریف محتوای اصلی صفحه |
<mark> | تعریف یک متن نشانه گذاری شده یا برجسته |
<nav> | تعریف ناوبری لینک |
<section> | تعریف یک بخش در یک سند |
<summary> | تعریف یک عنوان قابل مشاهده برای عنصر <details> |
<time> | تعریف تاریخ و زمان |
Api جدید
مهم ترین api جدید در html5 عبارت اند از:
- Geolocation
- Drag and drop
- Local storage
- Application cache
- Web workers
- Sse
در رابطه هر کدام از اینAPI ها در مقاله ای جدا بحث خواهیم کرد.
تگهای حذف شده
تگهای زیر در 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 |
در ادامه با این نسخه بیشتر آشنا میشویم، با ما همراه باشید.
جهت مشاهده دوره های آموزشی بر روی این لینک کلیک نمایید.
جدیدترین اخبار مجموعه فراز نتورک را در این صفحه اجتماعی دنبال کنید.
نویسنده:راحله تبریزی
دیدگاهتان را بنویسید
برای نوشتن دیدگاه باید وارد بشوید.