وقتی صحبت از طراحی صفحات وب می‌شود، اکثر افراد فقط با تگ‌هایی مانند h1, div, span, a, img و… آشنا هستند. اما HTML تگ‌های کاربردی زیادی دارد که می‌توانند ساختار صفحات را بهبود دهند، تجربه کاربری را بهتر کنند و حتی روی سئو سایت تأثیر مثبت بگذارند تگ های html که اکثر اوقات نادیده گرفته میشن.

بسیاری از توسعه‌دهندگان تازه‌کار از این تگ‌ها استفاده نمی‌کنند، در حالی که شناخت درست تگ های HTML می‌تواند باعث شود کدنویسی تمیزتر، استانداردتر و حرفه‌ای‌تر انجام شود.

در این مقاله با ۱۰ تگ HTML کمتر شناخته‌شده اما بسیار کاربردی آشنا می‌شویم.

1. تگ details

این تگ برای نمایش محتوای بازشونده و جمع‌شونده استفاده می‌شود و بدون نیاز به جاوااسکریپت می‌تواند یک آکاردئون ساده ایجاد کند.

نمونه:

<details>
  <summary>مشاهده توضیحات</summary>
  <p>این متن پس از کلیک نمایش داده می‌شود.</p>
</details>

مزایا:

  • سبک و سریع
  • بدون نیاز به JavaScript
  • مناسب برای سوالات متداول (FAQ)

2. تگ summary

این تگ در کنار details استفاده می‌شود و عنوان بخش بازشونده را مشخص می‌کند.

کاربر با کلیک روی این بخش می‌تواند محتوای داخل details را مشاهده کند.

استفاده از این دو تگ یکی از بهترین روش‌ها برای ساخت FAQ در صفحات وب است.

3. تگ mark

برای هایلایت کردن یا برجسته کردن بخشی از متن استفاده می‌شود.

نمونه:

<p>یادگیری <mark>تگ های HTML</mark> برای طراحی سایت ضروری است.</p>

این تگ می‌تواند توجه کاربران را به بخش‌های مهم محتوا جلب کند.

4. تگ figure

زمانی که یک تصویر، نمودار یا تصویر آموزشی دارید، بهتر است آن را داخل تگ figure قرار دهید.

نمونه:

<figure>
  <img src="image.jpg" alt="نمونه تصویر">
</figure>

این تگ باعث می‌شود ساختار صفحه معنایی‌تر شود.

5. تگ figcaption

این تگ در کنار figure برای نمایش توضیح تصویر استفاده می‌شود.

نمونه:

<figure>
  <img src="image.jpg" alt="نمونه">
  <figcaption>نمونه طراحی رابط کاربری</figcaption>
</figure>

استفاده از figcaption به درک بهتر محتوا توسط کاربران و موتورهای جستجو کمک می‌کند.

6. تگ time

برای نمایش تاریخ و زمان به شکل استاندارد استفاده می‌شود.

نمونه:

<time datetime="2026-06-15">
15 خرداد 1405
</time>

این تگ به موتورهای جستجو کمک می‌کند تاریخ محتوا را بهتر تشخیص دهند.

7. تگ code

اگر در مقالات آموزشی کد نمایش می‌دهید، بهتر است از این تگ استفاده کنید.

نمونه:

<code>display: flex;</code>

این کار باعث می‌شود کدها از متن عادی متمایز شوند.

8. تگ progress

برای نمایش میزان پیشرفت یک عملیات استفاده می‌شود.

نمونه:

<progress value="70" max="100"></progress>

کاربردهای رایج:

  • نمایش درصد دانلود
  • نمایش پیشرفت ثبت‌نام
  • نمایش مراحل تکمیل پروفایل

9. تگ meter

این تگ برای نمایش مقدار یک شاخص در بازه مشخص استفاده می‌شود.

نمونه:

<meter value="8" min="0" max="10"></meter>

کاربردها:

  • نمایش امتیاز محصول
  • نمایش میزان باتری
  • نمایش سطح مهارت

10. تگ picture

این تگ یکی از مهم‌ترین تگ های HTML مدرن محسوب می‌شود.

با استفاده از picture می‌توان تصاویر مختلفی را برای اندازه‌های مختلف صفحه نمایش بارگذاری کرد.

نمونه:

<picture>
  <source media="(max-width:768px)" srcset="mobile.jpg">
  <img src="desktop.jpg" alt="تصویر">
</picture>

مزایا:

  • بهبود سرعت سایت
  • کاهش مصرف پهنای باند
  • افزایش عملکرد در موبایل

چرا یادگیری تگ های HTML مهم است؟

بسیاری از طراحان سایت سال‌ها از HTML استفاده می‌کنند اما همچنان فقط به چند تگ محدود متکی هستند. آشنایی با تگ های HTML کمتر شناخته‌شده باعث می‌شود:

  • کدهای استانداردتری بنویسید.
  • ساختار صفحات برای موتورهای جستجو بهتر قابل درک باشد.
  • تجربه کاربری بهبود پیدا کند.
  • نیاز به استفاده از جاوااسکریپت در برخی بخش‌ها کاهش یابد.
  • صفحات وب حرفه‌ای‌تر و بهینه‌تر طراحی شوند.

جمع بندی تگ های html

شناخت تگ های HTML فقط به div و span محدود نمی‌شود. HTML مدرن امکانات زیادی در اختیار توسعه‌دهندگان قرار می‌دهد که می‌توانند بدون نیاز به کتابخانه‌های اضافی، صفحات حرفه‌ای‌تر و استانداردتری ایجاد کنند.

اگر تازه وارد دنیای طراحی وب شده‌اید، پیشنهاد می‌شود علاوه بر تگ‌های رایج، استفاده از تگ‌هایی مانند details، figure، time، picture و progress را نیز یاد بگیرید. این تگ‌ها علاوه بر ساده‌تر کردن کدنویسی، به بهبود سئو و تجربه کاربری سایت نیز کمک می‌کنند.