آدرس

تهران، خیابان شریعتی، بالاتر از سه راه ملک، روبروی آتش نشانی

شماره تماس

۰۹۱۹۳۴۲۶۲۵۱
۰۲۱۹۱۳۰۳۴۲۴

آدرس ایمیل

info@artarasaneh.com
artarasaneh@gmail.com

وبلاگ
راهنمای کامل تگ‌های HTML

راهنمای کامل تگ‌های HTML

  • thumb
    توسط مریم گوهرزاد
  • طراحی سایت
  • اوت 17, 2025
  • 11 دقیقه زمان خواندن
  • 466 بازدید

در این مقاله تمام تگ‌های HTML به صورت کامل و کاربردی آموزش داده شده‌اند.با مثال‌های عملی یاد بگیرید چگونه صفحات وب حرفه‌ای طراحی کنید.

HTML مخفف Hyper Text Markup Language است و به معنای «زبان نشان‌گذاری ابر متن» است. این زبان، پایه و اساس هر صفحه وب و نقطه شروع برنامه‌نویسی سایت محسوب می‌شود و به مرورگرها می‌گوید که محتوای یک صفحه وب چگونه باید نمایش داده شود. در واقع، HTML ساختار و اسکلت صفحات وب را مشخص می‌کند.

Table of contents [Show] [Hide]

ساختار کلی HTML

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

تعریف نوع سند   DOCTYPE html  

در بالای هر فایل HTML معمولاً می‌بینیم:

<!DOCTYPE html>

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

 تگ html

تمام محتوای صفحه داخل تگ html قرار می‌گیرد:

<html lang="fa">
   ...
</html>

ویژگی lang="fa" مشخص می‌کند زبان صفحه فارسی است، که برای موتورهای جستجو و ابزارهای دسترسی‌ پذیری مهم است. این تگ به مرورگر می‌گوید: «همه محتوای این سند HTML است».

تگ head

تگ head در HTML بخشی از ساختار صفحه است که اطلاعات پشت‌صحنه (یا همان اطلاعات متا) را در خود نگه می‌دارد. این بخش چیزی را مستقیماً روی صفحه نمایش نمی‌دهد، اما برای مرورگرها، موتورهای جستجو و حتی شبکه‌های اجتماعی اهمیت زیادی دارد.

<head>
   <meta charset=UTF-8>
   <title>عنوان صفحه</title>
   <link rel="stylesheet" href="style.css">
</head>

تگ body

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

در واقع اگر head بخش مدیریتی و پنهان صفحه باشد، body همان بخش نمایشی است.

<body>
   <h1>سلام دنیا!</h1>
   <p>این یک پاراگراف نمونه است.</p>
</body>

نمونه کامل ساختار یک صفحه HTML ساده

<!DOCTYPE html>
<html lang="fa">
<head>
   <meta charset=UTF-8>
   <title>نمونه صفحه HTML</title>
</head>
<body>
   <h1>سلام دنیا!</h1>
   <p>این یک پاراگراف نمونه است.</p>
</body>
</html>

این ساختار پایه هر فایل HTML است و هر صفحه وب حتی اگر پیچیده باشد، همین اسکلت را دارد.

پیشنهاد مطالعه: لیست کامل عناصر css

تگ‌های متنی Text Tags 

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

تیترهاh1 تا h6 

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

<h1>تیتر اصلی</h1>
<h2>تیتر فرعی</h2>
<h3>تیتر کوچک‌تر</h3>

تگ‌های تیتر در HTML از h1 تا h6 برای عنوان‌ گذاری و بخش‌ بندی محتوا به کار می‌روند. h1 مهم‌ ترین تیتر است و معمولاً عنوان اصلی صفحه محسوب می‌شود، در حالی که h2 تا h6 برای عنوان‌های فرعی و زیر مجموعه‌ها استفاده می‌شوند.

این تیترها علاوه بر اینکه متن را برای کاربر خواناتر می‌کنند، به موتورهای جستجو هم کمک می‌کنند تا موضوع و ساختار صفحه را بهتر درک کنند و همین باعث بهبود سئو می‌شود.

پاراگراف p 

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

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

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

به طور خلاصه، p یکی از پرکاربرد ترین تگ‌های HTML است چون تقریباً هر صفحه وب به متن و پاراگراف نیاز دارد.

خط جدید و خط افقی br وhr

br: تگ br در HTML برای ایجاد شکست خط (Line Break) استفاده می‌شود. یعنی متن بعد از آن از خط جدید شروع می‌شود، بدون اینکه یک پاراگراف جدید ساخته شود.

