تگ های کمتر شناخته‌شده HTML5 که توسعه‌دهندگان باید بشناسند

در این مقاله از وبسایت وهاب آنلاین با تگ های HTML5 که نمی‌دانستید به آن‌ها نیاز دارید به معرفی برخی از عناصر کمتر شناخته‌شدهٔ HTML5 می‌پردازیم که می‌توانند جایگزین مناسبی برای استفاده از کتابخانه‌ها و فریم‌ورک‌های پیچیده باشند. در ادامه، به شرح این تگ ها خواهیم پرداخت و آنها را بررسی خواهیم کرد.

تگ های HTML5 که نمی‌دانستید به آن‌ها نیاز دارید:

در دنیای توسعه وب، گاهی برای پیاده‌سازی ویژگی‌های ساده، به سراغ فریم‌ورک‌ها و کتابخانه‌های پیچیده می‌رویم، در حالی که HTML5 ابزارهای قدرتمندی را به‌صورت داخلی فراهم کرده است. در این مقاله، به بررسی هشت تگ HTML5 می‌پردازیم که ممکن است کمتر مورد توجه قرار گرفته باشند، اما می‌توانند کارایی بالایی داشته باشند.

1. تگ <dialog>: ایجاد مودال های داخلی

برای ایجاد پنجره‌های مودال، نیازی به استفاده از فریم‌ورک‌های جاوااسکریپت نیست. با استفاده از عنصر <dialog>، می‌توان به‌راحتی یک پنجره مودال ایجاد کرد:

<dialog id="myDialog">
  <h2>این یک دیالوگ بومی است</h2>
  <p>بدون نیاز به فریم‌ورک‌های جاوااسکریپت!</p>
  <button id="closeDialog">بستن</button>
</dialog>

<button id="openDialog">باز کردن دیالوگ</button>

برای کنترل باز و بسته شدن دیالوگ، از جاوااسکریپت ساده استفاده می‌شود:

const dialog = document.getElementById('myDialog');
document.getElementById('openDialog').addEventListener('click', () => {
  dialog.showModal(); // Makes the dialog appear as a modal
});
document.getElementById('closeDialog').addEventListener('click', () => {
  dialog.close(); // Closes the dialog
});

این تگ از سال ۲۰۲۲ در اکثر مرورگرهای اصلی پشتیبانی می‌شود و امکاناتی مانند مدیریت فوکوس و پس‌زمینه را به‌صورت پیش‌فرض فراهم می‌کند.

برای زیباتر شدن کار نیز میتونید از این css ها استفاده کنید

