معرفی تگ های HTML5

[ali_livero]

بنام خداوند بخشنده مهربان
در زیر میخوام تگ های html5 بهتون معرف کنم.
اولین تگ: article
تعریف و کاربرد تگ article در HTML
تگ <article> محتوایی مستقل و جامع را مشخص می کند.
یک Article باید به تنهایی دارای معنا و مفهوم باشد و بتوان آن را مستقل از سایر اجزای سایت در مکان های مختلف ارائه داد.
منابع بالقوه برای تگ <article> عبارتند از:

[*=right]متن پست ها در فروم ها
[*=right]متن مطالب جدید در وبلاگ ها
[*=right]متن خبری در سایت های خبری
[*=right]کامنت ها و نظرات


دومین تگ: aside
تعریف و کاربرد تگ aside در HTML

از اين تگ، معمولاً براي تعريف نوار کناري محتواي اصلي استفاده مي شود.
محتوای موجود در تگ <aside> باید با محتوای اصلی مرتبط باشد.
سومین تگ:audio
تعریف و کاربرد تگ audio در HTML
تگ <audio> تعیین صوت، مانند موسیقی یا دیگر جریان های صوتی را مشخص می کند.
در حال حاضر سه نوع فرمت صوتی در تگ <audio> پشتیبانی می شود که عبارتند از: MP3 ،Wav و Ogg:
چهارمین تگ:canvas
تعریف و کاربرد تگ canvas در HTML

تگ <canvas> به منظور رسم گرافیک های شناورکه از طریق برنامه نویسی معمولا زبان (JavaScript) به کار می رود.
تگ <canvas> تنها یک ظرف یا قالبی است که گرافیک ها را در خود جای می دهد، شما باید برای رسم گرافیک ها از اسکریپت ها استفاده کنید.
پنجمین تگ:datalist
تعریف و کاربرد تگ datalist در HTML