<p>این خط اول است.<br>این خط دوم است.</p>

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

hr: تگ hr در HTML برای ایجاد یک خط افقی در صفحه استفاده می‌شود. این خط معمولاً برای جدا کردن بخش‌های مختلف محتوا به کار می‌رود و مرورگر آن را به صورت یک خط افقی ساده نمایش می‌دهد.

<hr>

به طور خلاصه، hr مثل یک مرز یا جداکننده برای بخش‌های محتوا عمل می‌کند.

متن پررنگ و ایتالیک strong, b, em, i 

strong: برای پررنگ کردن متن با تأکید معنایی استفاده می‌شود، یعنی هم پررنگ است و هم نشان می‌دهد این متن اهمیت دارد.
b: فقط پررنگ می‌کند بدون معنی خاص.
em: متن را ایتالیک با تأکید معنایی می‌کند و i فقط ایتالیک ظاهری است.

<p><strong>این متن پررنگ و مهم است</strong></p>

متن کوچک، زیرنویس و برچسب‌ها

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

small: متن را کوچک‌تر از اندازه معمولی نمایش می‌دهد و معمولاً برای توضیحات جانبی یا متن‌های کم‌ اهمیت به کار می‌رود.

sub: متن را زیر نویس می‌کند، یعنی کمی پایین‌تر از خط اصلی قرار می‌گیرد، مثل فرمول‌های شیمیایی: H₂O.

sup: متن را بالا نویس می‌کند، یعنی کمی بالاتر از خط اصلی قرار می‌گیرد، مثل توان ریاضی: x².

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

<p>آب: H<sub>2</sub>O</p>
<p>توان: x<sup>2</sup></p>
<p><small>این متن کوچک است.</small></p>

نقل قول و متن پیش‌فرمت شده

در HTML برای نقل قول و متن پیش‌ فرمت شده چند تگ مهم داریم:

blockquote: برای نقل قول‌های طولانی از یک منبع به کار می‌رود و معمولاً متن را با فاصله اضافی یا تورفتگی نمایش می‌دهد تا مشخص شود یک نقل قول است.

q: برای نقل قول‌های کوتاه داخل یک جمله استفاده می‌شود و معمولاً مرورگر آن را با علامت نقل قول (“ ”) نمایش می‌دهد.

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

<blockquote>
این یک نقل قول طولانی است که از یک مقاله گرفته شده است.
</blockquote>
<pre>
این متن
حفظ فاصله و خطوط را دارد
</pre>
<p>او گفت: <q>این یک نقل قول کوتاه است.</q></p>

تگ‌های لینک و ناوبری Links & Navigation 

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

لینک‌ها با تگ  a  ساخته می‌شوند. این تگ کوتاه شده “anchor” است و به مرورگر می‌گوید این متن یا عنصر، قابل کلیک است و کاربر را به یک مقصد هدایت می‌کند.

مهم‌ترین ویژگی‌ها یا attributes تگ a عبارتند از:

href: این صفت مسیر مقصد لینک را مشخص می‌کند و می‌تواند به یک صفحه داخلی سایت، یک سایت خارجی یا حتی یک فایل اشاره کند.

<a href="https://www.example.com">رفتن به سایت مثال</a>

target: صفت target در تگ a مشخص می‌کند لینک وقتی کلیک شد در کجا باز شود. برای مثال اگر target="_self" باشد، لینک در همان صفحه باز می‌شود (که معمولاً پیش‌فرض است) و اگر target="_blank" باشد، لینک در یک تب یا پنجره جدید باز می‌شود.

<a href="https://www.example.com" target="_blank">باز کردن در تب جدید</a>

rel: صفت rel در تگ a برای مشخص کردن رابطه لینک با صفحه مقصد استفاده می‌شود و هم برای امنیت و هم برای سئو اهمیت دارد.

برای مثال وقتی لینک با target="_blank" باز می‌شود، معمولاً از rel="noopener" یا rel="noreferrer" استفاده می‌کنند تا جلوی دسترسی صفحه مقصد به صفحه فعلی گرفته شود و از خطرات امنیتی جلوگیری شود. همچنین برخی مقادیر دیگر می‌توانند موتورهای جستجو را راهنمایی کنند که این لینک چه نوع رابطه‌ای با صفحه دارد.

<a href="https://www.example.com" target="_blank" rel="noopener">مثال امن</a>

