لیست کامل تگ های html که هیچ کس به شما نخواهد گفت ⭐️

در این مقاله قصد داریم کلیه تگ‌هایhtml را برای شما عزیزان توضیح دهیم. برای این منظور لیست کامل تگ‌ها برای شما آماده شده است. امیدواریم مطالب قابل درک و کاربردی باشد با ما همراه باشید.

قبل از اینکه به معرفی تگ‌ها بپردازیم می‌خواهیم بدانیم مفهوم تگ چیست و چه کاربرد‌هایی در html دارد. تگ ها درhtml نقش مهمی دارند زیرا تمامی کارهایhtml با تگ انجام می‌شود. در نوشتن تگ‌ها باید ساختار و اصول آن رعایت شود و از علامت شروع (< نام تگ>) و علامت پایان (<نام تگ/>) استفاده می‌شود.

تگ‌ها در html دو دسته اند:

تگ‌های بلند که شروع و پایان دارند.
تگ‌های کوتاه که شروع و پایان ندارند.

ویدئو رایگان:آشنایی با دنیای جذاب طراحی سایت و تگ های html

نام تگ‌های html و کاربرد هریک از آنها:

ردیف	نام تگ	توضیحات	تمرین ها
1	<--!>	ایجاد توضیحات در صفحات وب	مثال
2	<DOCTYPE!>	تعیین نوع سند و نسخه در html	مثال
3	<a>	ایجاد لینک در صفحه وب	مثال
4	<abbr>	تعریف مخفف‌ها یا اختصارها در وب	مثال
5	<address>	تعریف اطلاعات تماس نویسنده در وب	مثال
6	<area>	تعریف یک نقشه تصویری	مثال
7	<article>	ایجاد یک محتوای مستقل در صفحه وب	مثال
8	<aside>	تعریف محتوای مرتبط با محتوای اصلی سایت	مثال
9	<b>	برای ضخیم کردن کلمه (Bold)	مثال
10	<bb>	تعریف دستور مرورگر، طبق عملکرد مشتری فراخوانی می شود. (منسوخ شده)	مثال
11	<base>	ایجاد یک لینک پایه	مثال
12	<bdo>	تغییر جهت محتوا	مثال
13	<big>	بزرگتر نشان دادن متن (منسوخ شده)	مثال
14	<blockquote>	برای ایجاد یک نقل قول	مثال
15	<body>	ایجاد بدنه اصلی محتویات صفحات	مثال
16	<br>	شکستن خط و ایجاد یک خط جدید	مثال
17	<button>	اضافه کردن دکمه در صفحات	مثال
18	<caption>	تعیین عنوان یا کپشن در صفحات	مثال
19	<cite>	برای قرار دادن عنوان کتاب، مقاله و برنامه	مثال
20	<code>	تعریف یک قطعه از کد کامپیوتری	مثال
21	<col>	انتخاب یک یا چند ستون در جدول	مثال
22	<colgroup>	انتخاب یک یا چند ستون در جدول	مثال
23	<command>	تعریف دکمه فرمان	مثال
24	<details>	ایجاد یک باکس بازشو برای نمایش متن	مثال
25	<datalist>	یک لیست از گزینه های ازز پیش تعریف شده	مثال
26	<dd>	توصیف یک عنوان در لیست توضیحی	مثال
27	<del>	برای حذف کردن یک متن کاربرد دارد	مثال
28	<dfn>	تعریف کردن یک اصطلاح	مثال
29	<dialog>	برای ایجاد پنجره یا باکس گفت‌گو (منسوخ شده)	مثال
30	<div>	ایجاد طرح بندی یک قالب	مثال
31	<dl>	برای تعریف کردن لیست دارای توضیحات	مثال
32	<dt>	برای ساختن لیست‌های تعریفی	مثال
33	<data>	ایجاد محتوای قابل درک برای موتورهای جستجوگر و…	مثال
34	<em>	برای ایتالیک نوشتن یک متن	مثال
35	<embed>	برای قرار دادن فیلم و صدا در سند html	مثال
36	<eventsource>	منبعی از رویداد ایجاد شده در سرور راه دور را تعریف می کند. (منسوخ شده)	-
37	<fieldset>	دسته‌بندی کنترل‌ها در یک وب فرم	مثال
38	<form>	ایجاد یک فرم در سند html	مثال
39	<footer>	تعریف فوتر یک صفحه وب	مثال
40	<figure>	تعریف شکل ها، تصاویر، نمودارها و.. در صفحه وب	مثال
41	<figcaption>	تعریف عنوان برای تگ <figure>	مثال
42	<font>	تعیین اندازه، رنگ و چهره برای متن خود (منسوخ شده)	مثال
43	<frame>	تعریف پنجره قاب (منسوخ شده)	مثال
44	<frameset>	نگهداری یک یا چند تگ frame (منسوخ شده)	مثال
45	<h1 تا h6>	کاربرد این تگ برای ایجاد هدینگ در سند	مثال
46	<head>	دربرگیرنده اطلاعات کلی سند	مثال
47	<hr>	برای کشیدن یک خط افقی و جدا کردن دو محتوا از هم	مثال
48	<html>	تعریف ساختار اصلی یک صفحه وب	مثال
49	<header>	تعریف هدر یک صفحه وب	مثال
50	<hgroup>	تعریف عنوان بخش نگهداری تگ های h1 تا h6 (منسوخ شده)	مثال
51	<i>	نمایش متن بصورت ایتالیک	مثال
52	<imag>	برای قرار دادن تصویر در صفحه وب	مثال
53	<input>	برای ساختن کنترل‌های ورودی در html	مثال
54	<ins>	یک خط زیر نوشته‌ها می‌کشد	مثال
55	<iframe>	ایجاد فریم در صفحه وب	مثال
56	<isindex>	ایجاد یک اعلان جستجوی تک خطی برای پرس و جو از محتوای سند (منسوخ شده)	مثال
57	<kbd>	تعریف ورودی‌های صفحه کلید	مثال
58	<keygen>	احراز هویت در سرویس ها (منسوخ شده)	مثال
59	<lable>	تعریف یک برچسب برای کنترل‌های ورودی	مثال
60	<legend>	قرار دادن یک عنوان یا یک کپشن در تگ fieldset	مثال
61	<li>	تعریف یک آیتم در لیست	مثال
62	<link>	برای برقراری یک صفحه و یک فایل خارجی	مثال
63	<map>	ایجاد یک نقشه تصویری	مثال
64	<meta>	تعریف متاداده ها در سند	مثال
65	<main>	تعریف محتوای اصلی یک سند	مثال
66	<mark>	هایلایت کردن محتوا	مثال
67	<menu>	ایجاد یک لیست نا مرتب	مثال
68	<meter>	اندازه گیری داده ها در یک محدوده معین	مثال
69	< noscript>	برای مرورگرهایی که script را پشتیبانی نمی‌کند،	مثال
70	<nav>	تعریف لینک های ناوبری	مثال
71	<noframes>	ارائه محتوای بازگشتی به مرورگر که از frame پشتیبانی نمی کند (منسوخ شده)	مثال
72	< object>	برای پیوند یک شی (فایل‌های صوتی و تصویری) خارجی به سند	مثال
73	<ol>	ایجاد یک لیست ترتیبی در سند	مثال
74	<optgroup>	دسته بندی گزینه‌های یک لیست	مثال
75	<option>	مشخص کردن گزینه‌های لیست بازشو	مثال
76	<output>	نمایش نتیجه یک محاسبه	مثال
77	<p>	برای ایجاد پاراگراف در صفحه	مثال
78	<param>	تعریف پارامترهای تگ object	مثال
79	<pre>	نمایش متن به همان صورت اولیه	مثال
80	<progress>	نشان دهنده پیشرفت یک کار	مثال
81	<q>	ایجاد یک نقل قول کوتاه	مثال
82	<rp>	تعیین علائم نگارشی زبان های شرق آسیا	مثال
83	<rt>	تعیین متن حاشیه نویسی روبی	مثال
84	<ruby>	نمایش حاشیه نویسی روبی	مثال
85	<s>	خط کشیدن روی یک متن	مثال
86	<strike>	خط کشیدن روی متن (منسوخ شده)	مثال
87	<samp>	نمایش دادن متن مثل محیط برنامه‌نویسی	مثال
88	< script>	برای قرار دادن یک اسکریپت در صفحه	مثال
89	<small>	کوچکتر نشان دادن متن	مثال
90	<span>	برای تقسیم بندی متن موجود در صفحه	مثال
91	< strong>	متن را ضخیم می‌کند	مثال
92	<style>	مشخص کردن استایل‌ها در سند html	مثال
93	<sub>	ایجاد یک زیر نویس در متن	مثال
94	<sup>	ایجاد یک اندیس در متن	مثال
95	<section>	ایجاد یک قسمت درصفحه وب	مثال
96	<svg>	تعریف اشکال گرافیکی ایجاد شده توسط SVG	مثال
97	<select>	ایجاد لیست کشویی	مثال
98	<source>	تعیین مسیر فایل برای تگ های چند رسانه ای	مثال
99	<table>	ایجاد جدول در صفحه	مثال
100	<tbody>	ایجاد بدنه‌ی اصلی جدول	مثال
101	<td>	ساخت سلول‌های یک جدول	مثال
102	<th>	ایجاد هدر ستون‌های جدول	مثال
103	<title>	ساخت عنوان سایت	مثال
104	<tr>	ایجاد سطر‌های جدول	مثال
105	<tfoot>	ایجاد فوتر جدول	مثال
106	<thead>	ایجاد هدر جدول	مثال
107	<track>	افزودن محتوای متنی به محتوای چند رسانه ای (زیرنویس ویدئو)	مثال
108	<textarea>	ایجاد باکس متن	مثال
109	<time>	تعریف تاریخ و ساعت در صفحه وب	مثال
110	<tt>	نمایش متن تله تایپ (منسوخ شده)	مثال
111	<u>	خط کشیدن زیر یک متن	مثال
112	<ul>	ساخت لیست‌های نامرتب	مثال
113	<var>	تعریف متغیرها درسند html	مثال
114	<video>	قرار دادن محتوای ویدئویی در صفحه وب	مثال
115	<wbr>	جهت شکستن کلمه به سطر جدید	مثال

تگ <--!>

اولین تگ از تگ‌های html کامنت است و برای اضافه کردن توضیحات به کدها می‌باشد.

<!DOCTYPE html>
<html>
<body>

      <! Creat a comment --> 

</body>
</html>

تگ <DOCTYPE!>

برای تعیین نوع سند و نسخه در html استفاده می‌شود.

<!DOCTYPE html>
<html>
<head>
<title>عنوان صفحه وب </title>
</head>
<body>

</body>
</html>

تگ <a>

یکی از تگ‌های html که خیلی مهم و کاربردی است و نام دیگر آن لینک می‌باشد، برای پیوند صفحه و فایل استفاده می‌شود.

  <a href="آدرس مقصد"> Content </a> 

<!DOCTYPE html>

<html>

<body>
                <a href=”https://www.darsman.com”>Darsman.com</a>
</body>

</html>

تگ <abbr>

از این تگ برای مخفف کلمه‌ای استفاده می‌شود و به عبارت دیگر برای نمایش یک متن خلاصه شده و کوتاه است.

<!DOCTYPE html>
<html>
<body>

 <abbr title=" World Wide Web Consortium "> W3C </abbr>
</body>
</html>

تگ <address>

در HTML نشان دهنده اطلاعات تماس یک شخص یا یک سازمان است. اگر از این تگ داخل <body>استفاده شود، این نشان دهنده اطلاعات تماس سند است و اگر داخل <article> استفاده شود، این نشان دهنده اطلاعات تماس مقاله است. متن درون این تگ به صورت ایتالیک نمایش داده می‌‌‌‌شود.

<!DOCTYPE html>
<html>
<body>
              <address> 
            Organization Name: Darsman <br> 
            Web Site:  
            <a href= "https://darsman.com/">Darsman</a><br> 
            visit us:<br> 
            Darsman<br> 
            710-B, Advant Navis Business Park, <br> 
            Sector-142, Noida Uttar Pradesh – 201305 
        </address>

</body>
</html>

تگ<area>

این تگ در یک سند HTML برای ترسیم بخشی از تصویر استفاده می‌‌‌‌‌‌شود. تا توسط کاربر قابل کلیک باشد. بعد از کلیک کاربر بر روی قسمت‌های ترسیم شده تصویر ، کاربر به پیوندهای مختلف هدایت می‌شود. تگ area همیشه درون تگ map قرار می‌گیرد.

<!DOCTYPE html>
<html>
<body>
<img src="workplace.webp" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

</body>
</html>

تگ <article>

با تگ article می توانیم یک محتوای مستقل در یک صفحه وب ایجاد کنیم و همچنین مورد استفاده مجدد قرار گیرد. در این تگ محتوایی همچون اخبار وب سایت، مقالات، نظرات و کامنت ها و... قرار میگیرد.

<body>
<article>
<p> 
آموزش زبان برنامه نویسی    
</p> 
</article> 
</body>

تگ <aside>

با کمک این تگ می توانیم محتوایی مرتبط با محتوای اصلی وب سایت ایجاد کنیم. درون این تگ توضیحات جانبی مانند تعریف لغات یا چیزهایی که کمتر به محتوای اصلی مرتبط هستند مانند تبلیغات، اطلاعات پروفایل، لینک وبلاگ های مرتبط و... قرار می گیرد. به دو صورت می توان از تگ aside استفاده کرد: 1- به صورت تو درتو در دیگر تگ ها 2- برای نمایش ستون های سمت راست و چپ

<main>
    <p>
        This is normal paragraph text
    </p>
</main>
 <aside>
      <h1>This is heading text in aside Tag</h1>
  
      <p>This is paragraph text in aside Tag</p>
 </aside>

تگ<b>

تگ b برای ضخیم کردن کلمه (Bold) به کار می‌رود.

<!DOCTYPE html>
<html>
<body>

<b> Darsman.com </b>

</body>
</html>

تگ <bb>

این تگ از هیچ مرورگر وب پشتیبانی نمی کند.

<html>
<body>
  <bb type="makeapp">Yahoo Messanger Chat Box</bb>
</body>
</html>

تگ <base>

با کمک این تگ می توانیم یک آدرس پایه را برای تمامی لینک های موجود در یک صفحه تعریف کنیم. در هرسند حد اکثر یک تگ base می توانیم تعریف کنیم و این تگ باید در <head> قرار گیرد.

<head>
<base href=" https://darsman.com/images/" target="_blank">
</head>

<body>
<img src="/darsman_logo.jpg" width="20" height="38" alt="Stickman">
<a href="https://beyamooz.com">beyamopz</a>
</body>

تگ <bdo>

برای تغییر جهت متن یا تغییر جهت فعلی استفاده می‌شود.

<!DOCTYPE html>
<html>
<body>

<bdo dir="ltr"> Darsman </bdo><br> 
 <bdo dir="rtl"> Darsman </bdo>         

</body>
</html>

تگ <big>

با استفاده از این تگ می‌توان نوشته در یک متن را بزرگتر نمایش دهید. در html 5 پشتیبانی نمی‌شود.

<!DOCTYPE html>
<html>
<body>

      <big> Darsman </big>

</body>
</html>

تگ<blockquote>

برای ایجاد یک نقل قول از آن می‌توان استفاده کرد.

<!DOCTYPE html>
<html>
<body>

      <blockquote> corresponds to equal probabilities. </blockquote>

</body>
</html>

تگ <body>

این تگ بدنه اصلی محتویات صفحات وب در html می‌باشد.

<!DOCTYPE html>
<html>
<body>

      <p> Welcome to Dersman  </p>

</body>
</html>

تگ<br>

از این تگ برای ایجاد یک خط جدید استفاده می‌شود.

<!DOCTYPE html>
<html>
<body>

 </br> آکادمی               
</br> آنلاین              
درسمن              


</body>
</html>

تگ<button>

برای اضافه کردن دکمه در صفحات وب به کار گرفته می‌شود.

<!DOCTYPE html>
<html>
<body>
                   <button> ثبت نام </button>
</body>
</html>

تگ<caption>

برای تعیین عنوان جدول استفاده می‌شود. این تگ درست بعد از تگ <table> درج می‌شود. فقط یک عنوان برای یک جدول مشخص شود.

<!DOCTYPE html>
<html>
<body>
                     <table>  
                         <caption>Students</caption>  
                         <tr>  
                           <th>Firstname</th>  
                           <th>Lastname</th> 
                           <th>Age</th>  
                       </tr>  
                       <tr>  
                            <td>Ali</td>  
                          <td>Shams</td>  
                          <td>24</td> 
                      </tr>  
</table>             
</body>
</html>

تگ <cite>

کاربرد این تگ برای قرار دادن عنوان کتاب، مقاله و برنامه به کار می‌رود. متن را به صورت اریب نشان می‌‌‌دهد.

<!DOCTYPE html>
<html>
<body>
<p><cite> Darsman Online Academy</cite></p>
</body>
</html>

تگ <code>

این تگ برای تعریف یک قطعه از کد کامپیوتری استفاده می‌شود. هنگام ایجاد صفحات وب، گاهی اوقات نیاز به نمایش کد برنامه‌نویسی کامپیوتر است.

<!DOCTYPE html>
<html>
<body>
              <code> 
#include<stdio.h> 
int main() { 
    printf("Hello Darsman"); 
} 
            </code>
           </body>
</html>

تگ <col>

این تگ برای تنظیمات ستون استفاده می‌شود و داخل تگ <colgroup> قرار می‌گیرد.

<!DOCTYPE html>
<html>
<body>
                     <table>  
                         <colgroup>
                               <col style="background-color:red;">
                         <col style="background-color:blue;">
                        <col style="background-color:green;">
                         </colgroup>                     
                            <tr>  
                           <th>Firstname</th>  
                           <th>Lastname</th> 
                           <th>Age</th>  
                       </tr>  
                       <tr>  
                            <td>Ali</td>  
                          <td>Shams</td>  
                          <td>24</td> 
                      </tr>  
</table>              
</body>
</html>

تگ <colgroup>

این تگ در یک جدول، یک یا چند ستون را قالب بندی می‌کند.

<!DOCTYPE html>
<html>
<body>
                     <table>  
                         <colgroup>
                               <col style="background-color:red;">
                         <col style="background-color:blue;">
                        <col style="background-color:green;">
                         </colgroup>                     
                            <tr>  
                           <th>Firstname</th>  
                           <th>Lastname</th> 
                           <th>Age</th>  
                       </tr>  
                       <tr>  
                            <td>Ali</td>  
                          <td>Shams</td>  
                          <td>24</td> 
                      </tr>  
</table>                
</body>
</html>

تگ <command>

این تگ برای تعیین یک دکمه فرمان که کاربر می تواند بر روی آن کلیک نماید، استفاده شود. این تگ در هیچ یک از مرورگر های فعلی کار نمیکند.

<html>
<body>
  <menu>
    <command type="checklist" label="Check List">Check List</command>
  </menu>
</body>
</html>

تگ <details>

از این تگ برای تعیین توضیحات برای یک موضوع می‌باشد و کاربر می‌تواند براساس نیاز خود آن را نمایان یا مخفی کند. به عبارت دیگر این تگ یک منوی محرک است که کاربر می‌تواند آن را باز و بسته کند.

<!DOCTYPE html>
<html>
<body>
                    <details> 
                         <summary>darsman</summary> 
                         <p>darsman education courses</p> 
                  </details>
</body>
</html>

تگ <datalist>

این تگ یک لیست از پیش تعیین شده برای یک کنترل input می‌باشد ودرون یک تگ form به کار می‌رود.

<!DOCTYPE html>
<html>
<body>

<form method="get">
  <label for="city">Choose your city from the list:</label>
  <input list="city" name="city" id="city">
  <datalist id="city">
    <option value="Tehran">
    <option value="Shiraz">
    <option value="Hamedan">
    <option value="Lorestan">
    <option value="Yazd">
  </datalist>
  <input type="submit">
</form>

</body>
</html>

تگ <dd>

کاربرد این تگ در html برای توصیف یک عنوان در لیست است.

<!DOCTYPE html>
<html>
<body>

<dl>
  <dt>C#</dt>
  <dd> It is a programming language </dd>
  <dt> Android </dt>
  <dd> Mobile operating system</dd>
</dl>

</body>
</html>

تگ <del>

یکی دیگر از تگ‌های html، تگ <del > است و متنی که در سند حذف می‌شود را نمایش می‌دهد و روی متن حذف شده خط می‌کشد.

<!DOCTYPE html>
<html>
<body>

<p> Price : <del>5000</del> <ins>2000</ins>!</p>

</body>
</html>

تگ <dfn>

به این تگ، تگ عبارت گفته می‌شود و کاربردش برای تعیین کلمه خاصی است و متن‌هایی که داخل این تگ قرار می‌گیرید مثل ایتالیک نشان می‌دهد.

<!DOCTYPE html>
<html>
<body>

<p><dfn>HTML</dfn> is the standard markup language for creating web pages.</p>

</body>
</html>

تگ <dialog>

برای تعریف یک پنجره یا باکس گفتگو استفاده می‌شود.

<!DOCTYPE html>
<html>
<body>

<dialog open>This is an open dialog window</dialog>

</body>
</html>

تگ<div>

تگ div یکی دیگر از تگ‌های html می‌باشد و برای تعریف یک بخش در سند html می‌باشد.

<!DOCTYPE html>
<html>
<body>
                      <div style=”background-color:red;”>
  <h2>Div Tag</h2>
  <p>Content Div</p>
</div>

</body>
</html>

تگ<dl>

از این تگ برای تعریف کردن لیست می‌باشد و با دو تگ <dd> و <dt> قابل استفاده می‌باشد.

<!DOCTYPE html>
<html>
<body>

<dl>
  <dt>C#</dt>
  <dd> It is a programming language </dd>
  <dt> Android </dt>
  <dd> Mobile operating system</dd>
</dl>

</body>
</html>

تگ <dt>

یک نمونه دیگر تگ‌های html، تگ dt می‌باشد و برای ساختن لیست‌های تعریفی به کار می‌رود و به همراه تگ dl استفاده می‌شود.


<!DOCTYPE html>
<html>
<body>

<dl>
  <dt>C#</dt>
  <dd> It is a programming language </dd>
  <dt> Android </dt>
  <dd> Mobile operating system</dd>
</dl>

</body>
</html>

تگ <data>

این تگ هم یک مقدار قابل خواندن توسط ماشین برای پردازشگرهای داده و هم یک مقدار قابل خواندن توسط انسان برای رندر در مرورگر فراهم می کند.

<html>
<body>
<ul>
<li><data value="1001”>> اندروید پیشرفته /data></li>
 <li><data value="1002”>> اندروید مقدماتی /data></li>
 <li><data value="1003”> استادی پایتون </data></li>
</ul>
</body>
</html>

تگ <em>

کاربرد این تگ برای ایتالیک نوشتن است نوشته را کج می‌کند.

<!DOCTYPE html>
<html>
<body>

<em>darsman.com</em> 

</body>
</html>

تگ <embed>

یک تگ سازنده است و برای قرار دادن فیلم و صدا در سند html می‌باشد. این تگ یکی از تگ‌های جدید html5 می‌باشد.

<!DOCTYPE html>
<html>
<body>

<embed type="video/webm" src="movie.mp4">
 
</body>
</html>

تگ <fieldset>

از این تگ برای دسته بندی کنترل‌ها و تگ <label> در یک وب فرم استفاده می‌شود و همچنین برای ایجاد یک کارد دور تگ‌های مرتبط استفاده می‌شود.

<!DOCTYPE html>
<html>
<body>

<form>
 <fieldset>
  <legend>Personal:</legend>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br>
  <input type="submit" value="Submit">
 </fieldset>
</form>

</body>
</html>

تگ <form>

برای ایجاد یک فرم در سند html به کار می‌رود.

<!DOCTYPE html>
<html>
<body>

<form>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

تگ <footer>

تگ foorer یک پانویس برای صفحه وب ایجاد می کند عناصر این بخش شامل لینک های بخش های مختلف سایت، اطلاعات تماس و... می‎باشد.

<body>
<footer>  
<p>   
 فوتر     
</p>   
</footer>  
</body>

تگ<figure>

این تگ حاوی محتواهایی چون تصاویر، نمودارها، لیست کد ها و غیره است که با محتوای کلی صفحه مرتبط می‎باشد و بدون هیچ تاثیری می تواند در بخش های دیگر سند قرار بگیرد یا حذف شود. عنوان این محتوای تصویری توسط تگ figcaption مشخص می‎شود که می تواند در بالا و پایین تصویر قرار بگیرد. اما تفاوت بین تگ figure و img در این می باشد که تگ imgبرای جاسازی تصویر در یک سند استفاده می‎شود و تگ figure برای سازماندهی معنایی محتوای یک تصویر در سند استفاده می‎شود.

<body>
<figure style="text-align:center;">
 <img src="files/darsman.jpg">
</figure>
</body>

تگ<figcaption>

تگ figcaption تگی است که باید داخل تگ figure استفاده شود این تگ یک عنوان به تگ <figure>اضافه می کند. این تگ می‎تواند به عنوان اولین یا آخرین عنصر داخل تگ <figure> قرار بگیرد. استفاده از این تگ اختیاری است .

<body>
<figure style="text-align:center;">
 <img src="files/darsman.jpg">
<figcaption>
 آموزش برنامه نویسی   
 </figcaption>
</figure>
</body>

تگ <font>

Face نوع فونت را مشخص می کند. Size اندازه متن را مشخص می کند که مقادیر بین 1 تا 7 می باشد. که سایز فونت بصورت پیش فرض 3 است. این تگ از HTML5 حذف شده است.

<html>
<body>
  <font face="verdana" size="2" color="red"> Programming training with Darsman </font> <br />
</body>
</html>

تگ <frame>

این تگ درون تگ frameset استفاده می شود، برای تقسیم پنجره مرورگر به چندین فریم جداگانه استفاده می شود که می تواند یک سند وب HTML جداگانه باشد. این تگ ظاهر و قابلیت استفاده سایت را بهبود می بخشد.

<html>
<body style="background-color:#ff8800;">
  <h2 align="center">First frame (frame_1.html)</h2>
</body>
</html>

<html>
<body style="background-color:#ffdd00;">
  <h2 align="center">Second frame (frame_2.html)</h2>
</body>
</html>

<html>
<body>
<frameset rows="35%, 65%">
  <frame src ="frame_1.html" />
  <frame src ="frame_2.html" />
</frameset>
</body>
</html>

تگ <frameset>

این تگ صفحه مرورگر را به چندین بخش جداگانه تقسیم می کند که می تواند یک سند وب html جداگانه باشد. این تگ هم از HTML5 حذف شد. این تگ منسوخ شده است.

<html>
<body style="background-color:#ff8800;">
  <h2 align="center">First frame (frame_1.html)</h2>
</body>
</html>

<html>
<body style="background-color:#ffdd00;">
  <h2 align="center">Second frame (frame_2.html)</h2>
</body>
</html>

<html>
<body>
<frameset rows="35%, 65%">
  <frame src ="frame_1.html" />
  <frame src ="frame_2.html" />
</frameset>
</body>
</html>

تگ <h1…h6>

کاربرد این تگ برای ایجاد هدینگ در سند می‌شود و h1 بزرگترین سایز عنوان است و هرچه عدد تگ بزرگتر شود سایز عنوان کوچکتر می‌شود.

<!DOCTYPE html>
<html>
<body>

<h1> heading 1</h1>
<h2> heading 2</h2>
<h3> heading 3</h3>
<h4> heading 4</h4>
<h5> heading 5</h5>
<h6> heading 6</h6>

</body>
</html>

تگ <head>

اطلاعاتی کلی سند در آن قرار می‌گیرد و همچنین می‌تواند اسکریپت‌ها، استایل‌ها، اطلاعات متا در بربگیرد.

<!DOCTYPE html>
<html >
<head>
  <title>آکادمی آنلاین درسمن</title>
</head>
<body>

</body>
</html>

تگ <hr>

این تگ برای کشیدن یک خط افقی به کار میرود و با استفاده از این تگ می‌توان دو محتوا را در یک صفحه از هم جدا کرد.

<!DOCTYPE html>
<html>
<body>

<p>This is a paragraph</p>

<hr>

<p>This is a paragraph</p>

</body>
</html>

تگ <html>

در واقع ساختار اصلی یک سایت را براساس کدهای html ایجاد می‌کند و فقط کدهایی که درون این تگ قرار دارد توسط مرور گر خوانده و اجرا می‌شود.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>آکادمی آنلاین درسمن</title>
</head>
<body>

<h1>This is a heading</h1>

</body>
</html>

تگ <header>

از این تگ برای ایجاد محتوا و عناصر ابتدای صفحه وب استفاده می‎شود، عناصر منو و بخش معرفی در این تگ قرار میگیرد.

<body>
<header>  
<p>   
 هدر      
</p>   
</header>  
</body>

تگ <hgroup>

این تگ زمانی استفاده می شود که سرفصل ها به صورت سطوح چندگانه مانند عنوان، عنوان فرعی، عنوان جایگزین نشان داده می شوند را نگه داری می کند.این تگ هم در HTML5 حذف شده است.

<html>
<body>
  <article>
    <hgroup>
      <h1> آموزش برنامه نویسی</h1>
      <h3>طراحی سایت</h3>
    </hgroup>
    <p>Dresman Online Academy is like a bridge to become an expert in programming, we will guarantee you that you will experience the highest quality of programming education.</p>
  </article>
</body>
</html>

تگ <i>

این تگ بخشی از متن را باصدا یا حالتی متناوب تعریف می‌کند و متن به صورت ایتالیک می‌باشد و با تگ em تفاوت دارد و em برای متن تاکید شده استفاده می‌شود.

<!DOCTYPE html>
<html>
<body>

<i>Lorem ipsum</i>

</body>
</html>

تگ <img>

یکی دیگر از تگ‌های html که کاربردی می‌باشد تگ imag است و برای قرار دادن عکس در صفحه استفاده می‌شود و دارای تگ پایانی نمی‌باشد.

<!DOCTYPE html>
<html>
<body>

<img src="image/img.webp"> 

</body>
</html>

تگ <input>

تگ input برای ساختن کنترل‌ها در html به کار می‌رود مانند: کادر‌های متن، لیست‌های بازشو، دکمه‌های فرمان.... درون فرم‌ها استفاده می‌شود و درون تگ فرم قرار می‌گیرد.

<!DOCTYPE html>
<html>
<body>

<form>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

تگ <ins>

این تگ برای نشان دادن یک متن جدید وارده شده در صفحه است و یک خط زیر نوشته‌ها می‌کشد.

<!DOCTYPE html>
<html>
<body>

<ins>darsman</ins>

</body>
</html>

تگ <iframe>

در HTML5 برای ساخت فریم از تگ های frame و frameset نمی توانیم استفاده کنیم به همین دلیل از تگ iframe برای ساخت فریم استفاده می کنیم. این تگ صفحه وب را به چندین بخش جدا اتقسیم می کند و هر بخش می تواند یک سند html جداگانه را نمایش دهد.

<html>
<body>
  <iframe src=" https://darsman.com/blog/html-tags/ "  width="550" height="310" frameborder="0"   allowfullscreen="allowfullscreen"></iframe>
</body>
</html>

تگ <isindex>

با کمک این تگ می توان یک رشته متنی را از صفحه فعلی جهت پرس و جو به سمت سرور ارسال کرد، و سرور نیز لیستی از جستجوهای مرتبط با اون متن موجود در تگ را ارسال خواهد کرد.

<html>
<body>
  <isindex prompt="Search" />
</body>
</html>

تگ<kbd>

یک تگ عبارتی است و ورودی صفحه کلید را مشخص می‌کند.

<!DOCTYPE html>
<html>
<body>

<p>Please Press <kbd>Ctrl</kbd> and <kbd>C</kbd> For Copy File</p>

</body>
</html>

تگ <keygen>

تگ keygen درون تگ form استفاده می شود و با کمک این تگ می توان عمل رمزنگاری را بر روی داده های ارسال شده به سمت سرور اعمال کرد که باعث می شود فرم هایی با امنیت بالاتری ایجاد کرد.

<html>
<body>
  <keygen name="mykey"
          challenge="challenge string"
          keytype="RSA">
</body>
</html>

تگ <label>

این تگ یک عنوان برای تگ input تعیین می‌کند

<!DOCTYPE html>
<html>
<body>

<form>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

تگ <legend>

از این تگ برای قرار دادن یک عنوان یا یک کپشن در تگ fieldset استفاده می‌شود.

<!DOCTYPE html>
<html>
<body>

<form>
 <fieldset>
  <legend>Personal:</legend>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br>
  <input type="submit" value="Submit">
 </fieldset>
</form>

</body>
</html>

تگ <li>

برای تعریف یک آیتم در لیست به کار می‌رود.

<!DOCTYPE html>
<html>
<body>

<ul>
  <li>item1</li>
  <li>item2 </li>
  <li>item3</li>
</ul> 

