بستن

لیست کامل تگ‌های HTML به همراه توضیح و کاربرد | راهنمای جامع HTML

لیست کامل تگ‌های HTML

به دوره حرفه‌ای آموزشHTML در آوای وب خوش اومدی! دنبال لیست کامل تگ‌های HTML هستی؟ در این راهنمای جامع، تمام تگ‌های HTML رو همراه با توضیح و کاربردهاشون یاد بگیر. این مقاله مرجعی کامل برای طراحی سایت، توسعه وب و سئو است. از تگ‌های پایه، متنی، فرم‌ها، چندرسانه‌ای، جداول، ناوبری و تعاملی گرفته تا جدیدترین تگ‌های HTML5، همه را با مثال بررسی کردیم.

لیست کامل تگ‌های html

تگ‌های پایه و ساختاری (Document Structure)

تگتوضیح
<DOCTYPE html!>مشخص کردن نوع یا نسخه صفحه وب
<html>ریشه‌ی سند HTML
<head>شامل اطلاعات متا، لینک‌ها و اسکریپت‌ها
<title>عنوان صفحه که در تب مرورگر نمایش داده می‌شود
<base>تعیین مسیر پیش‌فرض برای لینک‌ها و منابع
<meta>ارائه اطلاعات متا مانند charset، description و viewport
<body>بخش محتوایی صفحه
<–  –!>نوشتن توضیحات

تگ‌های لیست (list tags)

تگتوضیح
<ol>لیست مرتب (شماره‌گذاری‌شده)
<ul>لیست نامرتب (با نقطه)
<li>آیتم برای لیست‌های مرتب و نامرتب
<dl>لیست توضیحی
<dt>عنوان توضیح
<dd>متن توضیح

تگ‌های تصویری و چندرسانه‌ای

تگتوضیح
<img>افزودن تصویر
<figure>گروه‌بندی تصویر و توضیحات
<figcaption>توضیح مربوط به تصویر
<audio>افزودن فایل صوتی
<video>افزودن ویدئو
<source>تعیین منبع برای ویدئو یا صوت
<track>افزودن زیرنویس به ویدئو

تگ‌های جدول (Tables)

تگتوضیح
<table>ایجاد جدول
<caption>عنوان جدول
<thead>بخش سر جدول
<tbody>بدنه جدول
<tfoot>پاورقی جدول
<tr>ردیف‌های جدول
<th>سلول عنوان جدول
<td>سلول داده جدول
<colgroup>گروه‌بندی ستون‌ها
<col>تنظیم ویژگی‌های یک ستون

تگ‌های فرم و ورودی (Forms & Inputs)

تگتوضیح
<form>فرم ورودی
<input>انواع فیلدهای ورودی
<textarea>جعبه متن چندخطی
<button>دکمه
<select>لیست کشویی
<option>گزینه‌های لیست کشویی
<optgroup>گروه‌بندی گزینه‌های select
<fieldset>گروه‌بندی فیلدهای فرم
<legend>عنوان گروه‌بندی فرم
<label>برچسب برای ورودی‌ها
<datalist>لیست پیشنهادی برای ورودی
<output>نمایش خروجی محاسبات
<progress>نمایش میزان پیشرفت کار
<meter>نمایش مقدار مشخصی از داده‌ها

تگ‌های بخش‌بندی و طرح‌بندی (Sections & Layout)

تگتوضیح
<header>سربرگ صفحه یا یک بخش
<nav>لینک‌های ناوبری سایت
<section>بخش‌بندی محتوا
<article>برای مقالات یا بخش‌های مستقل
<aside>محتوای جانبی (مثل سایدبار)
<footer>پاورقی صفحه یا بخش‌ها
<address>نمایش اطلاعات تماس
<main>محتوای اصلی صفحه (بدون هدر، فوتر و سایدبار)
<div>بخش‌بندی عمومی برای طراحی
<span>مشخص کردن بخشی از متن بدون تأثیر روی ساختار

تگ‌های متنی و فرمت‌بندی (Text & Formatting)

تگتوضیح
<h1> تا <h6>تیترهای اصلی و فرعی صفحه
<p>پاراگراف
<hr>خط افقی برای جداسازی محتوا
<br>ایجاد خط جدید
<pre>نمایش متن با فرمت ثابت
<blockquote>نقل قول از منبع دیگر

تگ‌های معناشناسی و استایل‌دهی (Semantic & Styling)

