آموزش طراحی سایتآموزش HTML

آشنایی با HTML5

تگ های جدید، تگ های حذف شده و API ها

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

تاریخچه HTML

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

سالنسخه
1989Tim berners lee نسخه www را ایجاد کرد
1991Tim berners lee نسخه اول html را خلق کرد
1993Dave raggett پیش نویس html+ را نوشت
1995گروه html نسخه html 2.0 را تعریف کرد
1997W3c  نسخه html 3.2 را توصیه کرد
1999W3c نسخه 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>
نمونه تگ article
نمونه تگ article

تگ Header

به طور کلی از تگ header برای محتوای معرفی صفحه یا مجموعه از لینک های ناوبری استفاده می‌کنند.

به طور کلی در هر تگ Header آیتم های زیر وجود دارد:

  • به طور کلی یک یا چند تیتر از نوع h1 تا h6
  • لوگو ویا آیکون
  • اطلاعات مربوط به نویسنده

شما می‌توانید از چند تگ Header در صفحه استفاده کنید.

توجه داشته باشید که نمی‌توانید از تگ header درون تگ های footer ، address و حتی خود 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>
تگ header
تگ header

تگ Footer

برای استفاده از پانوشت در یک سند یا صفحه از تگ 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>
تگ footer
تگ 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

نتیجه گیری

در این مقاله با HTML5 آشنا شدیم. امیدوارم از این مقاله استفاده لازم را برده باشید.

در ادامه با این نسخه بیشتر آشنا میشویم، با ما همراه باشید.

اگر سوال، پیشنهاد یا انتقادی داشتید حتما در بخش نظرات با انرژی مثبت بپرسید.

تا مقاله بعد…

برچسب ها

علی اسمعیلی

درباره خودم گفتن یا نوشتن کار آسونی نیست. باید تو کم‌ترین حجم مهم‌ترین اطلاعات رو بنویسی. وقتی که اولین بار دستم به کیبورد خورد، ۶ سالم بود. حس جالبی بود؛ زندگیم شده بود ۴ تا کلید WASD روی کیبورد کامپیوتر برای کنترل ماشین. از ۱۰ سالگی که مادرم با فوتوشاپ کار می‌کرد کنارش نشستم و یاد گرفتم. ۱۳ سالم بود که اولین وب‌سایتم رو با پی اچ پی نیوک ایجاد کردم. تا الان وب سایت‌های زیادی رو شروع کردم و شاید به خاطر اینکه هدف تجربه کردن رو داشتم شکست خوردند. موفق‌ترین پروژه شکست خوردم رو می‌تونم اوکسو معرفی کنم که شاید اسمش رو شنیده باشید. الانم دارم کار‌هایی رو شروع می‌کنم چون با خودم عهد کرده بودم که تا بیست سالگی جاهای مختلفی کار کنم و تجربه کنم و بعد از تجربیاتم استفاده کنم. بعد از رسیدن به بیست سالگی خوشحالم که یکی از تجربیات خوبم همکاری با میزفاست و دارم ادامش میدم...

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *


حداکثر حجم فایل برای آپلود: 1 مگابایت.
فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ.
شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید.

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر