تاریخ بروزرسانی : 16 آذر 1399 | تعداد بازدید : 10016 | زمان خواندن مقاله : 15دقیقه

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

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

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

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

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

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

ردیف	نام تگ	توضیحات	تمرین ها
1	<--!>	ایجاد توضیحات در صفحات وب	مثال
2	<DOCTYPE!>	تعیین نوع سند و نسخه در html	مثال
3	<a>	ایجاد لینک در صفحه وب	مثال
4	<abbr>	تعریف مخفف‌ها یا اختصارها در وب	مثال
5	<address>	تعریف اطلاعات تماس نویسنده در وب	مثال
6	<area>	تعریف یک نقشه تصویری	مثال
7	<b>	برای ضخیم کردن کلمه (Bold)	مثال
8	<base>	ایجاد یک لینک پایه	مثال
9	<bdo>	تغییر جهت محتوا	مثال
10	<big>	بزرگتر نشان دادن متن	مثال
11	<blockquote>	برای ایجاد یک نقل قول	مثال
12	<body>	ایجاد بدنه اصلی محتویات صفحات	مثال
13	<br>	شکستن خط و ایجاد یک خط جدید	مثال
14	<button>	اضافه کردن دکمه در صفحات	مثال
15	<caption>	تعیین عنوان یا کپشن در صفحات	مثال
16	<cite>	برای قرار دادن عنوان کتاب، مقاله و برنامه	مثال
17	<code>	تعریف یک قطعه از کد کامپیوتری	مثال
18	<col>	انتخاب یک یا چند ستون در جدول	مثال
19	<colgroup>	انتخاب یک یا چند ستون در جدول	مثال
20	<details>	ایجاد یک باکس بازشو برای نمایش متن	مثال
21	<datalist>	یک لیست از گزینه های ازز پیش تعریف شده	مثال
22	<dd>	توصیف یک عنوان در لیست توضیحی	مثال
23	<del>	برای حذف کردن یک متن کاربرد دارد	مثال
24	<dfn>	تعریف کردن یک اصطلاح	مثال
25	<dialog>	برای ایجاد پنجره یا باکس گفت‌گو	مثال
26	<div>	ایجاد طرح بندی یک قالب	مثال
27	<dl>	برای تعریف کردن لیست دارای توضیحات	مثال
28	<dt>	برای ساختن لیست‌های تعریفی	مثال
29	<em>	برای ایتالیک نوشتن یک متن	مثال
30	<embed>	برای قرار دادن فیلم و صدا در سند html	مثال
31	<fieldset>	دسته‌بندی کنترل‌ها در یک وب فرم	مثال
32	<form>	ایجاد یک فرم در سند html	مثال
33	<h1 تا h6>	کاربرد این تگ برای ایجاد هدینگ در سند	مثال
34	<head>	دربرگیرنده اطلاعات کلی سند	مثال
35	<hr>	برای کشیدن یک خط افقی و جدا کردن دو محتوا از هم	مثال
36	<html>	تعریف ساختار اصلی یک صفحه وب	مثال
37	<i>	نمایش متن بصورت ایتالیک	مثال
38	<imag>	برای قرار دادن تصویر در صفحه وب	مثال
39	<input>	برای ساختن کنترل‌های ورودی در html	مثال
40	<ins>	یک خط زیر نوشته‌ها می‌کشد	مثال
41	<kbd>	تعریف ورودی‌های صفحه کلید	مثال
42	<lable>	تعریف یک برچسب برای کنترل‌های ورودی	مثال
43	<legend>	قرار دادن یک عنوان یا یک کپشن در تگ fieldset	مثال
44	<li>	تعریف یک آیتم در لیست	مثال
45	<link>	برای برقراری یک صفحه و یک فایل خارجی	مثال
46	<map>	ایجاد یک نقشه تصویری	مثال
47	<meta>	تعریف متاداده ها در سند	مثال
48	< noscript>	برای مرورگرهایی که script را پشتیبانی نمی‌کند،	مثال
49	< object>	برای پیوند یک شی (فایل‌های صوتی و تصویری) خارجی به سند	مثال
50	<ol>	ایجاد یک لیست ترتیبی در سند	مثال
51	<optgroup>	دسته بندی گزینه‌های یک لیست	مثال
52	<option>	مشخص کردن گزینه‌های لیست بازشو	مثال
53	<p>	برای ایجاد پاراگراف در صفحه	مثال
54	<param>	تعریف پارامترهای تگ object	مثال
55	<pre>	نمایش متن به همان صورت اولیه	مثال
56	<q>	ایجاد یک نقل قول کوتاه	مثال
57	<samp>	نمایش دادن متن مثل محیط برنامه‌نویسی	مثال
58	< script>	برای قرار دادن یک اسکریپت در صفحه	مثال
59	<small>	کوچکتر نشان دادن متن	مثال
60	<span>	برای تقسیم بندی متن موجود در صفحه	مثال
61	< strong>	متن را ضخیم می‌کند	مثال
62	<style>	مشخص کردن استایل‌ها در سند html	مثال
63	<sub>	ایجاد یک زیر نویس در متن	مثال
64	<sup>	ایجاد یک اندیس در متن	مثال
65	<table>	ایجاد جدول در صفحه	مثال
66	<tbody>	ایجاد بدنه‌ی اصلی جدول	مثال
67	<td>	ساخت سلول‌های یک جدول	مثال
68	<th>	ایجاد هدر ستون‌های جدول	مثال
69	<title>	ساخت عنوان سایت	مثال
70	<tr>	ایجاد سطر‌های جدول	مثال
71	<u>	خط کشیدن زیر یک متن	مثال
72	<ul>	ساخت لیست‌های نامرتب	مثال
73	<var>	تعریف متغیرها درسند html	مثال