</body>
</html>

تگ <link>

یک تگ ارتباطی است و برای برقراری یک صفحه و یک فایل خارجی استفاده می‌شود.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>

</body>
</html>

تگ <map>

این تگ برای ایجاد یک نقشه تصویری مورد استفاده قرار می‌گیرد.

<!DOCTYPE html>
<html>
<body>

<h1>The map and area elements</h1>

<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p>

<img src="workplace.webp" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

</body>
</html>

تگ <meta>

یکی دیگر از تگ‌های html که کاربردی است تگ meta می‌باشد و کاربردش اطلاعات کلی درباره محتويات يک صفحه برای استفاده موتورهای جستجومی‌باشد.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="description" content="آموزش طراحی وب">
  <meta name="keywords" content="HTML,CSS ">
  <meta name="author" content="مهدی عباسی">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

</body>
</html>

تگ<main>

این تگ محتوای اصلی صفحه را در برمی گیرد. محتوای درون تگ main باید منحصربه فرد باشد و نباید این محتوا در بخش های دیگر سایت مثله فوتر یا هدر یا در ستون های کناری سایت قرار گیرند.

<body>
   <main>
      <p>
         Darsman Online Academy
      </p>
    </main>
</body>

تگ <mark>

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

<html>
<body>
  <p>An elective darsman to <mark> become a professional </mark> </p>
</body>
</html>

تگ <menu>

با کمک این تگ می توان یک منوی زمینه ای ایجاد کرد، و با تگ menuitem آیتم های منو را تعریف کرد. در داخل این تگ می توانیم قسمت های مختلف یک منو (آیکون ها، فهرست منو، باکس جستجو و...) را ایجاد کنیم.

<html>
<body>
<h3>2.) type="list"</h3>
<menu>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</menu>
</body>
</html>

تگ <meter>

این تگ یک اندازه گیری اسکالر را در یک محدوده شناخته شده تعریف می کند و به عنوان سنج شناخته می شود. از این تگ برای نمایش نمایه تکمیل شده، استفاده از دیسک، وضعیت بارگیری داده و... استفاده می شود.

<html>
<body>
  <p>Your profile completed: <meter value="80" min="0" max="100">80%</meter></p>
  <p>Free Space: <meter value="54" min="0" max="100">54%</meter></p>	
</body>
</html>

تگ <noscript>

این تگ برای مرورگرهایی که script را پشتیبانی نمی‌کند استفاده می‌شود.

<!DOCTYPE html>
<html>
<body>

<script>
document.write("Hello World!")
</script>
<noscript>!مرورگر شما از جاوا اسکریپت پشتیبانی نمی کند</noscript>

</body>
</html>

تگ <nav>

با کمک این تگ می توانید یک منوی ناوبری ایجاد کنید که مجموعه ای از لینک هایی هستند که صفحات یک وب سایت را به یکدیگر وصل می کنند و مسیری مشخص برای حرکت در صفحات سایت می‎سازد.

<body>
<nav>
 <a href="#"> 
خانه    
</a> 
 <a href="#"> 
دوره آموزشی    
</a> 
 <a href="#"> 
درباره ما   
</a> 
</nav>
</body>

تگ <noframes>

این تگ برای ارائه محتوای بازگشتی به مرورگر استفاده می شود که از frame پشتیبانی نمی کند. این تگ در html5 حذف شد.

تگ <object>

از این تگ برای پیوند یک شی (فایل‌های صوتی و تصویری) خارجی به سند html می‌باشد.

<!DOCTYPE html>
<html>
<body>


<object data="pic.webp" width="300" height="200"></object>
 
</body>
</html>

تگ <ol>
با استفاده از این تگ می‌توان لیست ترتیبی ایجاد کرد.

<!DOCTYPE html>
<html>
<body>

<ol>
  <li>item1</li>
  <li> item2</li>
  <li> item3</li>
</ol>

</body>
</html>

تگ <optgroup>

از این تگ برای دسته بندی گزینه‌های یک لیست استفاده می‌شود.

<!DOCTYPE html>
<html>
<body>

<select>
 <optgroup label="استان">
  <option value="hamedan">همدان</option>
  <option value="fars">فارس</option>
  <option value="tehran">تهران</option>
  <option value="esfahan">اصفهان</option>
 </optgroup>
 <optgroup label="شهرستان">
  <option value="malayer">ملایر</option>
  <option value="shiraz">شیراز </option>
  <option value="tehran">تهران</option>
  <option value="esfahan">اصفهان</option>
 </optgroup>
</select> 

</body>
</html>

تگ<option>

از این تگ برای تعیین یک مورد داخل یک لیست استفاده می‌شود.

<!DOCTYPE html>
<html>
<body>

<select id="flowers">
  <option value="rose">رز</option>
  <option value="maryam">مریم</option>
  <option value="niloofar">نیلوفر</option>
  <option value="narges">نرگس</option>
</select>
  
</body>
</html>

تگ <output>

این تگ برای نمایش نتیجه یک محاسبه، مانند نتیجه انجام شده توسط یک اسکریپت یا عملکرد کاربر مانند واردکردن داده ها در یک فرم استفاده می شود.

<html>
<body>
  <form oninput="result.value=parseInt(a.value)+parseInt(b.value);">
    Value 1. <input type="number" name="a" value="35"/><br />
    + <br />
    Value 2. <input type="number" name="b" value="50"/> <br />
    = <br />
    Output is <output name="result">85</output>
  </form>
</body>
</html>

تگ <p>

از این تگ برای ایجاد پاراگراف استفاده می‌شود.

<!DOCTYPE html>
<html>
<body>

<p>این یک پاراگراف است.</p>
<p> این یک پاراگراف است.</p>

</body>
</html>

تگ <param>

این تگ برای تعیین تنظیمات زمان اجرای یک شی خارجی استفاده می‌شود.

<!DOCTYPE html>
<html>
<body>

<object data="video.wav">
<param name="autoplay" value="true">
</object>

</body>
</html>

تگ <pre>

از این تگ برای نمایش متن به همان صورت اولیه به کار می‌رود.

<!DOCTYPE html>
<html>
<body>

<pre>
       از این تگ برای نمایش
 متن به همان صورت اولیه       
 به کار می‌رود.        
</pre>

</body>
</html>

تگ <progress>

از این تگ برای نشان دادن پیشرفت بارگیری، بارگذاری، آپلود فایل در سند استفاده می شود و برای نمایش پیشرفت کار با جاوا اسکریپت در ارتباط است.

<html>
<body>
  Please wait it's loading... 
  <progress>
      <span id="progress">26%</span>
  </progress>
  <br /><br />
  Uploading status... 
  <progress value="40" max="100">40 %</progress>
</body>
</html>

تگ <q>

از این تگ برای ایجاد یک نقل قول استفاده می‌شود.