dialog {
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #ddd;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

dialog::backdrop {
  background-color: rgba(0,0,0,0.6);
}

2. تگ <details> و <summary>: آکاردئون‌های بومی

برای ایجاد بخش‌های قابل گسترش و جمع‌شو، می‌توان از این عناصر استفاده کرد:

<details>
  <summary>برای مشاهده کلیک کنید</summary>
  <p>این محتوا بدون استفاده از جاوااسکریپت قابل گسترش و جمع‌شو است!</p>
</details>

مرورگر به‌طور خودکار عملکرد باز و بسته شدن، ویژگی‌های دسترسی‌پذیری و ناوبری با صفحه‌کلید را مدیریت می‌کند.

برای زیباتر شدن و شخصی سازی ظاهر آن میتوانید از css زیر استفاده کنید:

details > summary {
  list-style: none; /* Removes the default triangle */
}

details > summary::before {
  content: '▶';
  display: inline-block;
  margin-right: 0.5em;
  transition: transform 0.2s;
}

details[open] > summary::before {
  transform: rotate(90deg);
}

3. تگ <datalist>: تکمیل خودکار ورودی‌ها

برای افزودن پیشنهادات به فیلدهای ورودی، می‌توان از <datalist> استفاده کرد. این تگ به شما کمک میکند برای input های خود مقادیر پیشنهادی قرار دهید تا تایپ کاربر نمایش داده شود و کاربر با کلیک روی آن به صورت خودکار فیلد پر شود.

<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
  <option value="Opera">
</datalist>

این عنصر به کاربر امکان می‌دهد از میان گزینه‌های پیشنهادی انتخاب کند یا مقدار جدیدی وارد نماید.

4. تگ <meter>: نمایش مقادیر عددی در یک بازه

برای نمایش مقادیر عددی در یک بازه مشخص، مانند سطح باتری یا کیفیت سیگنال، از <meter> استفاده می‌شود:

<meter value="75" min="0" max="100" low="30" high="70" optimum="80"></meter>

این تگ نیز قابل سفارشی‌سازی با CSS است و در مرورگرهای مدرن پشتیبانی می‌شود.من از آن برای نمایش میزان مصرف ها استفاده میکنم . برای مثال :

<!-- Disk usage (lower is better) -->
<meter value="75" min="0" max="100" low="70" high="90" optimum="0">75%</meter>

<!-- Battery level (higher is better) -->
<meter value="35" min="0" max="100" low="20" high="60" optimum="100">35%</meter>

<!-- CPU usage (lower is better) -->
<meter value="82" min="0" max="100" low="60" high="80" optimum="0">82%</meter>

5. تگ <output>: نمایش نتایج به صورت آنی

برای نمایش محاسبات معمولا توسعه دهنگان از جاوا اسکریپت ، جی کوئری و ایجکس استفاده میکنند در حالی که در Html5 این قابلیت به صورت پیشفرض قرار دارد . مثلا یک ماشین حساب ساده را در نظر بگیرید، شما به راحتی با کدهای زیر میتوانید نتایج را نمایش دهید

<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
  <input type="number" id="a" value="0"> +
  <input type="number" id="b" value="0"> =
  <output name="result" for="a b">0</output>
</form>

من از این قابلیت برای انجام محاسبات استفاده میکنم که به راحتی نتایج را به کاربر نمایش می دهد.

6. تگ <mark>: برجسته‌سازی متن

برای برجسته‌سازی بخش‌هایی از متن، می‌توان از <mark> استفاده کرد:

<p>این یک <mark>متن برجسته</mark> است.</p>

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

mark {
  background-color: #fff9c4;
  padding: 2px 4px;
  border-radius: 3px;
}

مزیت mark این است که به خوانندگان صفحه اعلام میکند که متن برجسته شده است و کاربران درک بهتری از دلیل برجسته شدن این متن خواهند داشت.

7. تگ <time>: نمایش تاریخ و زمان

اکثر توسعه دهنگان برای نمایش تاریخ و ساعت از تگ های input و... استفاده میکنند، در حالی که Html5 این قابلیت را به صورت پیشفرض در خود دارد و نیازی به چیز دیگری نخواهید داشت.

<p>این مقاله در تاریخ <time datetime="2025-05-20">May 20, 2025</time> منتشر شده است.</p>

استفاده از این تگ به شما اجازه میدهد از datetime استاندارد استفاده کنید که هم قابل فهم برای انسان و هم موتورهای جستجو باشد . همچنین موتورهای جستجو میتوانند تاریخ دقیق را استخراج کنند و از نظر سئو نیز برای وبسایت شما یک مزیت به حساب خواهد آمد.

میتوانید از این تگ با قالب های مختلف استفاده کنید

<!-- Just a date -->
<time datetime="2025-05-20">May 20, 2025</time>

<!-- Date and time -->
<time datetime="2025-05-20T14:30:00">2:30 PM on May 20, 2025</time>

<!-- Just a time -->
<time datetime="14:30:00">2:30 PM</time>

<!-- A duration -->
<time datetime="PT2H30M">2 hours and 30 minutes</time>

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

<time datetime="2025-05-18T14:30:00" class="relative-time">2 روز قبل</time>

7. تگ <figure> و تگ <figcaption> : زیرنویس های تصاویر

بیشتر توسعه دهنگان توضیحات تصویر را به صورت پاراگراف نمایش میدهند در حالی که Html5 این قابلیت را به صورت پیشفرض در خود دارد و برای موتورهای جستجو نیز بسیار حائز اهمیت است . برای نمایش توضیحات تصویر از این تگ ها استفاده کنید :

<figure>
  <img src="chart.jpg" alt="چارت فروش 2025">
  <figcaption>توضیحی در مورد تصویر بنویسید</figcaption>
</figure>

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

<!-- Code snippet with caption -->
<figure>
  <pre><code>
function greet(name) {
  return `Hello, ${name}!`;
}
  </code></pre>
  <figcaption>A simple JavaScript greeting function using template literals.</figcaption>
</figure>

<!-- Quote with attribution -->
<figure>
  <blockquote>
    <p>The best way to predict the future is to invent it.</p>
  </blockquote>
  <figcaption>— Alan Kay</figcaption>
</figure>

این تگ برای وبلاگ ها به شدت مهم هست تا جایی که نویسندگان باید حتما در تصاویر و رسانه ها از آن استفاده کنند .

نتیجه گیری :

قدرت HTML5 را دست کم نگیرید و آنرا بپذیرید.

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

اگر شما نیز تگ هایی را میشناسید با ما به اشتراک بگذارید. خوشحال میشویم نظرات شما عزیزان را بدانیم.