تگ a محدود به متن نیست و می‌توان هر عنصر HTML را به لینک تبدیل کرد. یعنی می‌توان تصاویر، دکمه‌ها، یا حتی کل یک بلوک محتوا را کلیک‌ پذیر کرد تا کاربر به مقصد مورد نظر هدایت شود. این ویژگی باعث می‌شود طراحی وب تعامل‌ پذیرتر و کاربر پسندتر باشد.

مثال با تصویر:

<a href="https://www.example.com">
  <img src=logo.png alt="لوگو">
</a>

مثال با بلوک کامل:

<a href="page2.html">
 <div >
  این یک بلوک کلیک‌پذیر است
 </div>
</a>

تگ‌های تصویر و رسانه Images & Media 

در صفحات وب، نمایش تصاویر، ویدیو و صدا نقش بسیار مهمی دارد. HTML تگ‌هایی دارد که این نوع محتواها را به راحتی وارد صفحه می‌کند و به مرورگر می‌گوید چگونه نمایش داده شوند.

تصاویر با img 

تگ img برای نمایش تصاویر در صفحات وب استفاده می‌شود و چند ویژگی اصلی دارد که اهمیت زیادی دارند. صفت src مسیر تصویر را مشخص می‌کند و بدون آن تصویر نمایش داده نمی‌شود. صفت alt متنی است که جای تصویر نشان داده می‌شود، مخصوصاً زمانی که تصویر بارگذاری نمی‌شود یا برای ابزارهای کمکی مانند صفحه‌ خوان افراد نابینا استفاده می‌شود؛ این صفت علاوه بر کمک به دسترسی، برای سئو هم مفید است. همچنین صفت‌های width و height ابعاد تصویر را تنظیم می‌کنند تا در صفحه با اندازه مناسب نمایش داده شود و ساختار صفحه حفظ شود.

<img src=flower.jpg alt="یک گل زیبا" width=300 height=200>

در این مثال، تصویر “flower.jpg” با عرض ۳۰۰ پیکسل و ارتفاع ۲۰۰ پیکسل نمایش داده می‌شود و اگر بارگذاری نشود، متن “یک گل زیبا” نمایش داده می‌شود.

ویدیو با video 

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

<video controls width=600 autoplay muted>
  <source src=video.mp4 type=video/mp4>
  مرورگر شما از پخش ویدیو پشتیبانی نمی‌کند.
</video>

صفت controls باعث می‌شود مرورگر به طور خودکار دکمه‌های پخش، توقف، صدا و جلو و عقب رفتن ویدیو را نمایش دهد. صفت src یا استفاده از تگ source مسیر فایل ویدیو و فرمت آن را مشخص می‌کند تا مرورگر بداند کدام ویدیو را بارگذاری کند. علاوه بر این، می‌توان صفت‌هایی مثل autoplay برای شروع خودکار پخش، loop برای تکرار ویدیو و muted برای بی‌صدا کردن پیش‌فرض ویدیو استفاده کرد. این صفت‌ها باعث می‌شوند ویدیو هم قابل کنترل برای کاربر و هم سازگار با مرورگرهای مختلف باشد.

صدا با audio 

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

<audio controls>
 <source src=music.mp3 type=audio/mpeg>
 مرورگر شما صدا را پشتیبانی نمی‌کند.
</audio>

تگ audio برای پخش صدا استفاده می‌شود و صفت controls باعث می‌شود مرورگر دکمه‌های پخش و توقف صدا را نمایش دهد. تگ source مسیر فایل صوتی و فرمت آن را مشخص می‌کند تا مرورگر بداند کدام فایل را بارگذاری و پخش کند.

تصاویر و توضیحات با figure و figcaption

تگ figure در HTML برای گروه‌ بندی تصاویر یا محتوای بصری استفاده می‌شود و معمولاً همراه با تگ figcaption به کار می‌رود تا توضیح یا کپشن تصویر را نمایش دهد. این کار باعث می‌شود هم ساختار صفحه منظم‌تر باشد و هم موتورهای جستجو و ابزارهای دسترسی بتوانند محتوا را بهتر درک کنند.

یک تصویر همراه با توضیح آن می‌تواند به این شکل نوشته شود:

<figure>
  <img src=flower.jpg alt="یک گل زیبا">
  <figcaption>این یک گل زیبا است که در باغچه رشد کرده.</figcaption>
</figure>

در مثال بالا، figure تصویر را در یک بلوک مستقل قرار می‌دهد و figcaption توضیح تصویر را ارائه می‌کند، بدون اینکه با متن اصلی صفحه تداخل داشته باشد.

