اگر وارد دنیای طراحی سایت شده باشید، احتمالاً اولین واژه‌ای که با آن روبه‌رو می‌شوید HTML است. HTML اسکلت اصلی هر وب‌سایتی را می‌سازد و بدون آن، هیچ صفحه‌ای در مرورگر نمایش داده نمی‌شود. اما HTML به‌تنهایی معنا ندارد؛ این تگ های HTML هستند که به محتوا ساختار و مفهوم می‌دهند.
تگ‌ها به مرورگر می‌گویند هر بخش از صفحه چه نقشی دارد: عنوان است، متن ساده است، تصویر است یا لینک. به همین دلیل، یادگیری درست و اصولی تگ‌های HTML برای هر دانشجوی طراحی سایت ضروری است.
در این مقاله تلاش کرده‌ایم یک مرجع سریع، آموزشی از تگ های HTML بسازیم؛ به‌طوری که هم برای مرور سریع عالی باشد و هم برای یادگیری عمیق، مثال‌محور و کاربردی.
جدول کامل تگ های HTML
این جدول شامل تمام تگ‌هایی است که در این مقاله توضیح داده شده‌اند
| نام تگ | کاربرد کوتاه | دسته‌بندی | توضیح کامل |
|---|---|---|---|
<html> | ریشه سند HTML | ساختاری | تگ های ساختاری |
<head> | اطلاعات متا | متادیتا | تگ های متادیتا |
<body> | محتوای صفحه | ساختاری | تگ های ساختاری |
<title> | عنوان صفحه | متادیتا | تگ های متادیتا |
<meta> | تنظیمات سئو و ریسپانسیو | متادیتا | تگ های متادیتا |
<link> | اتصال فایل‌ها | متادیتا | تگ های متادیتا |
<style> | استایل داخلی | متادیتا | تگ های متادیتا |
<script> | جاوااسکریپت | متادیتا | تگ های متادیتا |
<h1> | تیتر اصلی | متنی | تگ های متنی |
<h2> | زیرتیتر | متنی | تگ های متنی |
<h3> | تیتر سطح ۳ | متنی | تگ های متنی |
<h4> | تیتر سطح ۴ | متنی | تگ های متنی |
<h5> | تیتر سطح ۵ | متنی | تگ های متنی |
<h6> | تیتر سطح ۶ | متنی | تگ های متنی |
<p> | پاراگراف | متنی | تگ های متنی |
<strong> | تاکید مهم | متنی | تگ های متنی |
<em> | تاکید معنایی | متنی | تگ های متنی |
<span> | تگ خنثی | متنی | تگ های متنی |
<br> | خط جدید | متنی | تگ های متنی |
<hr> | جداکننده محتوا | متنی | تگ های متنی |
<blockquote> | نقل قول | متنی | تگ های متنی |
<code> | نمایش کد | متنی | تگ های متنی |
<pre> | کد فرمت‌دار | متنی | تگ های متنی |
<a> | لینک | لینک | تگ های لینک و مدیا |
<img> | تصویر | مدیا | تگ های لینک و مدیا |
<video> | ویدیو | مدیا | تگ های لینک و مدیا |
<audio> | صوت | مدیا | تگ های لینک و مدیا |
<iframe> | محتوای خارجی | مدیا | تگ های لینک و مدیا |
<figure> | گروه مدیا | مدیا | تگ های لینک و مدیا |
<figcaption> | توضیح مدیا | مدیا | تگ های لینک و مدیا |
<form> | فرم | فرم | تگ های فرم |
<input> | ورودی فرم | فرم | تگ های فرم |
<textarea> | متن چندخطی | فرم | تگ های فرم |
<select> | لیست کشویی | فرم | تگ های فرم |
<option> | آیتم لیست | فرم | تگ های فرم |
<label> | توضیح فیلد | فرم | تگ های فرم |
<button> | دکمه | فرم | تگ های فرم |
<fieldset> | گروه فیلد | فرم | تگ های فرم |
<legend> | عنوان گروه | فرم | تگ های فرم |
<header> | سربرگ | HTML5 | تگ های HTML5 |
<nav> | منوی سایت | HTML5 | تگ های HTML5 |
<main> | محتوای اصلی | HTML5 | تگ های HTML5 |
<section> | بخش محتوا | HTML5 | تگ های HTML5 |
<article> | محتوای مستقل | HTML5 | تگ های HTML5 |
<aside> | محتوای جانبی | HTML5 | تگ های HTML5 |
<footer> | فوتر | HTML5 | تگ های HTML5 |
<details> | آکاردئون | HTML5 | تگ های HTML5 |
<summary> | عنوان آکاردئون | HTML5 | تگ های HTML5 |
<progress> | پیشرفت | HTML5 | تگ های HTML5 |
<meter> | نمایش مقدار | HTML5 | تگ های HTML5 |
تمام تگ‌های بالا در ادامه به‌صورت آموزشی و مثال‌محور توضیح داده شده‌اند.
تگ HTML چیست و چگونه کار می‌کند؟
تگ HTML یک دستور نشانه‌گذاری است که داخل علامت‌های <> نوشته می‌شود و به مرورگر می‌گوید با محتوا چگونه برخورد کند.
مثلاً:
<p>این یک پاراگراف است</p>مرورگر می‌فهمد که این متن باید به‌صورت پاراگراف نمایش داده شود.
HTML ساختار صفحه را مشخص می‌کند و CSS ظاهر آن را طراحی می‌کند. اگر می‌خواهید این دو مهارت را به‌صورت پروژه‌محور یاد بگیرید، دوره HTML و CSS بهترین نقطه شروع شماست.
ساختار کلی تگ‌ها در HTML
بیشتر تگ‌ها از دو بخش تشکیل شده‌اند:
- تگ باز (
<tag>) - تگ بسته (
</tag>)
<tag>محتوا</tag>برخی تگ‌ها self-closing هستند و تگ بسته ندارند:
<img src="image.jpg" />تگ های ساختاری HTML
<html>
- مشخص‌کننده شروع سند HTML
- تمام کدها داخل آن قرار می‌گیرند
<head>
- شامل اطلاعاتی که مستقیماً نمایش داده نمی‌شوند
- مثل title، meta و لینک CSS
<body>
- تمام محتوای قابل مشاهده سایت
مثال کاربردی:
<html>
<head>
<title>سایت من</title>
</head>
<body>
<h1>سلام دنیا</h1>
</body>
</html>تگ های متنی HTML
تگ‌های متنی برای نمایش، معنا دادن و بهینه‌سازی محتوای نوشتاری استفاده می‌شوند و نقش مهمی در سئو و خوانایی دارند.
<h1> تا <h6>
- تیترهای صفحه از مهم‌ترین (
h1) تا کم‌اهمیت‌ترین (h6) - ساختار درست هدینگ‌ها برای سئو حیاتی است
<h1>عنوان اصلی صفحه</h1>
<h2>زیرعنوان</h2><p>
- نمایش پاراگراف متنی
<p>این یک متن نمونه است.</p><strong>
- تاکید معنایی قوی روی متن (مهم برای سئو)
<em>
- تاکید ملایم و معنایی
<span>
- تگ خنثی برای استایل‌دهی یا اسکریپت
<br>
- رفتن به خط بعد
<hr>
- جداکننده بصری و مفهومی محتوا
<blockquote>
- نمایش نقل‌قول
<code> و <pre>
- نمایش کدهای برنامه‌نویسی
<pre><code>console.log('Hello')</code></pre>تگ های لینک و مدیا
<a>
- ایجاد لینک داخلی یا خارجی
<a href="https://example.com" target="_blank">مشاهده سایت</a><img>
- نمایش تصویر
<img src="photo.jpg" alt="توضیح تصویر" loading="lazy"><video>
- نمایش ویدیو
<video controls>
<source src="video.mp4" type="video/mp4">
</video><audio>
- پخش فایل صوتی
<iframe>
- نمایش محتوای خارجی (نقشه، ویدیو، فرم)
<figure> و <figcaption>
- گروه‌بندی تصویر با توضیح
تگ های فرم در HTML
تگ‌های فرم برای دریافت اطلاعات از کاربر استفاده می‌شوند و پایه تعامل در وب هستند.
<form>
- ظرف اصلی فرم
<input>
- ورودی فرم با انواع مختلف:
- text
- password
- number
- checkbox
- radio
<input type="email" placeholder="ایمیل"><textarea>
- متن چندخطی
<select> و <option>
- لیست کشویی
<label>
- توضیح برای فیلد (مهم برای UX)
<button>
- دکمه ارسال یا اکشن
<fieldset> و <legend>
- گروه‌بندی فیلدها
تگ های متادیتا
این تگ‌ها داخل <head> قرار می‌گیرند و برای سئو، ریسپانسیو و تنظیمات صفحه حیاتی هستند.
<title>
- عنوان صفحه در مرورگر و گوگل
<meta charset>
- تعیین encoding صفحه
<meta name="description">
- توضیح متا برای نتایج گوگل
<meta name="viewport">
- ریسپانسیو شدن صفحه
<link>
- اتصال CSS، فونت یا آیکن
<style>
- نوشتن CSS داخل HTML
<script>
- اتصال یا نوشتن JavaScript
تگ های HTML5
تگ‌های HTML5 ساختار معنایی صفحه را بهبود می‌دهند و جایگزین divهای بی‌هدف شده‌اند.
<header>
- سربرگ صفحه یا بخش
<nav>
- منوی ناوبری
<main>
- محتوای اصلی صفحه (فقط یک‌بار)
<section>
- بخش‌بندی منطقی محتوا
<article>
- محتوای مستقل مثل مقاله یا پست
<aside>
- محتوای جانبی (سایدبار)
<footer>
- فوتر صفحه یا بخش
<details> و <summary>
- ساخت آکاردئون
<progress> و <meter>
- نمایش وضعیت یا میزان پیشرفت
اگر ترجیح می‌دهید به‌صورت حضوری و با منتور آموزش ببینید، امکان شرکت در آموزش حضوری طراحی سایت در تهران نیز برای شما فراهم شده است.
تفاوت تگ های HTML و CSS
- HTML: ساختار و معنا
- CSS: ظاهر و طراحی
مثال:
<p class="text">سلام</p>
.text { color: red; }HTML می‌گوید این متن چیست، CSS می‌گوید چگونه دیده شود.
مثال عملی استفاده از تگ های HTML
<!DOCTYPE html>
<html>
<head>
<title>صفحه نمونه</title>
</head>
<body>
<header>
<h1>آموزش HTML</h1>
</header>
<section>
<p>این یک صفحه ساده HTML است.</p>
</section>
<footer>
<p>© 2026</p>
</footer>
</body>
</html>اشتباهات رایج در استفاده از تگ های HTML
- استفاده بیش از یک
<h1>در صفحه - نادیده گرفتن ترتیب هدینگ‌ها
- نداشتن
altبرای تصاویر - استفاده زیاد از
<div>به‌جای تگ‌های معنایی HTML5 - استایل‌دهی با HTML به‌جای CSS
- عدم استفاده از label در فرم‌ها
- استفاده نادرست از
<br>برای فاصله
سوالات متداول
تگ HTML چیست؟
دستوری برای مشخصکردن نقش محتوا در صفحه وب.
پرکاربردترین تگ های HTML کدام‌اند؟
html، head، body، h1، p، a، img، div
تگ های HTML5 چه مزیتی دارند؟
ساختار معنایی بهتر و سئو قویتر.
یادگیری HTML چقدر زمان می‌برد؟
مقدمات آن در چند روز، تسلط در پروژه واقعی.
جمع‌بندی
تگ های HTML پایه و اساس طراحی سایت هستند. اگر این تگ‌ها را درست و اصولی یاد بگیرید، مسیر یادگیری CSS، JavaScript و فریم‌ورک‌ها برایتان بسیار ساده‌تر می‌شود.
پیشنهاد مسیر یادگیری:
- تسلط کامل بر HTML و تگ‌ها
- یادگیری CSS و Flexbox
- طراحی ریسپانسیو
- ورود به JavaScript
اگر قصد دارید بعد از یادگیری تگ های HTML وارد مسیر حرفه‌ای شوید، پیشنهاد می‌کنیم دوره‌های طراحی سایت را ببینید که از HTML شروع شده و تا طراحی پروژه واقعی ادامه دارد.
