آشنایی با HTML5

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

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

منظور از 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>
نمونه تگ article
نمونه تگ 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>
تگ 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

پایان ترم

[box type=”info” class=”question-from-users” width=””]

یک تگ حذف شده و یک تگ جدید در HTML5 را مثال بزنید و کاربرد آن‌ها را بیان کنید. ۱۰ نمره =)))

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

[/box]

نتیجه گیری

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

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

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

تا مقاله بعد…

فیلم آموزشی asp.net core 2

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

روی فصل بالا کلیک کنید.

ازمون HTML شرکت کن

روی لینک بالا کلیک کن

فیلم آموزشی asp.net core 2

7 نظر

7 پاسخ

  1. جواب سوال:
    تگ footer (با کاربرد ایجاد پانوشت) از تگ های معنایی که در این نسخه اضافه شده است
    تگ acronym (با کاربرد نشان دادن سرنام کلمات برای مخفف کردن) هم حذف شده که جایگزین آن abbr است

  2. acronym نمایش یک عبارت مخفف استفاده می شود
    footer به عنوان پانوشت در یک سند یا صفحه استفاده میشود

    1. سلام علی اکبر، درسته ممنونم. جایزه‌ات شارژ شد.

  3. پاسخ سوال :
    تگ acronym و abbr
    برای نمایش یک عبارت مخفف استفاده می شود.

    1. سلام
      برای توضیحاتش میشه استفاده کرد. ولی از نظر سئو به کدهای schema بیشتر توجه کنید.

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

نشانی ایمیل شما منتشر نخواهد شد.

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

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

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

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=