با این تگ‌ها می‌توان صفحه‌های وب جذاب با تصاویر، ویدیو و صدا ساخت و تجربه کاربری بهتری ارائه داد.

تگ‌های لیست Lists

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

لیست‌های نامرتب ul

لیست نامرتب برای مواردی که ترتیب مهم نیست، استفاده می‌شود. هر آیتم لیست با li مشخص می‌شود.

<ul>
   <li>سیب</li>
   <li>موز</li>
   <li>پرتقال</li>
</ul>

تگ ul برای ایجاد لیست نامرتب استفاده می‌شود و هر مورد لیست با li مشخص می‌شود. مرورگر به طور پیش‌ فرض هر آیتم را با یک نقطه (bullet) نمایش می‌دهد تا محتوا به شکل منظم و قابل خواندن دیده شود.

لیست‌های مرتب ol

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

<ol>
   <li>ثبت نام در سایت</li>
   <li>تکمیل فرم اطلاعات</li>
   <li>تایید ایمیل</li>
</ol>

تگ ol برای ایجاد لیست مرتب استفاده می‌شود و هر آیتم آن با li مشخص می‌شود. مرورگر به طور پیش‌ فرض آیتم‌ها را به ترتیب شماره‌گذاری (1, 2, 3 …) نمایش می‌دهد تا ساختار و ترتیب محتوا واضح باشد.

لیست‌های تو در تو Nested Lists

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

<ul>
   <li>میوه‌ها
       <ul>
           <li>سیب</li>
           <li>موز</li>
       </ul>
   </li>
   <li>سبزیجات
       <ul>
           <li>هویج</li>
           <li>گوجه فرنگی</li>
       </ul>
   </li>
</ul>

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

لیست‌های تعریف dl, dt, dd

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

<dl>
   <dt>HTML</dt>
   <dd>زبان نشانه‌گذاری صفحات وب</dd>
   <dt>CSS</dt>
   <dd>زبان طراحی ظاهر صفحات وب</dd>
</dl>

تگ dl برای ایجاد لیست تعریف استفاده می‌شود که شامل واژه‌ها و توضیح‌های آن‌ هاست. هر واژه با dt مشخص می‌شود و تعریف یا توضیح آن با dd نوشته می‌شود. این ساختار برای نمایش تعاریف، اصطلاحات یا جفت‌های سؤال و پاسخ مناسب است و محتوا را منظم و خوانا می‌کند.

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

تگ‌های جدول Tables

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

ساختار اصلی جدول

تگ‌های اصلی جدول عبارتند از:

table: مشخص می‌کند که این یک جدول است.

tr: یک ردیف (Row) در جدول را مشخص می‌کند.

th: سلول عنوان یا سرستون جدول، معمولاً متن آن پررنگ و وسط‌چین است.

td: سلول داده (Data) در جدول، برای نمایش محتوا استفاده می‌شود.

<table border=1>
   <tr>
       <th>نام</th>
       <th>سن</th>
       <th>شغل</th>
   </tr>
   <tr>
       <td>علی</td>
       <td>25</td>
       <td>برنامه‌نویس</td>
   </tr>
   <tr>
       <td>سارا</td>
       <td>30</td>
       <td>طراح گرافیک</td>
   </tr>
</table>

افزودن سطر و ستون بیشتر

برای اضافه کردن سطرها کافی است tr جدید اضافه کنیم و ستون‌ها با <td> مشخص می‌شوند.

<tr>
   <td>محمد</td>
   <td>28</td>
   <td>مهندس</td>
</tr>

ترکیب سلول‌ها Colspan و Rowspan

گاهی نیاز داریم یک سلول چند ستون یا چند ردیف را پوشش دهد:

<table border=1>
   <tr>
       <th>نام</th>
       <th colspan="2">اطلاعات</th>
   </tr>
   <tr>
       <td>علی</td>
       <td>25</td>
       <td>برنامه‌نویس</td>
   </tr>
</table>

colspan="2" باعث می‌شود سلول عنوان “اطلاعات” دو ستون را پوشش دهد.

مثال ترکیب ردیف‌ها:

<table border=1>
   <tr>
       <th rowspan="2">نام</th>
       <th>سن</th>
       <th>شغل</th>
   </tr>
   <tr>
       <td>25</td>
       <td>برنامه‌نویس</td>
   </tr>
</table>

rowspan="2" باعث می‌شود سلول “نام” دو ردیف را پوشش دهد.

استفاده از caption برای عنوان جدول

می‌توان به جدول یک عنوان داد تا موضوع آن مشخص شود:

