<!--...-->

برای گذاشتن کامنت مورد استفاده قرار میگیرد

<!--این یک کامنت است. کامنت ها در مرورگر نمایش داده نمیشوند--><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......
<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>
<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>
<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> 
<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
<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.
<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
<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>
<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.

<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>
<embed>

برای نمایش مدیا یا یک محتوای خارجی استفاده میشود

<embed type="video/quicktime" src="movie.mov" width="640" height="480">
<figcaption>

عنوانی برای المنت <figcaption> تعریف میکند

[code]

:خروجی
[result]
<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
<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> داشته باشید

<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.....

<keygen>

برای تولید key در فرم استفاده میشود

<form>
<keygen name="random_key" challenge="0987654321">
<input name="firstname" value="first name">
<input type="submit">
</form>

:خروجی
<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> 
<mark>

برای انتخاب کردن بخشی از متن استفاده میشود

<p>Do not forget to buy <mark>milk</mark> today.</p>

:خروجی

Do not forget to buy milk today.

<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
<nav>

مجموعه از لینک های ناوبری (Navigation links) را تعریف میکند.

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

:خروجی
<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>

:خروجی
+ =
<progress>

فرایند پیشرفت یک پراسس(process) یا کار را بصورت گرافیکی نشان میدهد.

<progress value="60" max="100">Your browser does not support progress.</progress>

:خروجی
Your browser does not support progress.
<section>

یک قسمت را در سند تعریف میکند.

<section>
  <h1>Heading</h1>
  <p>Bunch of awesome content</p>
</section>
<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>
<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 .

<track>

<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>