تگ <datalist> یک لیست از گزینه های از قبل تعریف شده برای یک عنصر <input> مشخص می کند.
تگ <datalist> برای ارائه یک ویژگی "تکمیل خودکار" برای عنصر <input> استفاده می شود. بدین صورت که کاربران یک لیست کشویی از گزینه های از پیش تعریف شده در هنگام تکمیل فیلد، مشاهده می کنند.
شما می توانید با استفاده از یک عنصر <datalist>، لیست اجزای <input> را به هم متصل کنید.
ششمین تگ: details (http://www.beyamooz.com/tags/312-html-tag/2221-%D8%AA%DA%AF-details)
تعریف و کاربرد تگ details در HTML
تگ <details> جزئیات اضافی که کاربر بر حسب تقاضا می تواند مشاهده یا مخفی نماید را مشخص می کند.
تگ <details> مورد استفاده برای ایجاد یک ویجت تعاملی است که کاربر با استفاده از کلیک کردن می تواند باز یا بسته اش نماید. و هر نوع محتوایی را می توان داخل تگ <details> قرار داد.
محتوای عنصر <details> نباید قابل مشاهده باشد مگر این که ویژگی های open قرار داده شده باشد.
هفتمین تگ:dialog
تعریف و کاربرد تگ dialog در HTML

تگ <dialog> یک جعبه یا پنجره محاوره را تعریف می کند.
تگ <dialog> ایجاد پنجره های popup و modals (کیفیتی) در یک صفحه وب را آسان می کند.
هشتمین تگ:embed
تعریف و کاربرد تگ embed در HTML

تگ <embed> یک قالب برای یک برنامه خارجی و یا محتوای تعاملی را تعریف می کند(a plug-in).
نهمین و دهمین تگ:figcaption&figure
تعریف و کاربرد تگ figcaption در HTML

تگ <figcaption> یک عنوان یا caption برای عنصر <figure> (http://www.beyamooz.com/tags/312-html-tag/2232-%D8%AA%DA%AF-figure) تعریف می کند.
تگ <figcaption> می تواند به عنوان اولین یا آخرین فرزند عنصر <figure> قرار گیرد.
تعریف و کاربرد تگ figure در HTML

تگ <figure> محتوای خود مانند تصاویر، نمودار ها، عکس ها، لیست کد و ... را مشخص می کند.
در حالی که محتوای عنصر <figure> با جریان اصلی سند مرتبط است،جایگاهی مستقل دارد و در صورتی که این عنصر حذف شود، نباید تاثیری بر جریان اصلی بگذارد.
یازدهمین تگ:footer
تعریف و کاربرد تگ footer در HTML

تگ <footer> یک پانویس برای یک سند یا یک بخش تعریف می کند.
تگ <footer> باید شامل اطلاعاتی مربوط به عنصر حاوی اش باشد.
تگ <footer> به طور معمول شامل نام نویسنده سند، کپی رایت، لینک ها به واژه های مورد استفاده، اطلاعات تماس، و ... می باشد.
شما می توانید چندین عنصر <footer> در یک سند داشته باشید.
دوازدهمین تگ:header
تعریف و کاربرد تگ header در HTML

تگ <header> به یک بخش یا سند، یک هدر اختصاص می دهد.
تگ <header> باید به عنوان یک ظرف برای محتوای مقدماتی و یا مجموعه ای از لینک های navigation استفاده شود.
شما می توانید در یک سند چندین عنصر <header> داشته باشید.
نکته: یک تگ <header> را نمی توان داخل <footer> و <address> یا عناصر <header> دیگر قرار داد.
سیزدهمین تگ:bdi
تعریف و کاربرد تگ bdi در HTML

bdi مخفف Bi-Directiona Isolationl یعنی جدا سازی دو جهته.
تگ <bdi> برای جهت دادن به متن یا کاراکتراهایی که خارج از زبان اصلی صفحه بوده و از لحاظ فرمت با آن فرق دارد استفاده می شود.
این عنصر جهت تعبیه محتوایی که کاربر ایجاد می کند و جهت نوشتاری که زبان آن نامشخص است به کار می رود.
چهاردهمین تگ:keygen
تعریف و کاربرد تگ keygen در HTML

تگ <keygen> یک مولد کلیدی جفت، مورد استفاده برای فرم ها ایجاد می کند.
تگ <keygen> برای فراهم کردن یک راه امن به منظور تایید هویت کاربران در فرم‌هایی نظیر ورود و ثبت نام می‌باشد.هنگامی که کاربر فیلد را پر می کند و ارسال می کند دو کلید یک کلید خصوصی و یک کلید عمومی ایجاد می شود.
هنگامی که فرم ارسال می شود، کلید خصوصی به صورت محلی ذخیره شده و کلید عمومی به سرور ارسال می شود
پانزدهمین تگ:main
تعریف و کاربرد تگ main در HTML

تگ <main> محتوای اصلی یک سند را مشخص می کند.
محتوای درون عنصر <main> باید منحصر به فرد برای آن سند باشد. عنصر <main> شامل هر محتوایی در سراسر اسناد (مانند ستون های فرعی، لینک های ناوبری، اطلاعات کپی رایت، آرم سایت و فرم جستجو) باشد را نباید تکرار کند.
نکته: نباید بیش از یک عنصر <main> در سند باشد. عنصر <main> نباید در داخل تگ های دیگر مانند <article> و <aside> ،<footer> ،<header> یا <nav> قرار گیرد.
شانزدهمین تگ:mark
تعریف و کاربرد تگ mark در HTML

تگ <mark> یک متن علامت گذاری شده را مشخص می کند.
اگر شما می خواهید قسمتی از متن را برجسته کنید از تگ <mark> استفاده کنید.
هفتدهمین تگ:menuitem
تعریف و کاربرد تگ menuitem در HTML

تگ <menuitem> برای معرفی یک آیتم دستوری یا آیتم منو که کاربر می تواند از منوی popup آن را فراخوانی کند.
هیجدهمین تگ:meter
تعریف و کاربرد تگ meter در HTML

تگ <meter> اندازه گیری عددی یا مقدار کسری را در محدوده شناخته شده تعریف می کند. تگ <meter> به عنوان مقیاس نیز شناخته شده است.
مثال: نحوه استفاده از دیسک، ارتباط از نتیجه جستجو و غیره.
نکته: از تگ <meter> نباید برای نشان دادن یک جریان (مانند نوار پیشرفت) استفاده کرد. برای نشان دادن نوار پیشرفت می توانید از تگ <progress> (http://www.beyamooz.com/tags/312-html-tag/2273-%D8%AA%DA%AF-progress) استفاده کنید.
نوزدهمین تگ:nav
تعریف و کاربرد تگ nav در HTML

تگ <nav> مجموعه ای از لینک های ناوبری را تعریف می کند.
تمام لینک های صفحه را لازم نیست در تگ <nav> قرار داد. در تگ <nav> فقط لینک های ناوبری اصلی در نظر گرفته می شود.
مرورگر ها، از جمله خوانندگان صفحه نمایش برای کاربران غیر فعال، که با استفاده از این عنصر می توانند تعیین کنند لینکهای داخل این تگ، لینکهای اصلی سایت شما هستند یا باید حذف شوند.
بیستمین تگ:output
تعریف و کاربرد تگ output در HTML

تگ <output> نشان دهنده نتیجه یک محاسبه است. (مانند نتیجه محاسبات انجام شده توسط یک اسکریپت)
بسیت و یکمین تگ:progress
تعریف و کاربرد تگ progress در HTML

تگ <progress> نشان دهنده پیشرفت یک پروسه یا کار است.
بسیت و دومین و بیست و سومین و بیست و چهارمین تگ:rp و rt و ruby
تعریف و کاربرد تگ rp در HTML

تگ <rp> تعریف می کند که چه چیزی نشان داده شود، اگر مرورگر از حاشیه نویسی ruby پشتیبانی نکند.
حاشیه نویسی ruby برای نمایش تلفظ کاراکترهای زبان های آسیای شرقی کاربرد دارد.
تگ <rp> همراه با تگ <ruby> (http://www.beyamooz.com/tags/312-html-tag/2277-%D8%AA%DA%AF-ruby) و تگ <rt> (http://www.beyamooz.com/tags/312-html-tag/2276-%D8%AA%DA%AF-rt) استفاده می شود: تگ <ruby> شامل یک یا چند کاراکتر است که نیاز به تفسیر یا تلفظ صحیح کارکترها دارد، و تگ <rt> برای دادن اطلاعات و اختیار به تگ <rp> که چه چیزی نشان داده شود، هنگامی که مرورگر از حاشیه نویسی ruby پشتیبانی نکند.
تعریف و کاربرد تگ rt در HTML

تگ <rt> توضیح یا تلفظ صحیح حروف (برای تایپوگراف شرق آسیا) در حاشیه نویسی ruby را مشخص می کند.
تگ <rt> همراه با تگ <ruby> (http://www.beyamooz.com/tags/312-html-tag/2277-%D8%AA%DA%AF-ruby) و تگ <rp> (http://www.beyamooz.com/tags/312-html-tag/2275-%D8%AA%DA%AF-rp) به کار می رود: تگ <ruby> شامل یک یا چند کاراکتر است که نیاز به تفسیر یا تلفظ صحیح کارکترها دارد، و تگ <rt> برای دادن اطلاعات و اختیار به تگ <rp> که چه چیزی نشان داده شود، هنگامی که مرورگر از حاشیه نویسی ruby پشتیبانی نکند.
تعریف و کاربرد تگ ruby در HTML

تگ <ruby> حاشیه نویسی ruby را مشخص می کند.
حاشیه نویسی ruby برای نمایش تلفظ کاراکترهای زبان های آسیای شرقی کاربرد دارد.
بیست و پنجمین تگ:section
تعریف و کاربرد تگ section در HTML

تگ <section> تعیین یک بخش یا قسمت مجزا در یک سند وب، مانند فصل، هدر، پاورقی، و یا هر بخش دیگر از سند را مشخص می کند.
بیست و ششمین تگ:source
تعریف و کاربرد تگ source در HTML

تگ <source> برای تعیین منابع چند رسانه ای برای عناصر رسانه هایی، مانند<video> و <audio> استفاده می شود.
تگ <source> به شما اجازه می دهد که سورس های متفاوت صوتی یا ویدیویی برای مرورگر تعیین کنید تا بر اساس نوع کدک یا نوع رسانه ای که پشتیبانی می کند، یکی را انتخاب کند.
بیست و هفتمین تگ:summary
تعریف و کاربرد تگ summary در HTML

تگ <summary> یک عنوان قابل مشاهده برای عنصر < (http://www.beyamooz.com/tag_details.asp)details (http://www.beyamooz.com/tags/312-html-tag/2221-%D8%AA%DA%AF-details)> (http://www.beyamooz.com/tag_details.asp) تعریف می کند. که عنوان را می توان با استفاده از کلیک کردن باز یا بسته نمایید.
بیست و هشتمین تگ:time
تعریف و کاربرد تگ time در HTML

تگ <time> تاریخ / زمان قابل خواندن برای انسان تعریف می کند.
این عنصر می تواند به عنوان یک روشی برای رمز کردن تاریخ و زمان در یک روش قابل خواندن توسط ماشین استفاده شود به طوری که، عوامل کاربر می توانند پیشنهاد افزودن یادآور تولد یا رویداد های زمان را به تقویم کاربر بدهند و موتورهای جستجوگر می توانند نتایج جستجوی دقیق یا هوشمندی تولید کنند.
بیست و نهمین تگ:track
تعریف و کاربرد تگ track در HTML

تگ <track> آهنگ های متن برای عناصر رسانه ای (<audio> و <video>) را مشخص می کند.
این عنصر برای مشخص کردن زیرنویس ها، فایل های عنوان یا فایل های دیگر که حاوی متن قابل مشاهده هستند استفاده می شود. این تگ زمانی فعال میشود که رسانه در حال پخش باشد.
سی امین تگ:video
تگ <video> مشخص کننده ویدئو مانند کلیپ فیلم و یا دیگر جریان های ویدئویی است.
در حال حاضر،برای عنصر <video> مرورگرها از سه فرمت ویدئویی MP4 ،WebM و Ogg پشتیبانی می کنند.
سی و یکمین تگ:wbr
تعریف و کاربرد تگ wbr در HTML
تگ <wbr> (جلوگیری از شکستن کلمه) مشخص می کند که در کجای متن خوب است یک line-break اضافه کنیم.
نکته: هنگامی که یک کلمه بیش از حد طولانی باشد یا شما می ترسید که مرورگر ادامه آن کلمه را در خط بعد نمایش دهد می توانید از تگ <wbr> استفاده کنید.

نکته1:تگ های main-header-section-article-nav-footer عناصر block هستند.

مثال:در زیر یک صفحه وب ساده با کدهای html5 و بدون استفاده از div ساختم.(فایل ضمیمه را دانلود کنید)

[ali_livero]

چهارمین تگ:canvas
تعریف و کاربرد تگ canvas در HTML
تگ <canvas> به منظور رسم گرافیک های شناورکه از طریق برنامه نویسی معمولا زبان (JavaScript) به کار می رود.
تگ <canvas> تنها یک ظرف یا قالبی است که گرافیک ها را در خود جای می دهد، شما باید برای رسم گرافیک ها از اسکریپت ها استفاده کنید.
مثال:

<canvas id="myCanvas"></canvas>

<script>
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,80);
</script>
پنجمین تگ:datalist
تعریف و کاربرد تگ datalist در HTML
تگ <datalist> یک لیست از گزینه های از قبل تعریف شده برای یک عنصر <input> مشخص می کند.
تگ <datalist> برای ارائه یک ویژگی "تکمیل خودکار" برای عنصر <input> استفاده می شود. بدین صورت که کاربران یک لیست کشویی از گزینه های از پیش تعریف شده در هنگام تکمیل فیلد، مشاهده می کنند.
شما می توانید با استفاده از یک عنصر <datalist>، لیست اجزای <input> را به هم متصل کنید.
مثال:

<input list="browsers">

<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
ششمین تگ: details
تعریف و کاربرد تگ details در HTML
تگ <details> جزئیات اضافی که کاربر بر حسب تقاضا می تواند مشاهده یا مخفی نماید را مشخص می کند.
تگ <details> مورد استفاده برای ایجاد یک ویجت تعاملی است که کاربر با استفاده از کلیک کردن می تواند باز یا بسته اش نماید. و هر نوع محتوایی را می توان داخل تگ <details> قرار داد.
محتوای عنصر <details> نباید قابل مشاهده باشد مگر این که ویژگی های open قرار داده شده باشد.
مثال:

<details>
<summary>Copyright 1999-2014.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>

هفتمین تگ:dialog
تعریف و کاربرد تگ dialog در HTML
تگ <dialog> یک جعبه یا پنجره محاوره را تعریف می کند.
تگ <dialog> ایجاد پنجره های popup و modals (کیفیتی) در یک صفحه وب را آسان می کند.
مثال:

<table>
<tr>
<th>January <dialog open>This is an open dialog window</dialog></th>
<th>February</th>
<th>March</th>
</tr>
<tr>
<td>31</td>
<td>28</td>
<td>31</td>
</tr>
</table>
این آموزش ادامه دارد

[ali_livero]

قسمت سوم:معرفی تگ های html5هشتمین تگ:embed
تعریف و کاربرد تگ embed در HTMLتگ <embed> یک قالب برای یک برنامه خارجی و یا محتوای تعاملی را تعریف می کند(a plug-in).
مثال:

<embed src="helloworld.swf">

نهمین و دهمین تگ:figcaption&figure
تعریف و کاربرد تگ figcaption در HTMLتگ <figcaption> یک عنوان یا caption برای عنصر <figure> (http://www.beyamooz.com/tags/312-html-tag/2232-%D8%AA%DA%AF-figure) تعریف می کند.
تگ <figcaption> می تواند به عنوان اولین یا آخرین فرزند عنصر <figure> قرار گیرد.
تعریف و کاربرد تگ figure در HTMLتگ <figure> محتوای خود مانند تصاویر، نمودار ها، عکس ها، لیست کد و ... را مشخص می کند.
در حالی که محتوای عنصر <figure> با جریان اصلی سند مرتبط است،جایگاهی مستقل دارد و در صورتی که این عنصر حذف شود، نباید تاثیری بر جریان اصلی بگذارد.
<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption>
</figure>
یازدهمین تگ:footer
تعریف و کاربرد تگ footer در HTMLتگ <footer> یک پانویس برای یک سند یا یک بخش تعریف می کند.
تگ <footer> باید شامل اطلاعاتی مربوط به عنصر حاوی اش باشد.
تگ <footer> به طور معمول شامل نام نویسنده سند، کپی رایت، لینک ها به واژه های مورد استفاده، اطلاعات تماس، و ... می باشد.
شما می توانید چندین عنصر <footer> در یک سند داشته باشید.
مثال:

<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: <a href="mailto:someone@example.com">
someone@example.com</a>.</p>
</footer>

دوازدهمین تگ:header
تعریف و کاربرد تگ header در HTMLتگ <header> به یک بخش یا سند، یک هدر اختصاص می دهد.
تگ <header> باید به عنوان یک ظرف برای محتوای مقدماتی و یا مجموعه ای از لینک های navigation استفاده شود.
شما می توانید در یک سند چندین عنصر <header> داشته باشید.
نکته: یک تگ <header> را نمی توان داخل <footer> و <address> یا عناصر <header> دیگر قرار داد.
مثال:یک هدر برای تگ article

<article>
<header>
<h1>Internet Explorer 9</h1>
<p><time pubdate datetime="2011-03-15"></time></p>
</header>
<p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
the public on March 14, 2011 at 21:00 PDT.....</p>
</article>
سیزدهمین تگ:bdi
تعریف و کاربرد تگ bdi در HTML bdi مخفف Bi-Directiona Isolationl یعنی جدا سازی دو جهته.
تگ <bdi> برای جهت دادن به متن یا کاراکتراهایی که خارج از زبان اصلی صفحه بوده و از لحاظ فرمت با آن فرق دارد استفاده می شود.
این عنصر جهت تعبیه محتوایی که کاربر ایجاد می کند و جهت نوشتاری که زبان آن نامشخص است به کار می رود.
مثال:نام های کاربری خارج از زبان اصلی صفحه

<ul>
<li>User <bdi>hrefs</bdi>: 60 points</li>
<li>User <bdi>jdoe</bdi>: 80 points</li>
<li>User <bdi>إيان</bdi>: 90 points</li>
</ul>

چهاردهمین تگ:keygen
تعریف و کاربرد تگ keygen در HTMLتگ <keygen> یک مولد کلیدی جفت، مورد استفاده برای فرم ها ایجاد می کند.
تگ <keygen> برای فراهم کردن یک راه امن به منظور تایید هویت کاربران در فرم‌هایی نظیر ورود و ثبت نام می‌باشد.هنگامی که کاربر فیلد را پر می کند و ارسال می کند دو کلید یک کلید خصوصی و یک کلید عمومی ایجاد می شود.
هنگامی که فرم ارسال می شود، کلید خصوصی به صورت محلی ذخیره شده و کلید عمومی به سرور ارسال می شود
مثال:
<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name">
Encryption: <keygen name="security">
<input type="submit">
</form>
پانزدهمین تگ:main
تعریف و کاربرد تگ main در HTMLتگ <main> محتوای اصلی یک سند را مشخص می کند.
محتوای درون عنصر <main> باید منحصر به فرد برای آن سند باشد. عنصر <main> شامل هر محتوایی در سراسر اسناد (مانند ستون های فرعی، لینک های ناوبری، اطلاعات کپی رایت، آرم سایت و فرم جستجو) باشد را نباید تکرار کند.
نکته: نباید بیش از یک عنصر <main> در سند باشد. عنصر <main> نباید در داخل تگ های دیگر مانند <article> و <aside> ،<footer> ،<header> یا <nav> قرار گیرد.
مثال:
<main>
<h1>Web Browsers</h1>
<p>Google Chrome, Firefox, and Internet Explorer are the most used browsers today.</p>

<article>
<h1>Google Chrome</h1>
<p>Google Chrome is a free, open-source web browser developed by Google, released in 2008.</p>
</article>

<article>
<h1>Internet Explorer</h1>
<p>Internet Explorer is a free web browser from Microsoft, released in 1995.</p>
</article>

<article>
<h1>Mozilla Firefox</h1>
<p>Firefox is a free, open-source web browser from Mozilla, released in 2004.</p>
</article>
</main>