لیست تمام مهم ترین و کاربردی ترین تگ های html

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 است. استفاده درست از این تگ‌ها می‌تواند کیفیت و ساختار صفحات وب شما را بهبود بخشد.