<!DOCTYPE html>
<html>
<body>

<q>آکادمی آنلاین درسمن </q>

</body>
</html>

تگ <rp>

از این تگ برای تهیه پرانتز در اطراف متن روبی استفاده می شود که توسط مرورگرهایی که حاشیه نویسی روبی را پشتیبانی نمی کنند نشان داده می شود.

<html>
<body>
  <p>
    <ruby>草泥馬<rp>(</rp><rt>Cǎo Ní Mǎ</rt><rp>)</rp></ruby>
  </p>
</body>
</html>

تگ <rt>

این تگ توضیح، ترجمه، تلفظ صحیح حروف در حاشیه نویسی روبی را مشخص می کند. در اصل اطلاعات را به تگ rp می دهد که چه چیزی نشان داده شود. معمولا این تگ همراه با تگ rp، ruby استفاده می شود.

<html>
<body>
  <p> Syntax: 
    <ruby>Base text <rt>Ruby text</rt> </ruby>
  </p>
  <p> Example: 
    <ruby>test <rt>test1 test2 test3</rt> </ruby>
  </p> 
</body>
</html>

تگ <ruby>

این تگ حاشیه نویسی روبی را در صفحه وب نشان می دهد. حاشیه نویسی روبی برای نشان دادن تلفظ کاراکترهای کشورهای آسیا شرقی (چین، ژاپن، کره) استفاده می شود.

<html>
<body>
  <p> 
    <ruby>草泥馬 <rt>Cǎo Ní Mǎ</rt> </ruby>
  </p>
</body>
</html>

تگ <s>

این تگ برای نشان دادن متنی که دیگر دقیق یا مرتبط نیست استفاده می شود. روی محتوای مد نظر خط می کشد.

<html>
<body>
  <p>آموزش برنامه نویسی  <s> پایتون </s> پایتون پیشرفته </p>
</body>
</html>

تگ<strike>

این تگ برای خط کشیدن روی متنی که اعتبارش تمام شده است استفاده می شود.

<html>
<body>
  <p> آموزش برنامه نویسی <strike> پایتون </strike> پایتون پیشرفته </p>
</body>
</html>

تگ <samp>

کاربرد این تگ برای نمایش دادن متن مثل محیط برنامه‌نویسی می‌باشد.

<!DOCTYPE html>
<html>
<body>
<p><samp>File not found.</samp></p>

</body>
</html>

تگ <script>

این تگ برای قرار دادن یک اسکریپت داخل سند html است.

<!DOCTYPE html>
<html>
<body>

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script> 

</body>
</html>

تگ <small>

با استفاده کردن از این تگ باعث می شود محتویات داخل تگ کوچکتر از متن همجوار باشد.

<!DOCTYPE html>
<html>
<body>

<p>. این یک متن عادی است </p>
<p><small>.این متن کوچکتر است</small></p>

</body>
</html>

تگ <span>

این تگ برای تقسیم بندی متن یک پاراگراف قطعات مجزا استفاده می‌شود.

<!DOCTYPE html>
<html>
<body>


<p> آکادمی آنلاین <span style="color:blue;font-weight:bold">درسمن</span></p>

</body>
</html>

تگ <strong>

با استفاده کردن از این تگ می‌توان نوشته را تو پر و ضخیم تر نمایش داد.

<!DOCTYPE html>
<html>
<body>

<p><strong>!این متن مهم است</strong></p>

</body>
</html>

تگ <style>

برای قالب بندی تگ های html و صفحات استفاده می شود.

<!DOCTYPE html>
<html>
<head>
<style>
     h1 {
       color:Purple;
      }
</style>
</head>
<body>

<h1>آکادمی آنلاین درسمن</h1>

</body>
</html>

تگ<sub>

برای ایجاد یک زیر نویس در متن به کار می‌رود.

<!DOCTYPE html>
<html>
<body>

<p>H<sub>2</sub>O</p>

</body>
</html>

تگ <sup>

یکی دیگر از تگ‌های html است و برای ایجاد یک اندیس در متن استفاده می‌شود.


<!DOCTYPE html>
<html>
<body>

<p>X<sup>2</sup></p>

</body>
</html>

تگ <section>

با کمک این تگ می توان یک بخش در یک صفحه وب ایجاد کرد، اغلب برای مشخص کردن و معرفی یک محتوای مستقل در سایت استفاده می شود و باعث می شود محتوای شما از نظر مفهومی دارای تم مشخصی شود.

<body>
<section>
 <h2>بخش اول</h2>
 <p> سایت آموزشی درسمن </p>
<section/>
<body/>

تگ <svg>

این تگ در HTML5 معرفی شده است . svg مخفف کلمه Scalable Vector Graphics به معنی گرافیک برداری مقیاس پذیر است که با استفاده از آن می توان کرافیک های 2 بعدی مبتنی بر XML را طراحی کرد. تگ svg دارای چندین روش برای رسم مسیرها، رسم مربع، دایره، متن و تصاویر گرافیکی است.

<html>
<body>
<svg width="110" height="55">
 <rect width="110" height="55" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)"/>
</svg>
</body>
</html>

تگ <select>

با کمک این تگ می توان یک لیست کشویی ایجاد کرد و با استفاده از تگ option گزینه های موجود در لیست را تعریف کرد. از این تگ بیشتر در تگ <form> برای دریافت ورودی از کاربر استفاده می شود.

<html>
<body>
<select>
<option value="ANDROID">  
 اندروید 
</option>
<option value="PYTHON"> 
 پایتون 
</option>
<option value="FRONTE-END">   
فرانت اند 
</option>
<option value="JAVA">   
جاوا 
</option>
</select>  
</body>
</html>

تگ <source>

این تگ برای تعیین منابع رسانه ای متعدد برای عناصری مانند video، audio و picture استفاده می شود. و به شما امکان می دهد فایل های ویدیویی/صوتی/تصویری را که مرورگر ممکن است از بین آنها انتخاب کند را بر اساس پشتیبانی مرورگر مشخص کنید. این تگ دارای سه خصوصیت (src - media - type) در HTML5 می باشد.

<html>
<body>
<audio controls>
 <source src="files/test.mp3" type="audio/mpeg">
</audio>
</body>
</html>

تگ <table>

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

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid #000;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>نام</th>
    <th>نام خانوداگی</th>
  </tr>
  <tr>
    <td>مهدی</td>
    <td>عباسی</td>
  </tr>
  <tr>
    <td>علی</td>
    <td>رضایی</td>
  </tr>
</table>

</body>
</html>

تگ <tbody>

این تگ محتویات و بدنه ی اصلی جدول را در بر دارد.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid #000;
}
</style>
</head>
<body>

