تگ‌های باحال اما کمترشناخته‌شده‌ی HTML!

وندا نوژن .

در اینجا قصد دارم چند تا از تگ‌های باحال و کاربردی HTML را معرفی کنم که به نسبت سایر تگ‌ها، اقبال چندانی نداشته‌ و مهجور مانده‌اند!

تگ meter

تگ <meter> برای نمایش مقدار یک کمیت خاص در یک بازه معین به کار می‌رود (مثلا قد، وزن، سن، سرعت، مصرف دیسک و خلاصه هر کمیتی که قابل سنجش اسکالر است).

مثلا فضای پوشش‌دهی دستگاه‌های تصفیه هوای فلان شرکت حداقل 15 و حداکثر 120 مترمربع است و شما دستگاهی خریده‌اید که فقط 45 مترمربع را پوشش می‌دهد؛ اگر از کد زیر استفاده کنید:

<meter min=&quot15&quot max=&quot120&quot value=&quot45&quot>45m²</meter>

نتیجه به این صورت نشان داده می‌شود:

یا مصرف سی‌پی‌یو در کامپیوتر شما به 80 درصد رسیده است:

<meter max=”100” value=&quot0.8&quot>80%</meter>

تگ progress

تگ <progress> تا حدودی شبیه <meter> است و از نظر بصری تفاوت چندانی به آن ندارد. اما از نظر مفهومی متفاوت است و نباید با meter اشتباه گرفته شود. تگ progress همانطور که از نامش برمی‌آید، برای نشان دادن درصد یا میزان پیشرفت یک وظیفه به کار می‌رود و نیاز به بازه معینی ندارد.

مثلا اگر میزان مهارت شما در زبان‌های HTML و CSS به ترتیب 80 و 50 درصد باشد، اینگونه بیان می‌شود:

<label for=&quothtml&quot>HTML</label>
<progress id=&quothtml&quot max=&quot100&quot value=&quot80&quot>80%</progress><br>
<label for=&quotcss&quot>CSS</label>
<progress id=&quotcss&quot max=&quot100&quot value=&quot50&quot>50%</progress>

و اما نتیجه کار:

تگ datalist

تگ <datalist> این امکان را به شما می‌دهد که یک منو یا فهرست کشویی از اطلاعات بسازید، به طوری که به محض شروع مخاطب به تایپ عبارت موردنظر خود، اطلاعات مرتبط برای او نمایش داده شود.

نکته: برای متصل کردن input و datalist به هم دیگر، باید به list در فیلد input همان id شما در datalist نسبت داده شود (در این مثال provinces).

<label for=&quotprovinces&quot>انتخاب استان</label>
<input list=&quotprovinces&quot placeholder=&quotنام استان&quot>
<datalist id=&quotprovinces&quot>
<option value=&quotتهران&quot>
<option value=&quotاصفهان&quot>
<option value=&quotمازندران&quot>
<option value=&quotگیلان&quot>
</datalist>

الآن کد بالا به این شکل نمایش داده می‌شود:

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

اچ‌تی‌ام‌ای این قابلیت را دارد که بتوانید خیلی ساده یک فهرست یا منوی آکاردئونی درست کنید (یعنی فهرستی شامل چند آیتم یا سرفصل که با کلیک بر روی هر یک، باز می‌شود و محتوایی را به نمایش می‌گذارد). برای این کار می‌توانید از تگ‌های <details> و <summary> مشابه مثال زیر استفاده کنید:

<details>
<summary>اچ‌تی‌ام‌ال چیست؟</summary>
<p>اچ‌تی‌ام‌ال زبان توصیف ساختار صفحه‌های وب است</p>
</details>
<details>
<summary>سی‌اس‌اس چیست؟</summary>
<p>سی‌اس‌اس روشی ساده برای نمایش چیدمان و جلوه‌های تصویری بر صفحه‌های وب است</p>
</details>
<details>
<summary>جاوااسکریپت چیست؟</summary>
<p>جاوااسکریپت نوعی زبان سطح بالا، کامپایل درجا، و چندالگویی است.</p>
</details>

و این هم نتیجه کار:

پالت انتخاب رنگ

برای نمایش پالت انتخاب رنگ و نمایش کد رنگ‌ها (RGB و HEX و HSL)، خیلی ساده کافی است از <input type="color"> استفاده کنید. نتیجه به صورت زیر نمایش داده می‌شود:

<input type=&quotcolor&quot>

تگ picture

اگر بخواهید صفحات حاوی عکس را واکنش‌گرا و مناسب نمایش در اسکرین کوچک‌تر (موبایل و تبلت) کنید، به طوری که یا عکس در ابعاد کوچک‌تر نشان داده شود و یا با تصویر دیگری جایگزین شود، می‌توانید از قابلیت تگ <picture> استفاده کنید.

<picture>
<source media=&quot(min-width: 600px)&quot srcset=&quotعکس اصلی.jpg&quot>
<source media=&quot(min-width: 260px)&quot srcset=&quotعکس جایگزین.jpg&quot>
<img src=&quotعکس اصلی.jpg&quot style=&quotwidth:500px;&quotalt=&quotavatar&quot>
</picture>

رفرش خودکار صفحه

برای اینکه صفحه مورد نظر شما بعد از هر N ثانیه به طور خودکار رفرش شود، کافی است که تگ زیر را در قسمت head صفحه قرار دهید و به جای N مدت زمان مدنظر خود را بر حسب ثانیه بنویسید (مثلا 10). این قابلیتی است که به درد صفحات خبری، فروم‌ها و غیره می‌خورد.

<meta http-equiv=&quotrefresh&quot content=&quot10&quot>