HTML (Hypertext Markup Language) زبان استاندارد برای ایجاد صفحات وب است. با استفاده از تگ‌های HTML می‌توان ساختار و محتوای صفحات وب را به‌طور کامل مشخص کرد. این تگ‌ها به مرورگر کمک می‌کنند تا محتوا را به‌درستی نمایش دهد. در این مقاله، فهرست کاملی از تمامی تگ‌های مهم و کاربردی HTML همراه با توضیحات و مثال‌ها ارائه شده است.
تگ‌های ساختاری اصلی
این تگ‌ها برای تعیین ساختار اولیه صفحات وب استفاده می‌شوند.
<html>: ریشه‌ی تمامی اسناد HTML است. تمامی کدهای HTML باید در این تگ قرار گیرند.مثال:
<html> <head> <title>صفحه نمونه</title> </head> <body> <h1>سلام دنیا!</h1> </body> </html><head>: شامل اطلاعات متادیتا (مانند عنوان، توضیحات، و لینک به فایل‌های CSS) است که برای مرورگر استفاده می‌شود.<title>: عنوان صفحه‌ی وب را مشخص می‌کند. این عنوان در تب مرورگر نمایش داده می‌شود.<body>: محتوای اصلی صفحه‌ی وب (مانند متن، تصاویر، لینک‌ها، و ویدئوها) در این بخش قرار می‌گیرد.
تگ‌های عنوان‌بندی (Heading Tags)
تگ‌های عنوان‌بندی برای تعیین عناوین در صفحه‌های وب استفاده می‌شوند. این تگ‌ها به‌طور پیش‌فرض از نظر اندازه و اهمیت متفاوت هستند.
<h1>تا<h6>: عناوین اصلی و فرعی صفحه را مشخص می‌کنند.<h1>بزرگ‌ترین و مهم‌ترین عنوان و<h6>کوچک‌ترین عنوان است.مثال:
<h1>عنوان اصلی</h1> <h2>عنوان فرعی</h2> <h3>عنوان بخش</h3>
تگ‌های متنی
این تگ‌ها برای قالب‌بندی و نمایش متن استفاده می‌شوند.
<p>: برای ایجاد پاراگراف‌ها استفاده می‌شود.<p>این یک پاراگراف نمونه است.</p><br>: برای شکستن خطوط و ایجاد خط جدید.متن اول<br>متن دوم<hr>: برای ایجاد یک خط افقی جهت جداسازی محتوا.<p>قسمت اول</p> <hr> <p>قسمت دوم</p><strong>: متن را به صورت برجسته (Bold) نمایش می‌دهد.<em>: متن را به صورت مورب (Italic) نمایش می‌دهد.<blockquote>: برای نقل قول‌ها استفاده می‌شود.
تگ‌های لینک‌دهی
لینک‌ها یکی از اساسی‌ترین عناصر صفحات وب هستند. برای ایجاد لینک از تگ <a> استفاده می‌شود.
<a>: لینک‌ها را تعریف می‌کند. ویژگیhrefآدرس لینک را مشخص می‌کند.مثال:
<a href="https://example.com">کلیک کنید</a>
تگ‌های لیست‌ها
برای ایجاد لیست‌ها از تگ‌های زیر استفاده می‌شود:
<ul>: برای ایجاد لیست‌های نامرتب (Bulleted list).<ol>: برای ایجاد لیست‌های مرتب (Numbered list).<li>: برای تعریف آیتم‌های لیست.
مثال:
<ul>
<li>آیتم اول</li>
<li>آیتم دوم</li>
</ul>
<ol>
<li>آیتم شماره 1</li>
<li>آیتم شماره 2</li>
</ol>تگ‌های جدول (Table Tags)
برای نمایش داده‌ها به صورت جدول از تگ‌های زیر استفاده می‌شود:
<table>: جدول را تعریف می‌کند.<tr>: برای ایجاد ردیف‌ها.<td>: برای ایجاد سلول‌های داده.<th>: برای ایجاد سلول‌های عنوان.
مثال:
<table>
<tr>
<th>ستون اول</th>
<th>ستون دوم</th>
</tr>
<tr>
<td>داده 1</td>
<td>داده 2</td>
</tr>
</table>تگ‌های چندرسانه‌ای (Multimedia Tags)
برای اضافه کردن تصاویر، ویدئوها و صدا از تگ‌های زیر استفاده می‌شود:
<img>: برای نمایش تصاویر.<audio>: برای پخش فایل‌های صوتی.<video>: برای نمایش ویدئو.
مثال:
<img src="image.jpg" alt="توضیح تصویر">
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>
<video controls>
<source src="video.mp4" type="video/mp4">
</video>تگ‌های فرم‌ها (Form Tags)
فرم‌ها برای جمع‌آوری اطلاعات از کاربران استفاده می‌شوند. مهم‌ترین تگ‌های فرم عبارتند از:
<form>: فرم‌ها را تعریف می‌کند.<input>: برای ورود اطلاعات توسط کاربر (مانند متن، ایمیل، رمزعبور).<textarea>: برای وارد کردن متن‌های طولانی.<button>: برای ایجاد دکمه.<label>: برچسب‌گذاری برای المان‌های فرم.
مثال:
<form>
<label for="name">نام:</label>
<input type="text" id="name" name="name">
<textarea name="message">پیام خود را وارد کنید</textarea>
<button type="submit">ارسال</button>
</form>تگ‌های مرتبط با استایل و ساختار
این تگ‌ها برای مدیریت استایل و بخش‌بندی صفحات استفاده می‌شوند:
<div>: برای بخش‌بندی صفحات و ایجاد ساختار.<span>: برای استایل‌دهی به بخش‌های کوچک متن.<style>: برای تعریف استایل‌های CSS داخلی.<link>: برای اتصال به فایل‌های CSS خارجی.
تگ‌های مرتبط با اسکریپت
برای اضافه کردن اسکریپت‌های جاوااسکریپت به صفحه:
<script>: اسکریپت‌ها را تعریف می‌کند.<noscript>: برای نمایش محتوایی که در صورت غیرفعال بودن جاوااسکریپت نشان داده می‌شود.
مثال:
<script>
alert("سلام دنیا!");
</script>تگ‌های متادیتا
<meta>: برای تعریف متادیتا مانند کدگذاری و توضیحات صفحه.<link>: برای اتصال به منابع خارجی (CSS، آیکون و غیره).
این لیست شامل مهم‌ترین و پرکاربردترین تگ‌های HTML است. استفاده درست از این تگ‌ها می‌تواند کیفیت و ساختار صفحات وب شما را بهبود بخشد.