<table>
  <thead>
     <tr>
    <th>نام</th>
    <th>نام خانوداگی</th>
  </tr>
  </thead>
  <tbody>  
  <tr>
    <td>مهدی</td>
    <td>عباسی</td>
  </tr>
  <tr>
    <td>علی</td>
    <td>رضایی</td>
  </tr>
  </tbody>
  
</table>

</body>
</html>

تگ<td>

این تگ برای ساختن خانه جدول استفاده می شود.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid #000;
}
</style>
</head>
<body>

<table>
  <tr>
    <td>Cell A</td>
    <td>Cell B</td>
  </tr>
  <tr>
    <td>Cell C</td>
    <td>Cell D</td>
  </tr>
</table>

</body>
</html>

تگ <th>

برای ایجاد سر عنوان (Header) در جدول به کار می رود.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid #000;
}
</style>
</head>
<body>


<table>
  <tr>
    <th> نام </th>
    <th> نام خانوادگی </th>
  </tr>
  <tr>
    <td>مهدی</td>
    <td>عباسی</td>
  </tr>
  <tr>
    <td>علی</td>
    <td>رضایی</td>
  </tr>

</table>

</body>
</html>

تگ <title>

یکی دیگر از تگ های html که کاربردی می باشد این تگ است و برای عنوان صفحه استفاده می شود و زمانی که مرورگر را باز می کنیم در نوار عنوان نمایش داده می شود.

<!DOCTYPE html>
<html>
<head>
  <title>آکادمی آنلاین درسمن</title>
</head>
<body>

</body>
</html>

تگ <tr>

این تگ برای ایجاد سطر در جدول به کار می‌رود

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid #000;
}
</style>
</head>
<body>


<table>
  <tr>
    <th> نام </th>
    <th> نام خانوادگی </th>
  </tr>
  <tr>
    <td>مهدی</td>
    <td>عباسی</td>
  </tr>
  <tr>
    <td>علی</td>
    <td>رضایی</td>
  </tr>

</table>

</body>
</html>

تگ <tfoot>

تگ tfoot قسمت پایانی یک جدول را تعریف می کند. این تگ درون تگ table قرار می گیرد و حداقل یک تگ tr درون خود دارد.

<tfoot>
 <tr>
  <td colspan="2">قیمت دوره : 4</td>
  <td>قیمت کل : 850,000 هزارتومان</td>
 </tr>
</tfoot>

تگ <thead>

تگ thead عناوین ستون های جدول را مشخص می کند. این تگ همراه تگ tfoot و tbody استفاده می شود که به ترتیب فوتر جدول و بدنه جدول را مشخص می کند.

<thead>
 <tr>
  <th>ردیف</th>
  <th>نام دوره</th>
  <th>قیمت</th>
 </tr>
</thead>

تگ <track>

این تگ در عناصر <audio> و <video> بکار می رود و خارج از آن کاربردی ندارد.تگ track متن تکمیلی مانند زیرنویس، عنوان یا سایر اشکال متنی را که در بخش های رسانه نمایش داده می شود را مشخص می کند.

<html>
  <body>
      <video controls width="400" src="/content/video/movie.mp4">
    <track default kind="captions" srclang="fa" src="/content/video//movie.vtt"/>
    </video>
  </body>
</html>

تگ <textarea>

این تگ یک باکس متن در صفحه وب ایجاد می کند. برای دریافت متن های طولانی (چندخطی) استفاده می شود.همچنین می تواند تعداد کاراکتر نامحدودی را در خود نگه دارد. اندازه متن با ویژگی های cols و rows مشخص می شود.

<html>
<body>
  <textarea name="textarea" rows="4" cols="40">Describe yourself...</textarea>
</body>
</html>

تگ <time>

تگ time تاریخ و زمان را در صفحه وب نشان می دهد. این تگ زمان، تاریخ، روز و جابه جایی منطقه زمانی را به روش مختلف نمایش می دهد. از ویژگی datatime برای نمایش دقیق تاریخ و ساعت یک کار استفاده می شود.

<tfoot>
 <tr>
  <td colspan="2">قیمت دوره : 4</td>
  <td>قیمت کل : 850,000 هزارتومان</td>
 </tr>
</tfoot>

تگ <tt>

این تگ از کلمه teletype گرفته شده است. مرورگرها به طور پیش فرض متن داخل این تگ را در فونت تک فضا با عرض ثابت رندر می کند.

<html>
<body>
  <p>This example represent <tt>Teletype</tt> text.</p>
</body>
<html>

تگ <u>

u یکی از تگ‌های html محسوب میشود واین را دارد که با استفاده از آن نوشته ها زیر خط دار می‌شوند.

<!DOCTYPE html>
<html>
<body>

<p><u>لورم ایپسوم</u>متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ</p>

</body>
</html>

تگ <ul>

از این تگ برای ساختن لیست‌های نشانه‌ای استفاده می‌شود.

<!DOCTYPE html>
<html>
<body>

<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ul>

</body>
</html>

تگ <var>

این تگ برای نمایش متن مانند محیط‌های برنامه‌نویسی استفاده می‌شود.

<!DOCTYPE html>
<html>
<body>

     <var>Darsman</var>

</body>
</html>

تگ <video>

تگ video یک ویدیو را بدون نیاز به پلاگین (پخش کننده flash) در صفحه وب قرار می دهد. این تگ از فرمت های Ogg، MP4 و Webm پشتیبانی می کند.

<html>
<body>
  <video src="../../file/part1.mp4" width="300" height="170" controls="controls">
      </video>
</body>
<html>

تگ <wbr>

زمانی که یک کلمه بیش از حد طولانی می شود برای جلوگیری از شکستن کلمه از تگ <wbr> استفاده می کنیم.

<html>
<body>
<p>
Dresman Online Academy is like a bridge to become an expert in programming <wbr> we will guarantee <wbr> you that you will experience the highest quality of programming education.
 <</p
<body/>
<html/>

کلام آخر:

امیدورام از تگ های html استفاده کافی را برده باشید و در پروژه های خود از آن استفاده کنید، اگر سوالی در این خصوص داشته باشید می توانید در قسمت نظرات مطرح کنید.

لیست کامل تگ های html که هیچ کس به شما نخواهد گفت

ویدئو رایگان:آشنایی با دنیای جذاب طراحی سایت و تگ های html

نام تگ‌های html و کاربرد هریک از آنها:

تگ <del>

تگ <ol> با استفاده از این تگ می‌توان لیست ترتیبی ایجاد کرد.

از این تگ برای نشان دادن پیشرفت بارگیری، بارگذاری، آپلود فایل در سند استفاده می شود و برای نمایش پیشرفت کار با جاوا اسکریپت در ارتباط است.

کلمات کلیدی :

نظر بدهید

تگ <ol>
با استفاده از این تگ می‌توان لیست ترتیبی ایجاد کرد.