بخش آموزش irDevs.com > لیست تگ های HTML

تگ توضیح مختصر مثال + -
<!--...--> برای گذاشتن کامنت مورد استفاده قرار میگیرد.
اطلاعات بیشتر>>
<!--این یک کامنت است. کامنت ها در مرورگر نمایش داده نمیشوند--><p>This is a paragraph.</p>

خروجی:

This is a paragraph.

براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
<!DOCTYPE> نوع سند را تعریف میکند.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>

خروجی:
The content of the document......
براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
<a> برای گذاشتن لینک مورد استفاده قرار میگیرد.
اطلاعات بیشتر>>
<a href="http://www.irdevs.com">Visit irdevs.com!</a>

خروجی:
براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
<abbr> برای تعریف مخفف مورد استفاده قرار میگیرد.
The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.

خروجی:
The WHO was founded in 1948.
براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
<acronym> در HTML 5 پشتیبان نمیشود . در عوض میتوانید از <abbr> استفاده کنید.
برای تعریف مخفف مورد استفاده قرار میگیرد.
Can I get this <acronym title="as soon as possible">ASAP</acronym>?

خروجی:
Can I get this ASAP?
براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
<address> برای نمایش اطلاعات تماس نویسنده یا مالک یک داکیومنت بکار میرود.
<address>
Written by <a href="mailto:webmaster@example.com">Reza</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

خروجی:
Written by Reza.
Visit us at:
Example.com
Box 564, Disneyland
USA
براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
<applet> برای گذاشتن applet های جاوا در صفحه استفاده میشود.
<applet code="appletfile.class" width="500" height="650">
Java applet
</applet>
براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
<area> یک محدوده را داخل <map> تعریف میکند.
<!DOCTYPE html>
<html>
<body>
<img src="http://www.s1.irdevs.com/uploads/20140223-863-usemap.gif" alt="usemap" border="0" 
     usemap="#tutorials"/>
<map name="tutorials">
   <area shape="poly" 
            coords="74,0,113,29,98,72,52,72,38,27"
            href="#link" 
            alt="Perl Tutorial"
            target="_self" />
   <area shape="rect" 
            coords="22,83,126,125"
            alt="HTML Tutorial"
            href="#link" 
            target="_self" />
   <area shape="circle" 
            coords="73,168,32"
            alt="PHP Tutorial"
	    href="#link" 
            target="_self" />
</map>
</body>
</html>

خروجی:
usemap Perl Tutorial HTML Tutorial PHP Tutorial
براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
HTML5
<article>
برای تعریف یک قسمت/محتوای مستقل در سند بکار میرود.
اطلاعات بیشتر>>
<article>
 <img src="/tumblr_masqy2s5yn1rzfqbpo1_500.jpg" alt="Yellow smiley face with the caption 'masif'">
 <p>My fave Masif tee so far!</p>
 <footer>Posted 2 days ago</footer>
</article>
<article>
 <img src="/tumblr_m9tf6wSr6W1rzfqbpo1_500.jpg" alt="">
 <p>Happy 2nd birthday Masif Saturdays!!!</p>
 <footer>Posted 3 weeks ago</footer>
</article>
براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
HTML5
<aside>
قسمتی از صفحه را تعریف میکند که از محتوای اصلی جداست اما با آن مرتبط است.
<p>He later joined a large company, continuing on the same work.
<q>I love my job. People ask me what I do for fun when I'm not at
work. But I'm paid to do my hobby, so I never know what to
answer. Some people wonder what they would do if they didn't have to
work... but I know what I would do, because I was unemployed for a
year, and I filled that time doing exactly what I do now.</q></p>

<aside>
 <q> People ask me what I do for fun when I'm not at work. But I'm
 paid to do my hobby, so I never know what to answer. </q>
</aside>

<p>Of course his work — or should that be hobby? —
isn't his only passion. He also enjoys other pleasures.</p>
براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
HTML5
<audio>
برای گذاشتن صدا در سند استفاده میشود.
<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio> 
براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
<b> برای bold کردن متن استفاده میشود.
<p>This is normal text - <b>and this is bold text</b>.</p>

خروجی:

This is normal text - and this is bold text.

براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
<base> URL پایه را برای تمام URL های نسبی در سند را مشخص میکند.
<head>
<base href="http://www.irdevs.com.com/images/" target="_blank">
</head>

<body>
<img src="stickman.gif" width="24" height="39" alt="Stickman">
<!-- خواهد بود  http://www.irdevs.com.com/images/stickman.gif آدرس تصویر  -->
<a href="http://www.irdevs.com.com">سافت افزار</a>
</body> 
براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
<basefont> در HTML5 پشتیبانی نمیشود. در عوض از CSS استفاده کنید.
رنگ متن، سایز و اندازه پیشفرض آن را در سند مشخص می کند.
<head>
<basefont color="red" size="5">
</head>

