مرکز آموزش سافت افزار > لیست تگ های 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.softafzar.net">Visit Softafzar.net!</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.softafzar.net/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.softafzar.net.com/images/" target="_blank">
</head>

<body>
<img src="stickman.gif" width="24" height="39" alt="Stickman">
<!-- خواهد بود  http://www.softafzar.net.com/images/stickman.gif آدرس تصویر  -->
<a href="http://www.softafzar.net.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>Softafzar.net</title>
</head>

<body>
The content of the document.
<button onclick="window.location='http://softafzar.net'">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.softafzar.net/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://softafzar.net#a">
      <frame src="http://softafzar.net#b">
      <frame src="http://softafzar.net#c">
    </frameset>
    <frameset> در HTML5 پشتیبانی نمیشود.
    مجموعه ای فریم ها را تعریف میکند.
    مرتبط : <frame>
    <frameset cols="25%,50%,25%">
      <frame src="http://softafzar.net#a">
      <frame src="http://softafzar.net#b">
      <frame src="http://softafzar.net#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.softafzar.net">
      <p>Your browser does not support iframes.</p>
    </iframe>
    <img> برای نمایش تصویر در صفحه بکار میرود.
    <img src="http://www.softafzar.net/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.softafzar.net/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.

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