<table border=1>
   <caption>لیست کارمندان شرکت</caption>
   <tr>
       <th>نام</th>
       <th>سن</th>
       <th>شغل</th>
   </tr>
   <tr>
       <td>علی</td>
       <td>25</td>
       <td>برنامه‌نویس</td>
   </tr>
</table>

<caption> معمولاً بالای جدول نمایش داده می‌شود و موضوع جدول را توضیح می‌دهد.

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

تگ‌های فرم Forms 

در HTML، فرم‌ها برای دریافت اطلاعات از کاربر استفاده می‌شوند. فرم‌ها بخش مهمی از وب‌ سایت‌ها هستند، مثلاً فرم ثبت‌ نام، ورود، ارسال پیام یا جستجو.

تگ اصلی فرم: form 

 form  همه عناصر فرم را شامل می‌شود.

مهم‌ترین ویژگی‌ها:

action: مسیر یا آدرس سروری که اطلاعات فرم به آن ارسال می‌شود.

method: روش ارسال اطلاعات GET یا POST.

<form action="/submit-form" method="post">
   <!-- عناصر فرم اینجا قرار می‌گیرند -->
</form>

عناصر ورودی فرم

تگ  input 

تگ  input  یکی از مهم‌ترین عناصر فرم است که انواع مختلفی دارد:

متن (text) برای دریافت متن کوتاه:

<label>نام:</label>
<input type=text name=name>

ایمیل (email) برای دریافت ایمیل:

<label>ایمیل:</label>
<input type=email name=email>

رمز عبور (password) برای دریافت پسورد:

<label>رمز عبور:</label>
<input type=password name=password>

چک‌باکس (checkbox) برای انتخاب گزینه‌ها:

<label><input type=checkbox name=newsletter> مشترک خبرنامه</label>

رادیو (radio) برای انتخاب یک گزینه از چند مورد:

<label><input type=radio name=gender value="male"> مرد</label>
<label><input type=radio name=gender value="female"> زن</label>

دکمه ارسال (submit) برای ارسال فرم:

<input type=submit value="ارسال">

تگ textarea 

برای دریافت متن طولانی یا پیام کاربر استفاده می‌شود:

<label>پیام:</label>
<textarea name=message rows="5" cols="30"></textarea>

تگ select و option 

برای ایجاد منوی کشویی (Dropdown) استفاده می‌شوند:

<label>کشور:</label>
<select name=country>
   <option value="iran">ایران</option>
   <option value="usa">آمریکا</option>
   <option value="france">فرانسه</option>
</select>

تگ label 

برای توضیح یا نامگذاری هر فیلد استفاده می‌شود. وقتی روی متن label کلیک شود، تمرکز روی فیلد مرتبط می‌رود:

<label for="username">نام کاربری:</label>
<input type=text id="username" name=username>

نمونه کامل فرم

<form action="/submit-form" method="post">
   <label for="name">نام:</label>
   <input type=text id="name" name=name><br><br>
   <label for="email">ایمیل:</label>
   <input type=email id="email" name=email><br><br>
   <label>جنسیت:</label>
   <input type=radio name=gender value="male"> مرد
   <input type=radio name=gender value="female"> زن<br><br>
   <label>علایق:</label>
   <input type=checkbox name=sports value="sports"> ورزش
   <input type=checkbox name=music value="music"> موسیقی<br><br>
   <label for="message">پیام:</label>
   <textarea id="message" name=message rows="5" cols="30"></textarea><br><br>
   <label for="country">کشور:</label>
   <select id="country" name=country>
       <option value="iran">ایران</option>
       <option value="usa">آمریکا</option>
       <option value="france">فرانسه</option>
   </select><br><br>
   <input type=submit value="ارسال">
</form>

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

تگ‌های بخش‌بندی و ساختاری Structural Tags

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

تگ header 

تگ header برای بخش بالایی صفحه یا یک قسمت مشخص استفاده می‌شود و معمولاً شامل عنوان، لوگو یا منوی ناوبری است. این تگ می‌تواند مستقیماً داخل body قرار گیرد یا درون یک section برای بخش‌ بندی خاص استفاده شود تا ساختار صفحه منظم‌تر و قابل درک‌تر شود.

<header>
   <h1>وب‌سایت من</h1>
   <nav>
       <a href="#home">خانه</a>
       <a href="#about">درباره ما</a>
       <a href="#contact">تماس</a>
   </nav>
</header>

تگ footer 

footer بخش پایین صفحه یا پایان یک بخش را مشخص می‌کند و معمولاً شامل کپی‌ رایت، اطلاعات تماس یا لینک‌های اضافی است.