<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body> 
براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
HTML5
<bdi>
بخشی از متن که ممکن است جهت (Direction) آن با متن بیرونی تفاوت داشته باشد را جدا میکند تا بدرستی نمایش داده شود. این قابلیت برای زبانهای راست به چپ مثل فارسی و عربی کاربردی است.
<ul>
<li>User <bdi>Reza</bdi> : 60 points</li>
<li>User <bdi>hossein</bdi> : 80 points</li>
<li>User <bdi>محمد</bdi> : 90 points</li>
</ul> 

خروجی:
  • User Reza : 60 points
  • User hossein : 80 points
  • User محمد : 90 points
براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
<bdo> جهتن فعلی متن را نادیده گرفته و جهت جدید را مشخص میکند.
<bdo dir="rtl">
This text will go right-to-left.
</bdo> 

خروجی:
This text will go right-to-left.
براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
<big> در HTML5 پشتیبانی نمیشود. در عوض از CSS استفاده کنید.
برای بزرگتر کردن متن استفاده میشود.
<p>This text is normal.</p>
<p><big>This text is bigger.</big></p>

خروجی:

This text is normal.

This text is bigger.

براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
<blockquote> برای گذاشتن نقل قول از منابع دیگر استفاده میشود. نقل قول را در لاین جدید نمایش میدهد.
مرتبط : <q>
<p>Here is a quote from WWF's website:</p>

<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote>

خروجی:

Here is a quote from WWF's website:

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
<body> بدنه سند را مشخص میکند. تمام محتوای اصلی که باید توسط کاربر دیده شود در این تگ قرار میگیرد.
<html>
<head>
<title>irdevs.com</title>
</head>

<body>
The content of the document.
<button onclick="window.location='http://irdevs.com'">Go to forums</button>
</body>

</html>
براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
<br> یک خط شکسته تعریف میکند.
This text contains<br>a line break.

خروجی:
This text contains
a line break.
براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
<button> یک دکمه تعریف میکند.
<button type="button">Click Me!</button>

خروجی:
براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
HTML5
<canvas>
برای رسم گرافیک با زبان اسکریپتی(معمولا جاوا اسکریپت) استفاده میشود.
<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas">Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
ctx.fillStyle='#ADF';
ctx.fillRect(0,0,80,100);
</script>

</body>
</html>

خروجی:
Your browser does not support the HTML5 canvas tag.
براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
<caption> یک عنوان برای جدول مشخص میکند .
عنوان باید دقیقا بعد از تگ <table> تعریف شود
برای هر جدول تنها یک عنوان میتوان تعریف کرد.
<table>
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table> 

خروجی:
Monthly savings
Month Savings
January $100
براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
<center> در HTML5 پشتیبانی نمیشود. در عوض از CSS استفاده کنید.
یک متن وسط چین تعریف میکند.
<center>This text will be center-aligned.</center>

خروجی:
This text will be center-aligned.
براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
<cite> عنوانی برای یک کار تعریف میکند.
مثال استفاده: برای نام بردن آثار خلاق مثل کتاب، موزیک ، نقاشی ، وبسایت ، اسکریپت ، برنامه کامپیوتری، پست وبلاگ، کامنت و ... .
According to <cite title="HTML & XHTML: The Definitive Guide. Published by O'Reilly Media, Inc.; fifth edition (August 1, 2002)">Chuck Musciano and Bill Kennedy</cite>, the HTML cite tag actually exists!

خروجی:
According to Chuck Musciano and Bill Kennedy, the HTML cite tag actually exists!
براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
<code> برای گذاشتن و نمایش تکه کد کامپیوتری استفاده میشود
هنگام قرار دادن کاراکترهای از پیش تعریف شده HTML، باید تکه کد را Encode کنید تا از اجرا شدن آن جلوگیری شود.
<code>
&lt;script type=&quot;text/javascript&quot;&gt;
	var str=&quot;Hello World&quot;;
&lt;/script&gt;
</code>

خروجی:
<script type="text/javascript"> var str="Hello World"; </script>
براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
<col> ویژگی های کالمنها را با استفاده از المنت <colgroup> مشخص میکند.
<table>
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
  <tr>
    <td>5869207</td>
    <td>My first CSS</td>
    <td>$49</td>
  </tr>
</table>

خروجی:
ISBN Title Price
3476896 My first HTML $53
5869207 My first CSS $49
براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
<colgroup> گروهی از یک یا چند کالمن(Column) را در جدول برای قالب بندی(Formatting) مشخص میکند.
<table>
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
  <tr>
    <td>5869207</td>
    <td>My first CSS</td>
    <td>$49</td>
  </tr>
</table>

خروجی:
ISBN Title Price
3476896 My first HTML $53
5869207 My first CSS $49
براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
HTML5
<command>
دکمه ای را تعریف میکند که توسط دیگر المنتها هم قابل فراخوانی است.
این دکمه را میتوان در هر جایی از صفحه قرار داد برای مثال در منو.
<script type="text/javascript">function doThat(){ alert('Hello!')}</script>
<command id="doThat" onclick="doThat()"></command>
<input type="button" command="doThat" value="click me to do that">
<menu command="doThat">This does that too</menu>

