مرجع کامل تگ‌های HTML
راهنمای جامع تگ‌های HTML با توضیحات فارسی و مثال‌های عملی
🔍
هیچ تگی با این جستجو پیدا نشد
لطفاً کلمه کلیدی دیگری امتحان کنید
تگ‌های ساختاری
تگ‌هایی که ساختار کلی صفحه وب را تشکیل می‌دهند و چارچوب اصلی محتوا را فراهم می‌کنند.
<html>
ساختاری
ریشه اصلی سند HTML که تمام محتوای صفحه را در بر می‌گیرد. این تگ والد همه تگ‌های دیگر است.
ویژگی‌های مهم:
lang
dir
مثال:
<html lang="fa" dir="rtl">
<head>...</head>
<body>...</body>
</html>
نکته:
همیشه ویژگی lang را برای تعیین زبان صفحه و dir را برای جهت متن تنظیم کنید.
<head>
ساختاری
شامل اطلاعات فراداده صفحه مانند عنوان، توضیحات، لینک‌های CSS و اسکریپت‌ها که در صفحه نمایش داده نمی‌شوند.
مثال:
<head>
<meta charset="UTF-8">
<title>عنوان صفحه</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
ساختاری
شامل تمام محتوای قابل مشاهده صفحه وب مانند متن، تصاویر، لینک‌ها و سایر عناصر.
ویژگی‌های مهم:
onload
class
id
مثال:
<body>
<h1>خوش آمدید</h1>
<p>این محتوای صفحه است.</p>
</body>
<div>
ساختاری
کانتینر عمومی برای گروه‌بندی عناصر دیگر. بیشتر برای طراحی و چیدمان استفاده می‌شود.
ویژگی‌های مهم:
class
id
style
مثال:
<div class="container">
<h2>عنوان بخش</h2>
<p>محتوای بخش</p>
</div>
خروجی:
عنوان بخش
محتوای بخش
<span>
ساختاری
کانتینر درون‌خطی برای استایل‌دهی یا گروه‌بندی بخش‌هایی از متن بدون تغییر ساختار.
ویژگی‌های مهم:
class
id
style
مثال:
<p>این متن <span style="color: red;">قرمز</span> است.</p>
خروجی:
این متن قرمز است.
تگ‌های متنی
تگ‌هایی که برای قالب‌بندی و نمایش انواع مختلف متن استفاده می‌شوند.
<h1> تا <h6>
متنی
تگ‌های عنوان با اولویت‌های مختلف. h1 مهم‌ترین و h6 کم‌اهمیت‌ترین عنوان است.
مثال:
<h1>عنوان اصلی</h1>
<h2>عنوان فرعی</h2>
<h3>عنوان سطح سوم</h3>
خروجی:
عنوان اصلی
عنوان فرعی
عنوان سطح سوم
نکته:
از h1 فقط یک بار در هر صفحه استفاده کنید و ترتیب عناوین را رعایت کنید.
<p>
متنی
برای نمایش پاراگراف‌های متن. هر پاراگراف در خط جدیدی شروع می‌شود.
مثال:
<p>این یک پاراگراف است.</p>
<p>این پاراگراف دوم است.</p>
خروجی:
این یک پاراگراف است.
این پاراگراف دوم است.
<br>
متنی
برای ایجاد شکست خط. این تگ خودبسته است و نیاز به تگ بسته شونده ندارد.
مثال:
<p>خط اول<br>خط دوم</p>
خروجی:
خط اول
خط دوم
<strong>
متنی
برای تأکید قوی بر متن. معمولاً به صورت ضخیم نمایش داده می‌شود.
مثال:
<p>این متن <strong>مهم</strong> است.</p>
خروجی:
این متن مهم است.
<em>
متنی
برای تأکید بر متن. معمولاً به صورت کج نمایش داده می‌شود.
مثال:
<p>این <em>تأکید</em> دارد.</p>
خروجی:
این تأکید دارد.
<code>
متنی
برای نمایش کد کامپیوتری درون متن. معمولاً با فونت monospace نمایش داده می‌شود.
مثال:
<p>از تگ <code><div></code> استفاده کنید.</p>
خروجی:
از تگ <div> استفاده کنید.
تگ‌های رسانه‌ای
تگ‌هایی که برای نمایش انواع رسانه مانند تصاویر، ویدیو و صدا استفاده می‌شوند.
<img>
رسانه‌ای
برای نمایش تصاویر. این تگ خودبسته است و نیاز به تگ بسته شونده ندارد.
ویژگی‌های ضروری:
src
alt
width
height
مثال:
<img src="image.jpg" alt="توضیح تصویر" width="300">
نکته:
همیشه ویژگی alt را برای دسترسی بهتر تنظیم کنید.
<video>
رسانه‌ای
برای نمایش ویدیو در صفحه وب با کنترل‌های پخش.
ویژگی‌های مهم:
src
controls
autoplay
loop
مثال:
<video controls width="400">
<source src="movie.mp4" type="video/mp4">
مرورگر شما از ویدیو پشتیبانی نمی‌کند.
</video>
<audio>
رسانه‌ای
برای پخش فایل‌های صوتی در صفحه وب.
ویژگی‌های مهم:
src
controls
autoplay
loop
مثال:
<audio controls>
<source src="music.mp3" type="audio/mpeg">
مرورگر شما از صدا پشتیبانی نمی‌کند.
</audio>