25 ویژگی جدید HTML5 با مثال کاربردی

آنچه خواهید دید :

همونطور که میدونید در اپدیت HTML5 تگ های جدیدی به این زبان اضافه شده که تو این مقاله به اونها و کارایی هاشون می پردازیم.

مزایای HTML5 نسبت به HTML4 و تفاوت های آنها

کد های تمیز و بهینه تر

این کد را ببینید

<div id="header">
        <h1>This is Header</h1>
        <div id="nav">
            <ul>
                <li><a href="#">header</a></li>
                <li><a href="#">header</a></li>
                <li><a href="#">header</a></li>
            </ul>
        </div>
 </div>

آیا این کد تمیز بهتر و بهینه تر است یا این کد 👇

<header>
        <h1>This is Header</h1>
        <nav>
            <ul>
                <li><a href="#">header</a></li>
                <li><a href="#">header</a></li>
                <li><a href="#">header</a></li>
            </ul>
        </nav>
</header>

خب حالا شما قضاوت کنید کدام کد بهتر بود؟ اولی یا دومی؟

با اومدن تگ های مثل <header> ,<footer> ,<section> ,<nav> ,<main> ,<aside> به HTML5، کار شما بسیار راحت خواهد شد زیرا کد های شما کوتاه تر خواهد شد و در نتیجه میزان خوانایی ان بیشتر است البته ممکن است این موضوع زیاد به چشم نیاید اما در یک کد طولانی این موضوع بسیار مملوس تر خواهد بود.

درک پذیری ان بیشتر میشود بنابر این این کد ها خوانا تر هستند. منظور از خوانا بودن برای افرادی است که قرار است در آینده کد های شما را بخوانند و ان را توسعه دهند.

2.پشتیبانی از تمامی مرورگر های قوی حال حاضر توسط HTML5

3.مرورگرهای وب محتوایی که با این نسخه نوشته شده است را از محتوا های معمولی متمایز می کنند.

المنت های آپدیت جدید HTML5:

<aside>
<article>
<bdi>
<details>
<dialog>
<footer>
<header>
<main>
<mark>
<meter>
<nav>
<progress>
<rp>
<rt>
<ruby>
<section>
<summary>
<time>

المنت های گرافیکی

<canvas>
<svg>

المنت های رسانه ای

<audio>
<embed>
<source>
<track>
<video>

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

تگ Section بیشتر برای محتوای گروه‌بندی شده و بخش بندی صفحات استفاده میشود
تگ Article برای گروه‌بندی محتوایی مورد استفاده قرار می‌گیرد که در بازه‌های زمانی مختلف تمایل به تغییر دارند مانند مقالات
تگ Header همانطور که از اسمش پیداست معمولا برای سربرگ وبسایت از ان استفاده میشود و معمولا اولین کدی است که ما باید در <body>از ان استفاده کنیم
تگ Footer همانطور که از اسمش پیداست برای تعیین پایینترین بخش صفحه استفاده می شود
تگ svg برای ایجاد فایل گرافیکی در وب استفاده می شود.در این تگ،از تگ های <circle>,<ellipse>,<rect>,<polygon> برای ترسیم اشکال مختلف استفاده می شود
تگ aside برای ایجاد ساید بار در قسمت راست یا چپ صفحه می باشد
تگ meter ایجاد یک نوار که برای ارزش گذاری استفاده می شود و با استفاده از آن میتوان یک محدوده اندازه گیری بصورت عددی نمایش داد این تگ دارای پارامتر های min و max و value و low و high است
تگ mark برای رنگی کردن بخشی از متن استفاده می شود و رنگ ان هم زرد فسفری است
تگ ruby اگر بخواهیم تلفظ کاراکترهای کشورهای آسیای شرقی مانند چینی و ژاپنی را نشان دهیم از حاشیه نویسی روبی استفاده می کنیم که از چند تگ rt استفاده می شود
تگ rt وظیفه تگ rt این است که توضیح یا تلفظ کاراکترها (برای تایپوگرافی شرق آسیا) را در یک حاشیه نویسی ruby تعریف کند
تگ rp تگی است که برای تهیه پرانتز در اطراف یک متن ruby استفاده می شود که توسط مرورگرهایی که حاشیه نویسی ruby را پشتیبانی نمی کنند نشان داده می شود
تگ canvas برای ترسیم گرافیکی با زبان جاوااسکریپت استفاده می شود
تگ dialog برای نمایش پنجره های بازشو در صفحه استفاده می شود
تگ bdi با کمک این تگ می توان متن هایی را که فرمت هایی متفاوت با یکدیگر دارند؛ در یک صفحه وب قرار داد.
تگ nav مجموعه ای از لینک ها را تعریف می کند که برای ایجاد منوهای افقی استفاده می شود.
تگ time یک زمان/تاریخ قابل خواندن توسط انسان است و همانطور این تگ می تواند برای رمزنگاری تاریخ و زمان را به روشی قابل خواندن توسط دستگاه نیز به کار رود
تگ summary تگی است که در تگ details قرار می گیرد و یک عنوان برای ان تعریف می کند
تگ details باکسی است که میتوان در ان محتوا (متن و …) قرار بگیرد و وقتی روی ان کلیک می شود باز و بسته شود و محتوا را نشان دهد
تگ main همانطور که از اسمش مشخص است بدنه سایت است و محتوای اصلی سایت را خود را درون خود جای می دهد
تگ progress میتواند درصد پیشرفت کار را مشخص کند و دارای 2 پارامتر max و value است
تگ audio با با این تگ میتوانیم صدا اهنگ و هر فایل صوتی را در وب سایت قرار دهیم
تگ embed تگی است که با ان میتوان فایل های مختلف (عکس ، فیلم ، صدا ) را در وب سایت قرار دهیم
تگ source از این تگ برای مشخص کردن منابع چندرسانه ای، مانند video و audio و picture استفاده می شود
تگ track از این عنصر برای مشخص کردن زیرنویس ها که حاوی متن هستند استفاده می شود
تگ video همانطور که از اسمش مشخص است برای قرار دادن فایل ویدیویی (فیلم، کلیپ) مورد استفاده قرار میگیرد