آموزش تگ های HTML به زبان ساده (لیست کامل تگ های اچ تی ام ال)
تگهای HTML آجرهای اصلیِ بنای وبسایت شما هستند. برای اینکه کارتان سادهتر شود، آنها را در ۵ دستهبندی کاربردی برایتان مرتب کردهام:
۱. تگهای ساختار اصلی (مبنای هر صفحه)
این تگها اسکلتِ صفحه شما را تشکیل میدهند:
-
<html>: ریشه اصلی صفحه. -
<head>: بخش اطلاعات پشتصحنه (مثل عنوان صفحه). -
<body>: تمام چیزی که کاربر در مرورگر میبیند (متن، عکس، ویدیو). -
<!DOCTYPE html>: تگ تعریف نوع سند (همیشه در خط اول).
۲. تگهای محتوایی (متن و تیتر)
برای نمایش نوشتهها از این تگها استفاده میشود:
-
<h1>تا<h6>: تگهای تیتر (Heading).<h1>بزرگترین و مهمترین است. -
<p>: تگ پاراگراف برای متنهای عادی. -
<span>: برای اعمال استایل به بخشی از یک متن (بدون اینکه به خط جدید برود). -
<div>: ظرف (Container) برای گروهبندی محتوا. (بلاک اصلی برای چیدمان سایت). -
<br>: ایجاد یک خط جدید (Break). -
<hr>: ایجاد یک خط افقی جداکننده.
۳. تگهای لینک و رسانه
برای اتصال صفحات یا نمایش فایلهای تصویری و ویدیویی:
-
<a>: تگ لینک. (مثال:<a href="url">متن لینک</a>). -
<img>: تگ تصویر. (مثال:<img src="image.jpg" alt="توضیح عکس">). -
<video>: برای نمایش ویدیو. -
<audio>: برای نمایش فایل صوتی.
۴. تگهای لیست (برای فهرستبندی)
-
<ul>: لیست نامرتب (دایرهوار). -
<ol>: لیست مرتب (شمارهدار). -
<li>: آیتمِ داخل لیست (در هر دو مدل بالا استفاده میشود).
۵. تگهای فرم (برای تعامل با کاربر)
اگر میخواهید کاربر ورودی داشته باشد (مثل ثبتنام یا لاگین):
-
<form>: ظرف اصلی برای فرم. -
<input>: کادر ورود متن، ایمیل، چکباکس و... -
<button>: دکمه کلیک. -
<textarea>: کادر متن بزرگ برای نظرات. -
<select>: لیست بازشو (Dropdown).
۳ نکته کلیدی برای یادگیری سریعتر:
-
استاندارد بستن تگ: تگهای ساختاری (مثل
<div>یا<body>) همیشه نیاز به تگ بسته (</div>) دارند. تگهای خودبسته (Self-Closing) مثل<img>یا<br>نیازی به تگ بسته ندارند. -
فرورفتگی (Indentation): همیشه فرزندانِ یک تگ را با چند فاصله (Space) جلوتر تایپ کنید تا کد شما "خوانا" باشد (مثلاً داخل
<body>یک تب جلوتر بروید). -
تفاوت
<div>و<span>: همیشه یادتان باشد که<div>کل عرض صفحه را اشغال میکند و به خط بعد میرود (Block)، اما<span>فقط به اندازه متنِ داخلش فضا میگیرد (Inline).
<div class="menu"> <h1>به سایت من خوش آمدید</h1> <p>این یک متن ساده است که توسط تگ پاراگراف ایجاد شده.</p> <a href="contact.html">تماس با ما</a></div><br><br>
یک قالب استاندارد و بهینه HTML5
در اینجا یک قالب استاندارد و بهینه HTML5 برای شما آماده کردهام. این قالب تمام تگهای ساختاری لازم را در جای درست خود دارد و برای شروع هر پروژهای کاملاً مناسب است.
<!DOCTYPE html><html lang="fa" dir="rtl"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>عنوان سایت شما</title> <!-- در اینجا میتوانید لینک فایل CSS خود را قرار دهید --> <style> /* استایلهای پایه برای شروع */ body { font-family: Tahoma, sans-serif; } </style></head><body> <header> <nav> <!-- منوی سایت --> </nav> </header> <main> <section> <h1>به صفحه خوش آمدید</h1> <p>این یک ساختار استاندارد برای شروع کدنویسی است.</p> </section> </main> <footer> <p>تمامی حقوق محفوظ است.</p> </footer></body></html>```### چند نکته درباره این قالب:1. **`lang="fa"` و `dir="rtl"`:** این دو دستور در تگ `<html>` باعث میشوند مرورگر بفهمد زبان سایت فارسی است و متنها را به درستی از راستبهچپ (Right-to-Left) نمایش دهد.2. **`<meta name="viewport" ...>`:** این تگ بسیار حیاتی است؛ بدون آن، سایت شما در موبایل به درستی نمایش داده نمیشود و کوچک به نظر میرسد.3. **تگهای معنایی (Semantic Tags):** از تگهای `header`، `main`، `section` و `footer` استفاده کردم. این تگها به گوگل کمک میکنند محتوای سایت شما را بهتر درک کند (برای سئو عالی هستند).حالا که این ساختار را دارید، قدم بعدی شما چیست؟ دوست دارید یاد بگیرید چطور با CSS به این ساختار رنگ و لعاب بدهید یا میخواهید یک فرمِ ثبتنام ساده به آن اضافه کنید؟
ممنونم از سایت خوبتون خیلی سایت باحالی دارید فقط اگه آموزش htmlتون با فیلم باشه خیلی بهتره
پاسخسلام ممنون از سایت خوبتون. تگ مربوط به ایجاد نظرات رو هم لطف میکنید. مثل همین نظری ک من الان دادم بهتون.
خدایی باید کل اینا رو حفظ کنیم یا خداا
پاسخمرسی خیلی مطالب مفیدی دارید
من دنبال لیست تگها بودم که پیداش کردم،سپاس فراوان 🌺
پاسخخیلی ممنون از اینکه مطالب مفیدی بهمون یاد دادید فقط لطفا با فیلم های متنوع هم درس را توضیح دهید.
پاسخسلام کد رنگی متن چجوریه
پاسخخیلی کاربردی و مفید
پاسخ