<footer>
   <p>© 2025 همه حقوق محفوظ است.</p>
   <a href="privacy.html">سیاست حریم خصوصی</a>
</footer>

تگ main 

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

<main>
   <h2>محصولات جدید</h2>
   <p>در این بخش محصولات تازه فروشگاه را مشاهده می‌کنید.</p>
</main>

تگ section

تگ section برای تقسیم‌ بندی محتوا به بخش‌های مستقل و مرتبط استفاده می‌شود. هر بخش معمولاً یک عنوان مانند h2 یا h3 دارد تا مشخص شود محتوای آن درباره چه موضوعی است و ساختار صفحه واضح و منظم باقی بماند.

<section id="about">
   <h2>درباره ما</h2>
   <p>ما یک تیم توسعه وب با تجربه هستیم که پروژه‌های مختلف طراحی و برنامه‌نویسی انجام می‌دهیم.</p>
</section>

تگ article

تگ article برای محتوای مستقل و کامل مثل مقاله، پست وبلاگ یا خبر استفاده می‌شود. هر article می‌تواند شامل بخش‌های مختلفی مانند header, footer, section و دیگر عناصر HTML باشد تا ساختار محتوا واضح و قابل استفاده برای کاربران و موتورهای جستجو باشد.

<article>
   <h2>عنوان مقاله</h2>
   <p>این مقاله درباره اهمیت طراحی واکنش‌گرا در وب است.</p>
   <footer>نوشته شده توسط تیم ما، 2025</footer>
</article>

تگ aside

aside برای محتوای جانبی یا حاشیه‌ای استفاده می‌شود که مرتبط با محتوای اصلی است، مثل تبلیغات یا لینک‌های مرتبط.

<aside>
   <h3>مطالب مرتبط</h3>
   <ul>
       <li><a href="#article1">مقاله ۱</a></li>
       <li><a href="#article2">مقاله ۲</a></li>
   </ul>
</aside>

تگ div

div یک تگ عمومی بخش‌ بندی است که معنای خاصی ندارد، اما برای گروه‌ بندی عناصر و اعمال CSS یا جاوا اسکریپت استفاده می‌شود.

<div >
  <h2>بخش نمونه</h2>
  <p>این بخش با div گروه‌بندی شده است.</p>
</div>

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

تگ‌های معنایی و کاربردی Semantic & Utility Tags

در HTML، تگ‌های معنایی (Semantic Tags) به مرورگر و موتور جستجو می‌گویند که محتوای داخل آنها چه نوع اطلاعاتی است. این باعث می‌شود صفحه ساختارمندتر، قابل دسترس‌تر و سئو-دوست‌تر باشد.

تگ strong و b

strong: برای تأکید روی اهمیت متن است و مرورگر معمولاً آن را پر رنگ نشان می‌دهد. این تگ معنایی دارد و موتورهای جستجو هم اهمیت آن را می‌فهمند.

b: فقط متن را پررنگ می‌کند ولی معنای خاصی ندارد.

<p>این متن <strong>خیلی مهم</strong> است و باید به آن توجه شود.</p>
<p>این متن <b>پررنگ</b> است ولی معنای خاصی ندارد.</p>

تگ em و i

em: برای تأکید یا نکته مهم در متن است و معمولاً ایتالیک نشان داده می‌شود.

i: فقط متن را ایتالیک می‌کند بدون معنای خاص.

<p>این جمله <em>بسیار تأکیدی</em> است.</p>
<p>این متن <i>ایتالیک</i> است بدون تأکید معنایی.</p>

تگ mark

برای هایلایت کردن متن استفاده می‌شود، مثلاً نکات مهم یا جستجوهای کاربر.

<p>کلمه <mark>HTML</mark> در این متن برجسته شده است.</p>

تگ abbr 

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

<p>تگ <abbr title="HyperText Markup Language">HTML</abbr> برای ساخت صفحات وب استفاده می‌شود.</p>

تگ cite

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

<p>این جمله از کتاب <cite>تاریخچه وب</cite> نقل شده است.</p>

تگ time

برای نمایش تاریخ یا زمان به صورت معنایی و استاندارد.

<p>تاریخ انتشار مقاله: <time datetime="2025-08-17">17 آگوست 2025</time></p>

تگ code و pre

code: برای نمایش کد برنامه‌ نویسی یا دستورات استفاده می‌شود.

pre: متن را با فرمت اصلی و فاصله‌ها نمایش می‌دهد.

