what is html5

HTML5 چیست؟ بررسی مزایا و معایب و امکانات جدید

زمان مطالعه 5 دقیقه
HTML5 چیست؟ بررسی مزایا و معایب و امکانات جدید

HTML5 طوری طراحی شده که تقریباً هر کاری را که می توانیم به صورت آنلاین بدون نیاز به دانلود افزونه‌های مرورگر یا نرم افزارهای دیگر با آن انجام دهیم. انیمیشن؟ قراردادن موسیقی و ویدیو ؟ همه چی!

0
()

HTML5 چیست؟

HTML5 واقعاً چیه؟ با اومدنش سر و صدای فراوانی را با آمدنش به عرصه برپا کرد اما در نهایت یک بروزرسانی از نسخه مورد استفاده از سال 1997 html تا به امروز است که برخی از المان‌ها را اضافه و یا کم کرده و برخی از موارد را شفاف‌سازی کرده است.

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


HTML چیست ؟

در پاسخ به سوال html چیست باید بگوییم هر یک از برچسب‌های html، معنا و مفهوم خاصی دارند و تأثیر مشخصی بر محتوا می‌گذارند؛ مثلاً برچسب‌هایی برای تغییر شکل ظاهری متن، نظیر درشت و ضخیم کردن یک کلمه یا برقراری پیوند به صفحات دیگر در اچ‌تی‌ام‌ال تعریف شده‌اند.

یک سند html، یک پرونده مبتنی بر متن (Text–based) است که معمولاً با پسوند htm یا html نام‌گذاری شده و محتویات آن از برچسب‌های اچ‌تی‌ام‌ال تشکیل می‌شود. مرورگرهای وب، که قادر به درک و تفسیر برچسب‌های اچ‌تی‌ام‌ال هستند، تک‌تک آن‌ها را از داخل سند اچ‌تی‌ام‌ال خوانده و سپس محتوای آن صفحه را نمایان‌سازی (Render) می‌کنند.

HTML زبان برنامه‌نویسی نیست، بلکه زبانی برای نشانه‌گذاری ابرمتن است و اساساً برای ساختار سازی اطلاعات و جدای اجزای منطقی یک نوشتار، نظیر عناوین، تصاویر، فهرست‌ها، بندها و جداول به کار می‌رود. از سوی دیگر، html را نباید به عنوان زبانی برای صفحه‌آرایی یا نقاشی صفحات وب به کار بُرد؛ این وظیفه اکنون بر دوش فناوری‌های دیگری همچون سی‌اس‌اس است.

گفتنی است html شکلی از زبان دیگری بنام اس‌جی‌ام‌ال است و World Wide Web Consortium آن را به عنوان استانداردی برای نشانه‌گذاری مستندات ابرمتنی برای عرضه در وب، تدوین کرده‌است.

html سه نوع برچسب وجود دارد:

  1. تگ‌های یکه. مانند‎<HR>‎که خط رسم می‌کند.
  2. تگ‌هایی که شروع و پایان دارند. مثل: ‎<head></head>‎
  3. تگ‌هایی که دارای ویژگی می‌باشند. مثل: ‎<a href=”http://www.w3.org>متن</a>‎

تغییرات المان‌ها پایه‌ای پیکربندی در HTML5

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

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


امکانات HTML5

  • ایمیل
  • شماره‌ها
  • تلفن‌ها
  • URLها
  • رنگ
  • تاریخ
  • زمان
  • عدد با بازه 0 تا 100
  • باکس جستجو

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


انواع جدید پارامتر‌های ورودی HTML5

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

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


المان‌های گرافیکی SVG و Canvas اضافه شده به HTML5

دو ساختار گرافیکی جدید به HTML5 اضافه شده است، SVG و Canvas.
Canvas همانند یک بوم نقاشی خالی است که شما با استفاده از جاوا اسکریپت میتوانید بر روی آن نقاشی کنید. این امکان در HTML5 برای ساخت بازی‌های تحت وب و به عنوان جایگزینی برای اجرای ویدئو به جای فلش استفاده می‌شود.
یکی از استفاده‌های Canvas در فروشگاه‌های اینترنتی، نمایش لحظه‌ای تغییرات یک محصول قابل سفارش‌سازی همانند یک تیشرت با طرح دلخواه است. Canvas ن‍ی‍از نصب بودن FlashPlayer بر روی مرورگر را حذف کرده است.


تگ های ویدیو HTML5

المان‌های جدید رسانه‌ای موجود در ساختار HTML5 برای فروشگاه‌های اینترنتی بسیار مفید و کارآمد است و امکان قرار دادن فایل‌های ویدئویی را بدون نیاز به استفاده از سرویس‌های پخش خارجی همانند YouTubeرا فراهم می‌کند. البته استفاده از HTML5 برای پخش فایل‌های ویدئویی کار آسانی نیست و انتخاب پسوند و اندازه صحیح برای فایل‌ها کار مشکلی است اما زمانی که بدرستی انجام شود بر روی تمامی دستگاه‌ها و نمایشگرها قابل استفاده است. یکی از محدودیت‌های فایل‌های فلش این بود که در سیستم‌عامل IOS شرکت اپل قابل اجرا نبودند.


مزایا و معایب HTML5

مزایا HTML5‌

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

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


معایب HTML5

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


تگ های جدید HTML5 اضافه شده در html

در اینجا به 22 تگ جدید که در HTML5 نیاز به آشنایی با آنها داریم اشاره می کنیم.

آشنایی با 22 تگ HTML5
آشنایی با 22 تگ HTML5
  • <Article> یک بلاک برای مقاله ایجاد می کند.
  • <Aside> جهت و طرف محتوای سایت را مشخص می کند.
  • <Audio> محتوای صوتی را معرفی می کند.
  • <Canvas> گرافیک را معرفی می کند.
  • <Command> یک دستور و کامند را معرفی می کند.
  • <Datagrid> داده ای را بصورت فهرست شاخه ای معرفی می کند.
  • <Datalist> یک فهرست کشویی را معرفی می کند.
  • <Details> به معرفی جزییات یک عنصر می پردازد.
  • <Dialog> دیالوگ و یا یک گفتگو را مشخص می کند.
  • <EventSource> منبع اتفاقات فرستاده شده توسط سرور را معرفی می کند.
  • <Figure> معرفی یک گروه از محتوای چند رسانه ای
  • <Footer> معرفی پاورقی بعنوان یک بخش یا یک صفحه
  • <Header> معرفی سر صفحه بعنوان یک بخش یا یک صفحه
  • <Mark> معرفی متون مارک شده
  • <Meter> معرفی واحد سنجش
  • <Nav> معرفی ناوبری لینک ها
  • <Output> معرفی بعضی از انواع خروجی ها
  • <Progress> معرفی نمای موقعیت پیشرفت
  • <Section> معرفی یک بخش
  • <Source> معرفی منابع رسانه ها
  • <Time> معرفی تاریخ/زمان
  • <Video> معرفی یک ویدئو

میانگین امتیاز : / 5. تعدا آرا :

ثبت امتیاز شما به این مطلب

نظرات کاربران

اميد4 تیر 1402

چقدر مطالبتون كامل و جامع هست ممنون ازتون
شما دوره هاي آموزشي هم داريد؟

آوادیس9 تیر 1402

سلام لطف شماست بله برنامه های در مورد دوره های آموزشی هم داریم که اعلام می کنیم.