تگتوضیح
<b>نمایش متن ضخیم (بدون تأکید معنایی)
<i>نمایش متن مورب (بدون تأکید معنایی)
<u>نمایش متن زیرخط‌دار
<small>کوچک‌تر کردن اندازه متن
<strong>نمایش متن مهم (Bold)
<em>تأکید معنایی (Italic)
<mark>هایلایت کردن متن
<cite>نمایش نام نویسنده یا منبع
<dfn>تعریف یک واژه یا مفهوم
<abbr>نمایش مخفف‌ها با توضیح در Tooltip
<time>نمایش زمان و تاریخ
<code>نمایش کدهای برنامه‌نویسی
<var>نمایش متغیر در فرمول‌ها
<samp>نمایش خروجی نمونه از یک برنامه
<kbd>نمایش ورودی از کیبورد
<sub>نوشته پایین‌نویس
<sup>نوشته بالا‌نویس
<s>نمایش متن خط‌خورده
<ins>نمایش متن جدید اضافه‌شده
<del>نمایش متن حذف‌شده
<wbr>مشخص کردن محل مناسب برای شکستن متن
تگتوضیح
<a>ایجاد لینک به صفحات و یا سایت‌های دیگر
<area>تعریف مناطق کلیک‌پذیر در یک تصویر
<map>تعریف نقشه تصویری برای area

تگ‌های چندرسانه‌ای (Media Tags)

تگتوضیح
<embed>نمایش محتوای خارجی مانند PDF
<object>قرار دادن فایل‌های چندرسانه‌ای
<iframe>نمایش صفحه‌ای دیگر در داخل صفحه

تگ‌های اسکریپت، استایل و تعاملی (Scripting & style & Interactive)

تگتوضیح
<script>افزودن جاوااسکریپت
<noscript>پیام برای کاربرانی که جاوااسکریپت ندارند
<canvas>ایجاد گرافیک با جاوااسکریپت
<template>محتوای قابل استفاده مجدد
<slot>جایگاه مشخص برای محتوای سفارشی
<shadow>(Deprecated) برای وب کامپوننت‌ها
<style>اضافه کردن استایل‌های CSS داخلی
<link>لینک‌دهی به فایل‌های خارجی (مثل CSS)

تگ‌های خاص و سفارشی

تگتوضیح
<details>ایجاد جزئیات باز/بسته‌شونده
<summary>عنوان جزئیات
<dialog>نمایش دیالوگ مدال
<data>مشخص کردن مقدار داده‌ای
<bdi>نمایش متن بدون تأثیر از جهت صفحه
<bdo>کنترل جهت متن
<ruby>حروف روبی (برای زبان‌های آسیایی)
<rt>نمایش تلفظ در ruby
<rp>جایگزین برای مرورگرهایی که ruby را پشتیبانی نمی‌کنند

جمع‌بندی: لیست کامل تگ‌های HTML!

حالا که همه‌ی تگ‌های HTML رو مثل یه حرفه‌ای بلدی! وقتشه دست به کار شی! با  لیست کامل تگ‌های HTML می‌تونی شروع به ساخت سایت مورد نظرت کنی، تجربه کاربرات رو به اوج برسونی، و گوگل رو عاشق سایتت کنی! این مقاله، کامل‌ترین لیست تگ‌های HTML هست. پس معطل نکن! شروع به کد زدن کن، بنویس و نشون بده چقدر خفنی! ما تا آخر خط باهاتیم! در ضمن، یادت نره اگه مبتدی هستی، کدات رو تو W3C Validator چک کنی و مطمئن شی درست نوشتی.

ایده‌هات رو فریاد بزن! 

نظرت درباره این مقاله چیه؟ دوست داری چه چیزی به این آموزش اضافه کنیم؟ سوالی تو ذهنته؟ تو نظرات برامون بنویس! تیم حرفه‌ای پشتیبانی با جون و دل منتظرته!

شهرام نجفی

شهرام نجفی

شهرام نجفی — بیش از ۱۵ سال طراحی و توسعهٔ وب به‌صورت فریلنس. قالب اختصاصی آوای وب را از صفر نوشته‌ام. مطالب این سایت را بر پایهٔ مستندات رسمی MDN و WHATWG می‌نویسم و قبل از انتشار در مرورگرهای واقعی تست می‌کنم. نمونه‌کارهایم در shahramnajafi.com است.

نظر شما در این مورد چیه؟

5 دیدگاه

  1. Apache
    Apache

    خوب بود مرسی

  2. Indio
    Indio

    خیلی کامله، ممنون از آموزش

    1. شهرام نجفی
      شهرام نجفی

      خوشحالیم که رضایت شما رو جلب کرده

  3. Alim
    Alim

    واقعا آموزش عالی

    1. شهرام نجفی
      شهرام نجفی

      ممنون، نظر لطف شماست دوست عزیز.