خروجی:
This does that too
براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
HTML5
<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> 

خروجی:
براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
<dd> توضیحی/مقداری برای آیتم <dt> در <dl> میدهد.
<dl>
  <dt>Coffee</dt>
    <dd>Black hot drink</dd>
  <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl> 

خروجی:
Coffee
Black hot drink
Milk
White cold drink
براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
<del> برای نمایش متن حذف شده/متن اشتباه بکار میرود.
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

خروجی:

My favorite color is blue red!

براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
HTML5
<details>
برای نمایش جزئیات بیشتر استفاده میشود که کاربر میتواند آنرا نمایش دهد یا مخفی کند.
مرتبط : <summary>
<details>
<summary>Copyright 1999-2011.</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>

خروجی:
Copyright 1999-2011.

- by Refsnes Data. All Rights Reserved.

All content and graphics on this web site are the property of the company Refsnes Data.

براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
<dfn> برای تعریف یک واژه استفاده میشود.
برای مثال تعریف اینترنت.
<!-- Define "The 
Internet" -->
<p><dfn id="def-internet">The Internet</dfn> is a 
global system of interconnected networks that use the Internet Protocol 
Suite (TCP/IP) to serve billions of users worldwide.</p>

خروجی:

The Internet is a global system of interconnected networks that use the Internet Protocol Suite (TCP/IP) to serve billions of users worldwide.

براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
HTML5
<dialog>
برای نمایش دیالوگ استفاده میشود.
<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>
براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
<dir> در HTML5 پشتیبانی نمیشود . در عوض از <ul> استفاده کنید.برای نمایش لیست استفاده میشود.
<dir>
  <li>html</li>
  <li>xhtml</li>
  <li>css</li>
</dir> 