<pre>
<code>
function hello() {
   console.log("سلام دنیا!");
}
</code>
</pre>

تگ span

span یک تگ جدا کننده و کاربردی بدون معنای خاص است و برای اعمال CSS یا جاوا اسکریپت روی بخش‌های کوچک متن استفاده می‌شود.

<p>این متن <span >قرمز</span> است.</p>

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

پیشنهاد مطالعه: روش تبدیل قالب HTML به قالب وردپرس

تگ‌های مدرن و HTML5

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

تگ video

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

ویژگی‌های مهم:

در تگ‌های video و <audio چند صفت مهم وجود دارد که رفتار پخش را کنترل می‌کنند. صفت controls باعث می‌شود مرورگر دکمه‌های پخش، توقف و تنظیم صدا را نمایش دهد. با استفاده از autoplay می‌توان ویدیو یا صدا را به صورت خودکار هنگام بارگذاری صفحه پخش کرد، و صفت loop باعث می‌شود فایل به صورت مداوم و خودکار تکرار شود تا پس از پایان دوباره شروع شود.

<video width=320 height=240 controls>
 <source src=video.mp4 type=video/mp4>
 مرورگر شما از ویدیو پشتیبانی نمی‌کند.
</video>

تگ audio

تگ audio برای پخش صدا و موسیقی در صفحات وب استفاده می‌شود و عملکرد آن شباهت زیادی به تگ video دارد. می‌توان کنترل‌هایی مثل پخش، توقف، جلوو عقب و تنظیم صدا را فعال کرد و از صفت‌هایی مانند autoplay و loop برای مدیریت نحوه پخش صدا استفاده نمود.

<audio controls>
 <source src=music.mp3 type=audio/mpeg>
 مرورگر شما از صدا پشتیبانی نمی‌کند.
</audio>

تگ canvas

تگ canvas در HTML برای رسم گرافیک، نمودار، بازی‌ها یا انیمیشن‌های دینامیک به کار می‌رود. این تگ خودش محتوا ندارد و برای نمایش چیزی باید از جاوا اسکریپت استفاده شود تا عناصر گرافیکی به صورت پویا روی آن کشیده شوند.

<canvas id="myCanvas" width=200 height=100 ></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(20, 20, 150, 50);
</script>

تگ section و article (تکمیل HTML5)

تگ section برای تقسیم‌ بندی معنایی محتوا استفاده می‌شود، در حالی که article برای محتوای مستقل مثل مقاله، خبر یا پست وبلاگ کاربرد دارد. این تگ‌ها در HTML5 به جای div به کار می‌روند تا علاوه بر ساختار بندی صفحه، معنای محتوایی نیز به عناصر اضافه کنند و دسترسی و درک صفحه برای مرورگرها و موتورهای جستجو بهتر شود.

<section>
 <h2>اخبار سایت</h2>
 <article>
   <h3>عنوان خبر</h3>
   <p>متن خبر در اینجا قرار می‌گیرد.</p>
 </article>
</section>

تگheader و footer (مدرن)

تگ‌های header و footer برای مشخص کردن بخش‌های بالایی و پایینی صفحه یا یک بخش خاص استفاده می‌شوند. در HTML5 این تگ‌ها نسبت به div معنای معنایی بیشتری دارند و به مرورگرها و موتورهای جستجو کمک می‌کنند تا ساختار و نقش هر بخش از صفحه را بهتر درک کنند.

تگ nav

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

تگ aside

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

تگ figure و figcaption

تگ figure برای گروه‌ بندی تصاویر و محتوای بصری همراه با توضیحات استفاده می‌شود. معمولاً همراه با figcaption به کار می‌رود تا توضیح یا کپشن تصویر نمایش داده شود و هم خوانایی صفحه افزایش یابد و هم معنای محتوای تصویر برای موتورهای جستجو مشخص شود.

<figure>
 <img src=image.jpg alt="نمونه تصویر">
 <figcaption>این توضیح تصویر است.</figcaption>
</figure>

تگ progress و meter

progress: برای نمایش میزان پیشرفت یک فرآیند استفاده می‌شود.

meter: برای نمایش مقدار سنجشی که در محدوده مشخص است، کاربرد دارد.

مثال progress:

<label>دانلود فایل:</label>
<progress value="70" max="100"></progress>

مثال meter:

<label>دما:</label>
<meter value="22" min="0" max="50">22°C</meter>

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

نکات تکمیلی

