در جلسات قبل با فونت ها, فرم ها, جدول ها و … در HTML آشنا شدیم. قصدمان در این جلسه آشنایی با HTML 5 است, اما HTML5 چیست؟ چه برتری در مقایسه با HTML دارد؟
گفتیم که HTML یک زبان استاندارد برای طراحی سایت است که با استفاده از تگ ها ویژگی هایی را به وب سایت ما اضافه می کند.
HTML5 پنجمین و جدیدترین نسخه ی HTML است که در سال 1997 طراحی و معرفی شد. این نسخه هم اکنون نیز در حال توسعه و به روزرسانی است. HTML5 از جدیدترین فناوری های چند رسانه ای مانند انیمیشن و … پشتیبانی می کند. در ادامه قصد داریم بیشتر و بهتر به معرفی این نسخه از HTML بپردازیم. با ما همراه باشید.
مطالبی که در هر جلسه ارائه می دهیم به صورت پشت سر هم هستند, پس اگر هنوز جلسه ی 7 را نخوانده اید🤨 این جلسه را شروع نکنید.🙄
HTML5 آخرین و جدید ترین نسخه ی به روزشده ی زبان HTML است و تفاوت عمده ای با نسخه های قبلی دارد. منظور از تفاوت عمده استاندارد کردن بسیاری از روشهای جدید استفاده توسعه دهندگان ازآن است و پشتیبانی از جدیدترین تکنولوژی هاست.
تغییرات صورت گرفته در این نسخه در نتیجه اهداف بزرگتر در طراحی زبان است. این اهداف در درجه اول شامل موارد زیر هستند:
نشانه گذاری معنایی یعنی استفاده از نشانه ها و تگ هایی که دارای معنی هستند به جای نشانه گذاری های ساده و پیش پا افتاده. به عنوان مثال ، برچسب <h1> نشان می دهد که محتوای عنصر عنوان یا عنوان کل سند است در مقابل اگر فقط متن را پررنگ و بزرگ کنیم بدون استفاده از تگ مناسب ، این دیگر نشانه گذاری معنایی نخواهد بود.
البته HTML همیشه از نشانه گذاری معنایی استفاده میکرد مانند تگ های عنوان و… اما این مقدار کافی نبود تا اینکه HTML5 به طور گسترده تر و حرفه ای تر از آنها استفاده کرد.
در نسخه های قبلی ، عناصر ساختاری متداول مانند هدرهای صفحه ، منوهای ناوبری و بخش های محتوای اصلی ، همه با همان عنصر HTML ، تگ <div> نشان داده شدند. در HTML ، عناصر معنایی جدیدی برای نشان دادن ساختار اصلی یک صفحه وجود دارند:
|
هدر |
<header> |
| برای تمامی منوها |
<nav> |
|
محتوای اصلی صفحه |
<main> |
| برای زمانی که محتوا بصورت بلاگ باید در صفحات درج شود |
<article> |
|
برای منوهای کناری |
<aside> |
|
گروه بندی عناصر مرتبط |
<section> |
| فوتر |
<footer> |
| پخش فایلهای صوتی و تصویری |
<audio> and <video> |
|
امکان طراحی المان های گرافیکی با استفاده از یک زبان اسکریپت نویسی مجزا |
<canvas> |
| جای گذاری محتوا یا اپلیکیشن خارجی در صفحه |
<embed> |
عناصر جدید درون خطی (inline) مانند <address> و <time> معرفی شده اند. این موارد به موتورهای جستجو و سایر خدمات کمک می کند تا اطلاعات موجود در یک صفحه را برای نمایش در سایر زمینه ها به راحتی پیدا کنند. در عین حال ، عناصر درون خطی که اثرات مختلفی مانند bold کردن، مورب کردن و زیرخط دار شدن را ایجاد می کنند ، تصحیح شده یا دوباره تعریف می شوند تا معنایی خاصی را القا کنند.
تفکیک بین محتوا و طراحی به شما اجازه می دهد تا یک سند به سرعت برای اهداف مختلف مجدداً قالب بندی شود و یا استایلی در چندین سند مورد استفاده مجدد قرار گیرد.
نشانه‌گذاری فقط برای گفتن نحوه نمایش اشیا مورد نظر بود که این شامل موارد زیر است :
بیشتر ویژگی های HTML که اجازه این نوع موارد را می دهد کاملاً منسوخ شده است.
وسایل ” مرسوم ” مانند رایانه‌های رومیزی , لپ‌تاپ‌ها , تبلت ها, و تلفن‌های همراه طیف وسیعی از اندازه صفحه نمایش, نسبت‌های ابعاد صفحه نمایش و تجربیات تعامل کاربر را ارائه می‌دهند . این تنوع به تنهایی کافی است تا روشهای طراحی و واکنشگرایی تغییر کند.
HTML ، CSS و JavaScript سه زبان توسعه سمت کاربر است و هر یک از آنها به موازات هم تکامل یافته‌اند , اغلب در عملکرد و حوزه همپوشانی دارند .
علاوه بر مواردی که در بالا ذکر شد، تمرکز بر گسترش این زبان ها با توجه به ماهیت آن هاست ؛
HTML – محتوا
CSS – طراحی
JS – تعامل
به خاطر سپردن این موضوع می تواند به فرد کمک کند تا مشخص کند از کدام زبان استفاده کند ، خصوصاً در مواردی که انجام کاری به بیش از یک روش امکان پذیر باشد. به عنوان مثال ، اگر می خواهید رنگ چیزی را تغییر دهید ، اولین فکر شما استفاده از CSS است. از طرف دیگر ، اگر می خواهید در پاسخ به ورودی کاربر رنگ چیزی را تغییر دهید ، احتمالاً می خواهید از JavaScript استفاده کنید.
با افزایش پهنای باند و سرعت اینترنت ، ما بیشتر و بیشتر به سمت استفاده از اینترنت به عنوان بستر رسانه حرکت کرده ایم. HTML برای اسنادی که بیشتر متن و دارای چند تصویر هستند ایجاد شده است نه برای صفحات رسانه ای غنی که دارای انواع صدا و ویدئو هستند.
هنگامی که افراد برای اولین بار این نوع تجربیات را به صفحات وب اضافه کردند ، کاربران نیاز داشتند که افزونه های خاصی را به مرورگرهای خود اضافه کنند. این افزونه ها گزینه‌های ضعیف و محدودی برای کاربران انجام می‌دادند و باعث ایجاد حفره های امنیتی می شدند. همین باعث شد توسعه دهندگان عملکرد اصلی صفحه وب را به زبانهای دیگر مانند Flash یا Java بنویسند اما محتوا از نظر موتورهای جستجو و صفحه خوانان پنهان بود.
اکنون ، HTML5 از رسانه با عناصری مانند <video> و <audio> پشتیبانی می کند ، در حالی که <canvas> فضای مشخصی را برای طراحی و گرافیک ایجاد شده توسط JavaScript فراهم می کند. عناصر فرم جدید, همراه با یکپارچگی بهتر بین HTML5 ، CSS و جاوا اسکریپت برنامه‌های کاربردی وب با مقیاس کامل با استفاده از سه زبان که بومی مرورگر وب هستند ایجاد کردند ، بدون متصل کردن متصل کردن یا add کردن.
ساده ترین پاسخ به این سوال این است که نسخه فعلی “کاملترین نسخه” است و چرا نباید از یک نسخه ی کامل استفاده کرد؟
چون نسخه های جدید کمی پیچیده هستند و شاید برای همه استفاده از آن آسان نباشد. روشهای قدیمی علامت گذاری هنوز هم در بیشتر مرورگرها کار می کنند. برای مثال اگر <img align = “right” /> را در صفحه وب خود تایپ کنید ، متن همانطور که انتظار دارید در اطراف تصویر قرار می گیرد.
دلایل زیادی برای توجیه استفاده از HTML5 و عدم استفاده از ویژگی های منسوخ شده وجود دارد. برخی کاربردی هستند ، در حالی که برخی دیگر فلسفی هستند.
وقتی از امکانات پیشرفته ی HTML5 صحبت می کنیم دقیقا منظورمان موارد زیر و بسیاری امکانات دیگر است که برتری خاصی به HTML5 داده است؛
برای پاسخگویی به این سوال باید یک مقایسه بین این دو انجام شود تا دلیل اصرار ما برای برتری HTML5 مشخص شود؛
در این مقاله سعی کردیم به ساده ترین شکل ممکن HTML5 را برای شما معرفی کنیم. قطعا با توجه به امکانات و ویژگی هایی که HTML5 دارد, آینده ی وب را دگرگون خواهد کرد پس لازم است به عنوان کسی که علاقه مند به یادگیری HTML است به خوبی با HTML5 و ویژگی های برتر آن آشنا شوید.
😊✌ از بقیه‌ی جلسات آموزش رایگان HTML جا نمونید✌😊
منبع؛ www.html.com
سلام
اونطوری که من متوجه شدم تگ های مثلا footer aside nav گذاشتنشون هیچ تغییری تو صفحه ایجاد نمیکنه . و به این ها میگن تگ معنایی . درسته؟
اگر بله پس فایدشون چیه چرا باید تگی بزاریم که هیچی نشون نمیده؟