تگ <--!>

اولین تگ از تگ‌های 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.jpg" 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>

تگ<b>

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

<!DOCTYPE html>
<html>
<body>

<b> Darsman.com </b>

</body>
</html>

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

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

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

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

تگ <i>

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

<!DOCTYPE html>
<html>
<body>

<i>Lorem ipsum</i>

</body>
</html>

تگ <img>

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

<!DOCTYPE html>
<html>
<body>

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

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

تگ<kbd>

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

<!DOCTYPE html>
<html>
<body>

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

</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.jpg" 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>

تگ <noscript>

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

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

تگ <object>

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

<!DOCTYPE html>
<html>
<body>


<object data="pic.jpg" 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>

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

تگ <q>

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

<!DOCTYPE html>
<html>
<body>

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

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

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

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

کلام آخر:

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

کلمات کلیدی :

html

توضیحاتی در مورد نویسنده این مقاله :

زهرا چگینی

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

نظرات

مونا تشکر بابت مقاله های عالی که منتشر می کنید خیلی ساده و روان موضوع رو بیان کردین و این در یادگیری بهتر خیلی به کاربران کمک می کند و برای کسانی که می خواهند وارد دنیای طراحی وب شوند این مقاله بسیار کاربردی است از خوندن این متن لذت بردم

برای پاسخ باید وارد شوید

پشتیبانی 1

سلام دوست عزیز وقت شما بخیر و نیکی.

خواهش می کنیم امیدواریم که برایتان کاربری باشد سعی کردیم تمامی تگ های مهم html را برای شما در این مقاله لیست کنیم و با خواندن این محتوا با تمامی تگ ها آشنا بشوید.

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

برای پاسخ باید وارد شوید

پشتیبانی 1

چقدر عالی که این محتوا در کامل کردن دانش شما در تگ های مهم html کمک کرده است. از نظر شما ممنونیم.

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

برای پاسخ باید وارد شوید

پشتیبانی 1

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

مهران سلام و عرض ادب خیلی متشکرم بابت دسته بندی و نظم دادن اطلاعات خیلی عااالیه

برای پاسخ باید وارد شوید

پشتیبانی 1

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

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

برای پاسخ باید وارد شوید

پشتیبانی 1

سلام دوست عزیز، چه عالی امیدواریم که از مطالب لذت برده باشید، با نظرات و پیشنهاداتتون ما را در این راه بسیار یاری می کنید و از شما ممنون هستیم.

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

برای پاسخ باید وارد شوید

پشتیبانی 1

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

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

برای پاسخ باید وارد شوید

پشتیبانی 1

سلام دوست کرامی ممنون از شما برای نظر مثبتتون، ما نهایت تلاشمان را کردیم که توضیحاتی کامل و جامع در اختیار شما عزیزان قرار بدهیم

Aramesh فراترررررر از عاااااااااااالی 💎❤👌👑🔥👏

برای پاسخ باید وارد شوید

پشتیبانی 1

خیلییی ممنونیم از شما و نگاه خوبتون

nb master مقالتون خیلی کامل بود ممنون من لیست کامل تگ ها رو میخواستم ولی تو هیچ سایتی مثل شما کامل و واضح نگفته بود مچکر

برای پاسخ باید وارد شوید

پشتیبانی 2

سلام دوست عزیز، وقت شما به خیر باشه.

ممنونیم از حسن انتخاب شما و اینکه درسمن را انتخاب کردید خیلی خوشحال هستیم، بازم ممنونم از نظر و محبت شما، پیروز باشید.

mohsen neri عالی بود عالی بود عالیییی... خیلی خوبه با چند دقیقه وقت گذاشتن بشه مطلبی به این پرمحتوایی یاد گرفت...موفق باشین

برای پاسخ باید وارد شوید

پشتیبانی 1

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

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

برای پاسخ باید وارد شوید

پشتیبانی 1

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

اگر هم قصد دارید html رو هم تخصصی یاد بگیرید می تونید از دوره آموزشی html ما استفاده کنید

صابر شاه حسینی من خیلی به خوندن مقاله های برنامه نویسی و طراحی وب علاقه دارم به همین خاطر هر سایتی که میرم یه سری به مقالات میزنم ببینم درباره این حوزه چه مطالبی دارن و از خوندن این مقالتون بسیار لذت بردم...موفق باشین

برای پاسخ باید وارد شوید

پشتیبانی 1

سلام مچکر کاربر گرامی، خیلی خوشحالیم که نظرات مثبتتون رو با ما درمیان می گذارید.

پویا ترکمن مقالتون هم دقیقا شبیه عنوانیه که براش انتخاب کردین واقعا در جای دیگه ای چنین مطلبی رو کامل و جامع نمیشه پیدا کرد شما به خوبی تگ های اچ تی ام ال رو توضیح دادین سپاس فراوان

برای پاسخ باید وارد شوید

پشتیبانی 1 ممنون از محبت و توجه شما، بله ما تمام تلاش خودمان را می کنیم تا بهترین محتوا ها را در اختیار شما قرار دهیم، چون شما لایق بهترین ها هستید.

نیکا رحمتی میتونستم بگم کامل ترین مقاله ای بود که درباره تگ های html خوندم و میخاستم درخواست کنم اگر تگ جدید دیگه ای هم هست تو مطلب بیارید ممنون

برای پاسخ باید وارد شوید

پشتیبانی 1 سلام و درود فراوان بر شما، بله تا جایی که ممکن بود سعی کردیم مهم ترین و کاربردی ترین تگ های html را برای شما عزیزان در یک محتوا جمع آوری کنیم. امیدوارم مفید واقع شده باشد.