وقتی شما HTML می‌نویسید، مهم است که کد شما فقط کار نکند، بلکه قابل فهم، بهینه و استاندارد باشد. رعایت استانداردها به مرورگرها کمک می‌کند تا محتوای شما را به درستی نمایش دهند و همچنین باعث می‌شود موتورهای جستجو بهتر متوجه ساختار صفحه شما شوند. به همین دلیل استفاده از کد معتبر و استاندارد W3C بسیار مهم است و ابزارهایی مانند W3C Validator می‌توانند خطاها و هشدارهای احتمالی را نشان دهند تا آن‌ها را اصلاح کنید.

یکی دیگر از نکات مهم، استفاده از تگ‌های معنایی است. وقتی شما از تگ‌هایی مانند <header>, <footer>, <article> و <section> استفاده می‌کنید، صفحه شما فقط برای مرورگرها معنی پیدا نمی‌کند بلکه برای موتورهای جستجو و کاربران با ابزارهای دسترسی مثل screen readerها نیز قابل فهم می‌شود. این کار به تجربه کاربری بهتر و سئو سایت قوی‌تر منجر می‌شود.

دسترسی یا Accessibility یکی از جنبه‌های حیاتی صفحات وب است. به عنوان مثال هر تصویری که در صفحه قرار می‌دهید باید دارای صفت alt باشد تا کاربران دارای اختلال بینایی بتوانند محتوای تصویر را درک کنند. همچنین استفاده از ویژگی‌های aria-label و role در عناصر تعاملی کمک می‌کند تا صفحه برای همه کاربران قابل استفاده باشد.

سرعت بارگذاری صفحات نیز نکته بسیار مهمی است. تصاویر و ویدیوها باید بهینه و فشرده باشند تا صفحه سریع‌تر بارگذاری شود. روش های بهینه سازی تصاویر سایت را مطالعه کنید.  HTML5 ویژگی‌هایی مثل loading="lazy" برای تصاویر ارائه کرده است که باعث می‌شود تصاویر فقط زمانی که کاربر به آن‌ها می‌رسد بارگذاری شوند و در نتیجه سرعت صفحه بهتر شود. علاوه بر این، نگهداری و سازماندهی کد با تورفتگی مناسب و کامنت‌گذاری برای توضیح بخش‌های مهم، خوانایی کد را بالا می‌برد و نگهداری آن در آینده آسان‌تر می‌شود.

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

استفاده از ویژگی‌ها و تگ‌های مدرن HTML5 مانند <video>, <audio>, <canvas>, <progress> و <meter> باعث می‌شود نیاز به افزونه‌ها و کدهای اضافی کاهش پیدا کند و صفحات شما هم به‌روز و استاندارد باقی بمانند. فرم‌ها هم با HTML5 قابلیت‌های جدیدی پیدا کرده‌اند؛ برای مثال استفاده از type=email و required می‌تواند اعتبارسنجی اولیه فرم‌ها را بدون نیاز به جاوااسکریپت انجام دهد. در صورتی که به آموزش جاوااسکریپت علاقه دارید کلیک کنید.

در نهایت، مهم است که صفحات خود را در مرورگرها و دستگاه‌های مختلف تست کنید. این کار تضمین می‌کند که ظاهر و عملکرد صفحه در دسکتاپ، موبایل و تبلت صحیح است و کاربران تجربه یکسانی دارند.

سخن پایانی

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

در طول این مقاله، دیدیم که HTML تنها شامل تگ‌های ساده برای متن و تصاویر نیست، بلکه با استفاده از تگ‌های معنایی، فرم‌ها، لیست‌ها، جداول، بخش‌بندی‌ها و ویژگی‌های مدرن HTML5 می‌توان صفحات وبی ساخت که هم از نظر طراحی جذاب باشند و هم از نظر عملکرد و دسترسی بهینه باشند. نکات تکمیلی مانند رعایت استانداردها، بهینه‌سازی سرعت، دسترسی‌پذیری و سازماندهی کد باعث می‌شوند صفحات شما حرفه‌ای‌تر و قابل اعتمادتر شوند.

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

برچسب ها:
    اشتراک گذاری :
    مریم گوهرزاد
    نویسنده

    مریم گوهرزاد

    مدرس و بنیانگذار هلدینگ آرتا رسانه. برنامه نویس و محقق حوزه بلاکچین

    نظر خودتون رو با ما در میون بزارید

    فیلدهای ستاره دار الزامی هستند . ایمیل شما منتشر نمیشود.

    https://t.me/artarasaneh
    tel:09193426251
    https://wa.me/+989193426251
    https://instagram.com/artarasaneh_com