عناصر جدید HTML5

یادگیری HTML

تعداد بازدید : 6800

تاریخ و ساعت انتشار : یک شنبه 6 فروردین 1396 13:51

لیست زیر ، عناصر جدید در HTML5 و مورد استفاده آنها می باشند :

عناصر جدید اسمی/ساختاری

تگ	مورد استفاده
<article>	تعریف یک مقاله یا عطف به مرجع در داخل سند
<aside>	تعریف محتوایی در کنار محتوای اصلی صفحه
<bdi>	تعریف متنی با جهت متفاوت از متون دیگر صفحه
<details>	تعریف توضیحات افزوده که کاربر بتواند مشاهده کند یا نمایش آن را حذف کند.
<dialog>	تعریف یک باکس متن
<figcaption>	تعریف یک عنوان برای یک عنصر <figure>
<figure>	تعریف محتوایی که در عنصر خود جایگذاری می شود مانند تصاویر ، دیاگرام ها ، کد ها و ...
<footer>	تعریف یک پانویس برای سند یا یک بخش
<header>	تعریف یک سرتیتر برای سند یا یک بخش
<main>	تعریف محتوای اصلی یک سند
<mark>	تعریف یک متن یا کلمه هایلایت شده
<menuitem>	تعریف یک آیتم برای یک منو یا لیست دستور که کاربر بتواند از طریق یک منوی پاپ آپ آن را فراخوانی کند
<meter>	تعریف یک اندازه گیری عددی در یک محدوده مشخص (مانند : درجه)
<nav>	تعریف لینک های ناوبری در سند
<progress>	تعریف پروسه یک کار/وظیفه
<rp>	تعریف محتوای مورد نیاز برای نمایش در مرورگرهایی که حاشیه نویسی روبی را پشتیبانی نمی کنند.
<rt>	تعریف توضیحات/تلفظ برای کاراکتر ها (برای تایپوگرافی آسیای شرقی)
<ruby>	تعریف حاشیه نویسی روبی برای کاراکتر ها (برای تایپوگرافی آسیای شرقی)
<section>	تعریف یک بخش در سند
<summary>	تعریف یک تیتر قابل مشاهده برای عنصر <details>
<time>	تعریف تاریخ/زمان
<wbr>	تعریف یک سر سطر ممکن

عناصر جدید فرم

تگ	مورد استفاده
<datalist>	تعریف گزینه های از پیش تعیین شده برای کنترل های ورودی
<keygen>	تعریف یک فیلد تولیدکننده جفت کلید (برای فرم ها)
<output>	تعریف نتیجه یک محاسبه

انواع جدید ورودی ها

انواع جدید ورودی ها	صفات جدید ورودی ها
color date datetime datetime-local email month number range search tel time url week	autocomplete autofocus form formaction formenctype formmethod formnovalidate formtarget height and width list min and max multiple pattern (regexp) placeholder required step

ترکیب جدید صفات در HTML5

HTML5 به 4 روش متفاوتی ترکیب صفات را ارائه می دهد.

مثال زیر ترکیب های متفاوت استفاده شده در تگ <input> را نمایش می دهد :

نوع روش	مثال
Empty	<input type="text" value="John" disabled>
Unquoted	<input type="text" value=John>
Double-quoted	<"input type="text" value="John Doe>
Single-quoted	<'input type="text" value='John Doe>

در HTML5 هر 4 روش ممکن است استفاده شود. البته بستگی به این دارد که بخواهیم چه چیزهایی به صفت اضافه کنیم.

گرافیک های HTML5

تگ	توضیحات
<canvas>	Draw graphics, on the fly, via scripting (usually JavaScript)
<svg>	Draw scalable vector graphics

عناصر جدید رسانه در HTML5

تگ	توضیحات
<audio>	Defines sound content
<embed>	Defines containers for external applications (like plug-ins)
<source>	Defines sources for <video> and <audio>
<track>	Defines tracks for <video> and <audio>
<video>	Defines video or movie content