خروجی:
  • html
  • xhtml
  • css
  • براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <div> یک قسمت را در سند تعریف میکند و به منظور گروه بندی المنتها برای انجام قالب بندی با CSS استفاده میشود.
    همچنین بخوانید : آموزش HTML – المنتهای Block-level و Inline-level
    <p>This is some text.</p>
    
    <div style="color:blue">
      <h3>This is a heading in a div element</h3>
      <p>This is some text in a div element.</p>
    </div>
    
    <div style="color:red;float:right">
      <h3>This is a heading in a div element</h3>
      <p>This is some text in a div element.</p>
    </div>
    <p>This is some text.</p>

    خروجی:

    This is some text.

    This is a heading in a div element

    This is some text in a div element.

    This is a heading in a div element

    This is some text in a div element.

    This is some text.

    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <dl> برای گذاشتن لیست توضیح بکار میرود.
    مرتبط : <dt> و <dd>
    <dl>
      <dt>Coffee</dt>
        <dd>Black hot drink</dd>
      <dt>Milk</dt>
        <dd>White cold drink</dd>
    </dl> 

    خروجی:
    Coffee
    Black hot drink
    Milk
    White cold drink
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <dt> یک ایتم در <dl> تعریف میکند.
    مرتبط : <dl> و <dd>
    <dl>
      <dt>Coffee</dt>
        <dd>Black hot drink</dd>
      <dt>Milk</dt>
        <dd>White cold drink</dd>
    </dl> 

    خروجی:
    Coffee
    Black hot drink
    Milk
    White cold drink
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <em> یک متن تاکیدی تعریف میکند.
    <em>Emphasized text</em>

    خروجی:
    Emphasized text
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    HTML5
    <embed>
    برای نمایش مدیا یا یک محتوای خارجی استفاده میشود.
    <embed type="video/quicktime" src="movie.mov" width="640" height="480">
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <fieldset> برای گروه بندی المنت های مرتبط در فرم استفاده میشود.
    مرتبط : <legend>
    <form>
      <fieldset>
        <legend>Personalia:</legend>
        Name: <input type="text"><br>
        Email: <input type="text"><br>
        Date of birth: <input type="text">
      </fieldset>
    </form> 

    خروجی:
    Personalia: Name:
    Email:
    Date of birth:
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    HTML5
    <figcaption>
    عنوانی برای المنت <figure> تعریف میکند.
    [code]

    خروجی:
    [result]
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    HTML5
    <figure>
    برای گذاشتن یک محتوای مستقل بکار میرود مثل تصویر، دیاگرام و ... .
    <figure>
    	<img src="http://www.s1.irdevs.com/uploads/20140223-025-mdn-logo-sm.png" alt="An awesome picture">	
    	<figcaption>Caption for the awesome picture</figcaption>
    </figure>

    خروجی:
    An awesome picture
    Caption for the awesome picture
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <font> در HTML5 پشتیبانی نمیشود. درعوض از CSS استفاده کنید.
    استایل متن را تعریف میکند.
    <font size="3" color="red">This is some text!</font>
    <font size="2" color="blue">This is some text!</font>
    <font face="verdana" color="green">This is some text!</font> 

    خروجی:
    This is some text! This is some text! This is some text!
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    برای سند یا برای هر قسمت سند فوتر تعریف میکند. این را با فوتری که در پایین سایتها قرار میگیرد اشتباه نگیرید، در هر سند میتوانید چندین <footer> داشته باشید.
    مثال استفاده: میتواند برای نمایش اطلاعات پست یا نویسنده پست استفاده شود.
    <footer>
      <p>Posted by: Hege Refsnes</p>
      <p>Contact information: <a href="mailto:someone@example.com">
      someone@example.com</a>.</p>
    </footer> 

    خروجی:
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <form> برای تعریف فرم استفاده میشود.
    <form action="demo_form.asp" method="get">
      First name: <input type="text" name="fname"><br>
      Last name: <input type="text" name="lname"><br>
      <input type="submit" value="Submit">
    </form> 

    خروجی:
    First name:
    Last name:
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <frame> در HTML5 پشتیبانی نمیشود.
    یک پنجره(فریم) در تعریف میکند.
    <frameset cols="25%,50%,25%">
      <frame src="http://irdevs.com#a">
      <frame src="http://irdevs.com#b">
      <frame src="http://irdevs.com#c">
    </frameset>
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <frameset> در HTML5 پشتیبانی نمیشود.
    مجموعه ای فریم ها را تعریف میکند.
    مرتبط : <frame>
    <frameset cols="25%,50%,25%">
      <frame src="http://irdevs.com#a">
      <frame src="http://irdevs.com#b">
      <frame src="http://irdevs.com#c">
    </frameset>
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <h1> to <h6> برای عنوان گذاری استفاده میشود.
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <h3>This is heading 3</h3>
    <h4>This is heading 4</h4>
    <h5>This is heading 5</h5>
    <h6>This is heading 6</h6> 

    خروجی:

    This is heading 1

    This is heading 2

    This is heading 3

    This is heading 4

    This is heading 5
    This is heading 6
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    اطلاعاتی درباره سند میدهد.
    اطلاعات بیشتر>>
    <html>
    <head>
    <title>Title of the document</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="#link" />
    </head>
    
    <body>
    The content of the document......
    </body>
    
    </html
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    برای سند یا برای هر قسمت سند هیدر تعریف میکند. این را با هیدری که در بالای سایتها قرار میگیرد اشتباه نگیرید، در هر سند میتوانید چندین <header> داشته باشید.
    مثال استفاده: میتواند شامل المنت های heading ، لوگو ، فرم جست و جو و ... باشد.
    <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>

    خروجی:

    Internet Explorer 9

    Windows Internet Explorer 9 (abbreviated as IE9) was released to the public on March 14, 2011 at 21:00 PDT.....

    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    HTML5
    <hgroup>
    این المنت از لیست المنت های HTML5 حذف شده است.
    برای گروه بندی المنت های heading مورد استفاده قرار میگیرد.
    <hgroup>
    <h1>Welcome to my WWF</h1>
    <h2>For a living planet</h2>
    </hgroup>

    خروجی:

    Welcome to my WWF

    For a living planet

    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <hr> برای ایجاد خط افقی مورد استفاده قرار میگیرد.
    <h1>HTML</h1>
    <p>HTML is a language for describing web pages.....</p>
    
    <hr>
    
    <h1>CSS</h1>
    <p>CSS defines how to display HTML elements.....</p> 

    خروجی:

    HTML

    HTML is a language for describing web pages.....


    CSS

    CSS defines how to display HTML elements.....

    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <html> صفحه وب را توصیف میکند. تمام المنت ها و تگ ها بجز <!DOCTYPE> در این المنت قرار میگیرند.
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Title of the document</title>
    </head>
    
    <body>
    The content of the document......
    </body>
    
    </html> 
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <i> هنگامی مورد استفاده قرار میگیرد که بخواهیم قسمتی از متن را متمایز از بقیه قسمت ها نشان بدهیم. معمولا متن بصورت italic نمایش داده میشود.
    مثال استفاده: نمایش زبانی دیگر در متن، نمایش اصطلاحات فنی و... .
    <p>He named his car <i>The lightning</i>, because it was very fast.</p>

    خروجی:

    He named his car The lightning, because it was very fast.

    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <iframe> برای نمایش صفحه ای دیگر در صفحه جاری بکار میرود.
    <iframe src="http://www.irdevs.com">
      <p>Your browser does not support iframes.</p>
    </iframe>
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <img> برای نمایش تصویر در صفحه بکار میرود.
    <img src="http://www.irdevs.com/images/misc/users_online.png" alt="online" height="42" width="42">

    خروجی:
    online
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <input> برای نمایش input مورد استفاده قرار میگیرد. از این المنت برای دریافت اطلاعات از کاربر استفاده میشود.
    اطلاعات بیشتر>>
    <form action="demo.php">
      First name: <input type="text" name="fname"><br>
      Last name: <input type="text" name="lname"><br>
      <input type="submit" value="Submit">
    </form> 

    خروجی:
    First name:
    Last name:
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <ins> متنی را تعریف میکند که به سند اضافه شده است.
    <p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

    خروجی:

    My favorite color is blue red!

    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <kbd> عبارتی را تعریف میکند که باید توسط کاربر وارد شود.
    <p>Please, press <kbd><kbd>Shift</kbd>+<kbd>A</kbd></kbd></p>

    خروجی:

    Please, press Shift+A

    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    HTML5
    <keygen>
    برای تولید key در فرم استفاده میشود.
    <form>
    <keygen name="random_key" challenge="0987654321">
    <input name="firstname" value="first name">
    <input type="submit">
    </form>

    خروجی:
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <label> عنوانی برای <input> تعریف میکند.
    <form action="demo_form.asp">
      <label for="male">Male</label>
      <input type="radio" name="sex" id="male" value="male"><br>
      <label for="female">Female</label>
      <input type="radio" name="sex" id="female" value="female"><br><br>
      <input type="submit" value="Submit">
    </form>

    خروجی:



    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <legend> عنوانی برای <fieldset> تعریف میکند.
    <form>
      <fieldset>
        <legend>Personalia:</legend>
        Name: <input type="text" size="30"><br>
        Email: <input type="text" size="30"><br>
        Date of birth: <input type="text" size="10">
      </fieldset>
    </form>

    خروجی:
    Personalia: Name:
    Email:
    Date of birth:
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <li> یک آیتم در لیست تعریف میکند.
    مرتبط : <ul> و <ol>
    <ul>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul> 

    خروجی:
    • Coffee
    • Tea
    • Milk
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    برای ایجاد ارتباط بین سند و منبع خارجی استفاده میشود و معمولا برای لینک کردن CSS به سند استفاده میشود.
    <head>
    <link rel="stylesheet" type="text/css" href="theme.css">
    </head> 
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    HTML5
    <main>
    برای مشخص کردن محتوای اصلی سند بکار میرود.
    <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> 
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <map> برای تعریف image map استفاده میشود.
    مرتبط : <area>
    <!DOCTYPE html>
    <html>
    <body>
    <img src="http://www.s1.irdevs.com/uploads/20140223-863-usemap.gif" alt="usemap" border="0" 
         usemap="#tutorials"/>
    <map name="tutorials">
       <area shape="poly" 
                coords="74,0,113,29,98,72,52,72,38,27"
                href="#link" 
                alt="Perl Tutorial"
                target="_self" />
       <area shape="rect" 
                coords="22,83,126,125"
                alt="HTML Tutorial"
                href="#link" 
                target="_self" />
       <area shape="circle" 
                coords="73,168,32"
                alt="PHP Tutorial"
    	    href="#link" 
                target="_self" />
    </map>
    </body>
    </html>

    خروجی:
    usemap Perl Tutorial HTML Tutorial PHP Tutorial
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    HTML5
    <mark>
    برای انتخاب کردن بخشی از متن استفاده میشود.
    <p>Do not forget to buy <mark>milk</mark> today.</p>

    خروجی:

    Do not forget to buy milk today.

    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    برای نمایش لیستی از دستورات استفاده میشود.
    <menu> 
     <li>
      <button type=menu value="File" menu="filemenu">
      <menu id="filemenu" type="popup">
       <menuitem onclick="fnew()" label="New...">
       <menuitem onclick="fopen()" label="Open...">
       <menuitem onclick="fsave()" label="Save">
       <menuitem onclick="fsaveas()" label="Save as...">
      </menu>
     </li>
     <li>
      <button type=menu value="Edit" menu="editmenu">
      <menu id="editmenu" type="popup">
       <menuitem onclick="ecopy()" label="Copy">
       <menuitem onclick="ecut()" label="Cut">
       <menuitem onclick="epaste()" label="Paste">
      </menu>
     </li>
     <li>
      <button type=menu value="Help" menu="helpmenu">
      <menu id="helpmenu" type="popup">
       <menuitem onclick="location='help.html'" label="Help">
       <menuitem onclick="location='about.html'" label="About">
      </menu>
     </li>
    </menu>

    خروجی:
  • براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <meta> اطلاعاتی درباره سند میدهد
    متادیتا: مجموعه ای از داده ها که درباره دیگر داده ها اطلاعاتی میدهند.
    <head>
    <meta name="description" content="Free Web tutorials">
    <meta name="keywords" content="HTML,CSS,XML,JavaScript">
    <meta name="author" content="Hege Refsnes">
    <meta charset="UTF-8">
    </head>

    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    HTML5
    <meter>
    برای نمایش اندازه گیر گرافیکی مورد استفاده قرار میگیرد. وقتی از این المنت استفاده میکنیم که محدوده عدد را بدانیم.
    مثال استفاده: نمایش فضای استفاده شده دیسک، نمایش سوالات باقی مانده، نمایش بلیت های خریداری شده.
    Storage space usage: <meter low="69" high="80" max="100" value="19">B</meter><br/>
    Storage space usage: <meter low="69" high="80" max="100" value="70">B</meter><br/>
    Storage space usage: <meter low="69" high="80" max="100" value="84">B</meter>

    خروجی:
    Storage space usage: B
    Storage space usage: B
    Storage space usage: B
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    مجموعه از لینک های ناوبری (Navigation links) را تعریف میکند.
    <nav>
      <a href="/html/">HTML</a> |
      <a href="/css/">CSS</a> |
      <a href="/js/">JavaScript</a> |
      <a href="/jquery/">jQuery</a>
    </nav>

    خروجی:
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <noframes> در HTML5 پشتیبانی نمیشود.
    در صورتی که مرورگر کاربر تگ <frame> را پشتیبانی نکند محتویات این تگ نمایش داده میشود.
    <frameset cols="25%,50%,25%">
      <frame src="frame_a.htm">
      <frame src="frame_b.htm">
      <frame src="frame_c.htm">
      <noframes>Sorry, your browser does not handle frames!</noframes>
    </frameset>

    خروجی:
    Sorry, your browser does not handle frames!
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <noscript> در صورتی که مرورگر کاربر تگ <script> را پشتیبانی نکند محتویات این تگ نمایش داده میشود.
    <script>
    document.write("Hello World!")
    </script>
    <noscript>Your browser does not support JavaScript!</noscript> 
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <object> برای جاسازی یک آبجکت در سند استفاده میشود.
    <object data="move.swf" type="application/x-shockwave-flash">
      <param name="foo" value="bar">
    </object>
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <ol> یک لیست مرتب شده تعریف میکند.
    مرتبط : <ul> و <li>
    <ol>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ol>
    
    <ol start="50">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ol>

    خروجی:
    1. Coffee
    2. Tea
    3. Milk
    1. Coffee
    2. Tea
    3. Milk
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <optgroup> برای گروهبندی گزینه های مرتبط در لیست کشویی <select> استفاده میشود.
    مرتبط : <select> و <option>
    <select>
      <optgroup label="Swedish Cars">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
      </optgroup>
      <optgroup label="German Cars">
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
      </optgroup>
    </select>

    خروجی:
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <option> یک گزینه در لیست کشویی <select> تعریف میکند.
    مرتبط : <select> و <optgroup>
    <select>
      <optgroup label="Swedish Cars">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
      </optgroup>
      <optgroup label="German Cars">
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
      </optgroup>
    </select>

    خروجی:
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    HTML5
    <output>
    برای نمایش نتیجه یک محاسبه استفاده میشود.
    <form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
        <input type="range" name="b" value="50" /> +
        <input type="number" name="a" value="10" /> =
        <output name="result"></output>
    </form>

    خروجی:
    + =
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <p> یک پاراگراف تعریف میکند.
    اطلاعات بیشتر>>
    this is a normal text. <p>a paragraph</p> <p>this is a paragraph</p>

    خروجی:
    this is a normal text.

    a paragraph

    this is a paragraph

    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <param> پارامتری برای تگ <object> تعریف میکند.
    <object data="horse.wav">
      <param name="autoplay" value="true">
    </object> 
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <pre> متن را همانطور که نوشته شده نمایش میدهد.
    <pre>
    body {
      color:red;
    }
    </pre>

    خروجی:
    body {
      color:red;
    }
    
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    HTML5
    <progress>
    فرایند پیشرفت یک پراسس(process) یا کار را بصورت گرافیکی نشان میدهد.
    <progress value="60" max="100">Your browser does not support progress.</progress>

    خروجی:
    Your browser does not support progress.
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <q> برای نمایش نقل قول کوتاه بصورت درون خطی(inline) همراه با علامت نقل قول استفاده میشود. زمانی استفاده میشود که نیاز به نمایش نقل قول در لاین جدید نباشد.
    مرتبط : <blockquote>
    <q cite="http://en.wikipedia.org/wiki/Kenny_McCormick#Cultural_impact">
         Oh my God, you/they killed Kenny!
       </q>.

    خروجی:
    Oh my God, you/they killed Kenny! .
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    HTML5
    <rp>
    مشخص میکند که اگر مرورگر کاربر ruby annotations را پشتیبانی نکرد چه چیزی نمایش دهد.
    ruby annotations برای نمایش تلفظ کاراکتر زبانهای آسیای شرقی بکار میرود.
    <ruby>
      漢 <rp>(</rp><rt>Kan</rt><rp>)</rp>
      字 <rp>(</rp><rt>ji</rt><rp>)</rp>
    </ruby>
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    HTML5
    <rt>
    برای نمایش تلفظ/توضیح کاراکتر در زبانهای آسیای شرقی استفاده میشود.
    <ruby>
      漢 <rp>(</rp><rt>Kan</rt><rp>)</rp>
      字 <rp>(</rp><rt>ji</rt><rp>)</rp>
    </ruby>
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    HTML5
    <ruby>
    برای نمایش تلفظ زبانهای آسیای شرقی مثل ژاپنی استفاده میشود.
    <ruby>
      漢 <rp>(</rp><rt>Kan</rt><rp>)</rp>
      字 <rp>(</rp><rt>ji</rt><rp>)</rp>
    </ruby>
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <s> برای نمایش متنی که دیگر صحیح نیست بکار میرود.
    برای نمایش متن حذف یا جایگزین شده از <del> استفاده کنید.
    <p><s>My car is blue.</s></p>
    <p>My new car is silver.</p> 

    خروجی:

    My car is blue.

    My new car is silver.

    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <samp> برای نمایش خروجی یک کد کامپیوتری یا یک پردازش(process) بکار میرود.
    <p>If the browser spits out an error message such as
        <samp>HTTP 404 - File not found</samp>,
        you may simply have typed the address incorrectly.</p>

    خروجی:

    If the browser spits out an error message such as HTTP 404 - File not found, you may simply have typed the address incorrectly.

    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <script> برای جاسازی کردن اسکریپت سمت کلاینت در سند استفاده میشود.
    اطلاعات بیشتر>>
    <script type="text/javascript">
    document.write("Hello World!")
    </script> 
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    HTML5
    <section>
    یک قسمت را در سند تعریف میکند.
    <section>
      <h1>Heading</h1>
      <p>Bunch of awesome content</p>
    </section>
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <select> یک لیست کشویی تعریف میکند.
    <select>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select> 

    خروجی:
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <small> برای کوچکتر کردن متن استفاده میشود.
    <p style="font-size:40px">This is the first sentence. <small>This whole <small>sentence <small>is in <small><small>small</small></small></small></small> letters.</small></p>

    خروجی:

    This is the first sentence. This whole sentence is in small letters.

    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    HTML5
    <source>
    برای مشخص کردن چند مدیا در المنت های <video> و <audio> استفاده میشود. چون مروگرها در ساپورت کردن نوع مدیا متفاوت هستند با این این کار اگر مرورگر مدیای اول را پشتیبانی نکند سراغ مدیای بعدی میرود.
    <video controls>
      <source src="foo.ogg" type="video/ogg"> <!-- Picked by Firefox -->
      <source src="foo.mov" type="video/quicktime"> <!-- Picked by Safari -->
      I'm sorry; your browser doesn't support HTML5 video.
    </video>
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <span> یک قسمت را در سند بصورت inline (درون خطی) تعریف میکند و به منظور گروه بندی المنتها برای انجام قالب بندی با CSS استفاده میشود.
    همچنین بخوانید : آموزش HTML – المنتهای Block-level و Inline-level
    <p>I am learning <span style="color:white;background:red">HTML!</span>.</p>

    خروجی:

    I am learning HTML!.

    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <strike> در HTML5 پشتیبانی نمیشود. در عوض از <del> استفاده کنید.
    برای نمایش متن حذف شده/متن اشتباه بکار میرود.
    <p>Version 2.0 is <strike>not yet available!</strike> now available!</p>

    خروجی:

    Version 2.0 is not yet available! now available!

    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <strong> یک متن مهم تعریف میکند.
    it is <strong>important</strong> notice!

    خروجی:
    it is important notice!
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <style> اطلاعات استایل سند را تعریف میکند.
    اطلاعات بیشتر>>
    <style type="text/css">
    .test_h1 {color:red;}
    #test_p {color:blue;}
    </style>
    <h1 class="test_h1">A heading</h1>
    <p id="test_p">A paragraph.</p>

    خروجی:

    A heading

    A paragraph.

    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <sub> برای نمایش متنی در پایین متن استفاده میشود.
    <p>Water is a chemical compound with the chemical formula H<sub>2</sub>O.</p>

    خروجی:

    Water is a chemical compound with the chemical formula H2O.

    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    HTML5
    <summary>
    عنوانی برای <details> تعریف میکند.
    <details>
    <summary>Copyright 1999-2011.</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>

    خروجی:
    Copyright 1999-2011.

    - by Refsnes Data. All Rights Reserved.

    All content and graphics on this web site are the property of the company Refsnes Data.

    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <sup> متنی در بالای متن نمایش میدهد.
    <p>This text contains <sup>superscript</sup> text.</p>

    خروجی:

    This text contains superscript text.

    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <table> یک جدول تعریف میکند.
    <table>
      <tr>
        <td>John</td>
        <td>Doe</td>
      </tr>
      <tr>
        <td>Jane</td>
        <td>Doe</td>
      </tr>
    </table>

    خروجی:
    John Doe
    Jane Doe
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <tbody> محتوای اصلی جدول را گروه بندی میکند.
    <p>Simple table with header</p>
    <table>
      <tr>
        <th>First name</th>
        <th>Last name</th>
      </tr>
      <tr>
        <td>John</td>
        <td>Doe</td>
      </tr>
      <tr>
        <td>Jane</td>
        <td>Doe</td>
      </tr>
    </table>

    خروجی:

    Simple table with header

    First name Last name
    John Doe
    Jane Doe
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <td> یک سلول در جدول تعریف میکند.
    <table>
      <tr>
        <th>First name</th>
        <th>Last name</th>
      </tr>
      <tr>
        <td>John</td>
        <td>Doe</td>
      </tr>
      <tr>
        <td>Jane</td>
        <td>Doe</td>
      </tr>
    </table>

    خروجی:
    First name Last name
    John Doe
    Jane Doe
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <textarea> کادر متنی چند خطی تعریف میکند.
    <textarea rows="4" cols="50">
    Softfzar.net developers home.
    </textarea>

    خروجی:
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <tfoot> مجموعه ای از رکوردها را برای نمایش خلاصه داده های جدول تعریف میکند.
    <table>
      <thead>
        <tr>
          <th>Month</th>
          <th>Savings</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <td>Sum</td>
          <td>$180</td>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <td>January</td>
          <td>$100</td>
        </tr>
        <tr>
          <td>February</td>
          <td>$80</td>
        </tr>
      </tbody>
    </table>

    خروجی:
    Month Savings
    Sum $180
    January $100
    February $80
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <th> برای نمایش سلول عنوان در جدول استفاده میشود.
    <table>
      <tr>
        <th>First name</th>
        <th>Last name</th>
      </tr>
      <tr>
        <td>John</td>
        <td>Doe</td>
      </tr>
      <tr>
        <td>Jane</td>
        <td>Doe</td>
      </tr>
    </table>

    خروجی:
    First name Last name
    John Doe
    Jane Doe
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <thead> برای گروه کردن سولهای عنوان استفاده میشود.
    <table>
      <thead>
        <tr>
          <th>Month</th>
          <th>Savings</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <td>Sum</td>
          <td>$180</td>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <td>January</td>
          <td>$100</td>
        </tr>
        <tr>
          <td>February</td>
          <td>$80</td>
        </tr>
      </tbody>
    </table>

    خروجی:
    Month Savings
    Sum $180
    January $100
    February $80
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    HTML5
    <time>
    برای نمایش زمان و تاریخ درسند استفاده میشود.
    <p>We open at <time>10:00</time> every morning.</p>
    
    <p>I have a date on <time datetime="2008-02-14">Valentines day</time>.</p>

    خروجی:

    We open at every morning.

    I have a date on .

    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <title> عنوان سند را مشخص میکند.
    <!DOCTYPE html>
    <html>
    <head>
    <title>Title of the document</title>
    </head>
    
    <body>
    The content of the document......
    </body>
    
    </html>
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <tr> یک رکورد در جدول تعریف میکند.
    <table>
      <tr>
        <th>First name</th>
        <th>Last name</th>
      </tr>
      <tr>
        <td>John</td>
        <td>Doe</td>
      </tr>
      <tr>
        <td>Jane</td>
        <td>Doe</td>
      </tr>
    </table>

    خروجی:
    First name Last name
    John Doe
    Jane Doe
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    HTML5
    <track>
    برای قرار دادن زیر نویش در المنت های <video> و <audio> استفاده میشود.
    <video width="320" height="240" controls>
      <source src="forrest_gump.mp4" type="video/mp4">
      <source src="forrest_gump.ogg" type="video/ogg">
      <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
      <track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
    </video>
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <tt> در HTML5 پشتیبانی نمیشود .
    برای نمایش متن تله تایپ استفاده میشود.
    <p><tt>This text is teletype text.</tt></p>

    خروجی:

    This text is teletype text.

    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <u> برای زیر خط دار کردن متن استفاده میشود.
    <p>This is a <u>parragraph</u>.</p>
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <ul> یک لیست نا مرتب تعریف میکند.
    مرتبط : <ol> و <li>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>

    خروجی:
    • Item 1
    • Item 2
    • Item 3
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    <var> یک متغیر تعریف میکند (برای نمایش متن بصورت متغیر استفاده میشود)
    <var>Variable</var>

    خروجی:
    Variable
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    HTML5
    <video>
    برای نمایش ویدئو در سند استفاده میشود.
    <video width="320" height="240" controls>
      <source src="movie.mp4" type="video/mp4">
      <source src="movie.ogg" type="video/ogg">
      Your browser does not support the video tag.
    </video>
    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد
    HTML5
    <wbr>
    اجازه دادن به مرورگر به شکستن خط در نقطه مورد نظر.
    <p>This is a 
    veryyyyyyyyyyyyyyyyyyyyyyyyyyyyyy looooooooooooooooooooong 
    text.</p>
    <p>This is a 
    veryyyyy<wbr>yyyyyyyyy<wbr>yyyyyyyyyyyyyyyy 
    loooooooo<wbr>ooooooooo<wbr>oooong text with wbr.</p>

    خروجی:

    This is a veryyyyyyyyyyyyyyyyyyyyyyyyyyyyyy looooooooooooooooooooong text.

    This is a veryyyyyyyyyyyyyyyyyyyyyyyyyyyyyy looooooooooooooooooooong text with wbr.

    براي ثابت ماندن مثال / پنهان شدن اتوماتيک کليک کنيد

    بازگشت به مرکز آموزش