تگ‌های کم‌تر شناخته‌ شده و کاربردی html

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

این اتفاقات اصولا به دلیل سطحی نگری و آسان‌انگاری HTML توسط توسعه‌دهندگان رخ می‌دهد؛ اما باید به این نکته توجه داشته باشید که با صرف مدت زمان کمی برای یادآوری و یا حتی یادگیری مباحث این‌چنین در HTML، می‌توانید گاهی اوقات باعث کاهش قابل توجه میزان کدهای css یا js پیچیده‌ی خود شوید.

در این مقاله قصد داریم چند تگ HTML را که توسط توسعه‌دهندگان دست کم گرفته شده اند را به شما معرفی کنیم.

1- <picture>

ساختار این تگ مانند تگ <source> است؛ فقط با این تفاوت که تگ سورس برای ویدئو مورد استفاده قرار می‌گیرد و تگ picture برای تصاویر مورد استفاده قرار می‌گیرد.

شاید از خود بپرسید که مگر برای تصاویر از تگ <img> استفاده نمی‌کنیم؟ چرا باید به جای آن از این تگ استفاده کنم؟

تگ <picture> قابلیت‌های بیش‌تری نسبت به تگ img در اختیار شما قرار می‌دهد و کاربرد اصلی آن زمانی است که شما از یک تصویر چند نسخه‌ی متفاوت با کیفیت‌های متفاوت دارید؛ البته که شاید شما برای مدیریت کردن چنین مواردی از رندرینگ سمت سرور برای تشخیص مشخصات دستگاه کاربر خود استفاده کنید و تصویر مناسب را برای او فراهم کنید. تگ picture برای مدیریت کردن این اتفاق از سمت کلاینت و فرانت اند کاربرد دارد و شما می‌توانید این مدیریت را به وسیله‌ی مدیا کوئری‌های اعمال شده بر روی این تگ، به سرانجام برسانید. حال اگر این تگ را با گزینه‌های ریسپانسیو کردن css ای کلاسیک نیز ترکیب کنید، می‌توانید به نتیجه‌ای ایده‌آل برسید.

در زیر می‌توانید مثالی از این تگ را مشاهده کنید:

<picture>
  <source media="(max-width: 500px)" srcset="alt/image.img">
  <img src="path/to/image.img">
</picture>

2- <fieldset>

HTML دارای form group نیتیو خود است. با استفاده از این تگ نه نتها به بهبود سئو وب‌سایت خود می‌پردازید بلکه به مدت زمان کم‌تری هم برای ساخت layout فرم خود نیاز خواهید داشت؛ البته که حالت پیش‌فرض زیبایی ندارد و نیاز به شخصی‌سازی دارد اما حداقل پوزیشن مناسبی به المنت‌هایتان می‌دهد.

مثال استفاده از تگ <fieldset>:

<fieldset>
  <legend>Login:</legend>
  User: <input type="text"><br>
  password: <input type="password"><br>
  <button>Login</button>
</fieldset>

3- <progress>

امروزه اپ‌های زیادی را با progress bars جذاب و زیبا می‌بینیم؛ ولی با این حال متوجه نمی‌شوم که چرا از تگ <progress> که مختص به این‌کار است، استفاده چندانی نمی‌شود. شما می‌توانید در این تگ مقدار min و max (بیشینه و کمینه) را مشخص کنید و css مورد علاقه‌ی خود را نیز به آن اضافه کنید.

مثالی از این تگ:

<progress max=100 value=13></progress>

لازم به ذکر است که با استفاده از جاوااسکریپت می‌توان پویایی و منطق را به پروگس بارها افزود و آن‌ها را دینامیک کرد.

4- <base>

این تگ جزو پرکاربردترین‌ تگ‌های این مقاله است که بیش از آن‌چه فکرش را بکنید به کارتان می‌آید. وظیفه‌ی این تگ مدیریت بهتر آدرس‌دهی به تگ‌های <a> در صفحه‌ی وب شما (به عنوان یک توسعه‌دهنده) است. شما با این تگ می‌توانید ریشه یا root تمامی لینک‌های مشخص شده در صفحه‌تان را تعیین کنید.

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

توجه داشته‌باشید که تگ <base> درون تگ <head> جای می‌گیرد.

<base href=”https://www.example.com/" target=”_blank”>
<a href="a-post.html">A post</a>

5- تگ‌های ورودی یا اینپوت

احتمالا شما نیز به مانند خیلی از افراد دیگر تنها از چند نوع (type) خاص از تگ‌ <input> مانند text و password استفاده می‌کنید. پیشنهاد می‌کنم برای دیدن قدرت HTML 5 گاهی اوقات از دیگر type های ورودی نیز استفاده کنید تا مدیریت مناسب مرورگر نسبت‌ به آن‌ها را درک کنید.

Date input

مشهورترین تایپ این دسته [type=date] است. البته تایپ‌های دیگری نیز در این دسته جای می‌گیرند:

<input type=”date” />
<input type=”datetime-local” />
<input type=”month” />
<input type=”week” />
<input type=”time” />

خروجی‌های این ورودی‌ها در فرمت‌هایی متناسب با کلاس Date() است.

Color picker

ورودی نوع رنگ [type=color] بسیار وابسته به مرورگر کاربرانتان است و با توجه به آن، کاربرانتان ممکن است چیزهای متفاوتی را ببینند؛ اما به هرحال روشی ساده و سریع برای ورودی گرفتن کد رنگ از کاربرانتان به صورت زیر است:

<input type=”color” />

خروجی این اینپوت، کد هگزا دسیمال رنگ انتخابی کاربر است.

Range

این نوع ورودی [type=range] مناسب مواقعی است که قصد دریافت عددی در رنج یا بازه‌ی مشخصی را دارید. به عنوان مثال می‌توان از این نوع ورودی برای تنظیم صدای موسیقی در صفحه وب‌تان استفاده کنید.

<input type=”range” />

6- <details>

با استفاده از این تگ می‌توانید بخشی پنهان و قابل شخصی‌سازی را به شکل نیتیو در کد HTML خود پیاده‌سازی کنید. چنین چیزی را احتمالا پیش از این به وسیله‌ی CSS و JS پیاده‌سازی می‌کردید ولی از امروز می‌دانید که روشی سریع‌تر و بهینه‌تر برای انجام این کار وجود دارد.

ساختار کلی استفاده از تگ <detail> را در زیر مشاهده می‌کنید:



<details>

    <summary>

        <span class="summary-title">Details element with custom arrow!</span>

        <div class="summary-chevron-up">

            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>

        </div>

    </summary>




    <div class="summary-content">Give me attention or face the wrath of my claws give me attention or...

</div>

    <div class="summary-chevron-down">

        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-up"><polyline points="18 15 12 9 6 15"></polyline></svg>

       

</details>

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

7- تگ‌های قالب‌بندی متون

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

<mark>

شما می‌توانید یک متن را با استفاده از تگ <span> و دادن رنگ پس‌زمینه به وسیله‌ی کد css مانند background-color: ; هایلایت کنید؛ حال از این پس می‌توانید با استفاده از تگ mark سریع‌تر به این هدفت برسید و به متون مورد نظرتان رنگ پس زمینه بدهید. رنگ پیش‌فرض این تگ زرد است اما شما می‌توانید این رنگ را نیز با استفاده از css به دلخواه خود تغییر دهید.

<p>
 Lorem ipsum dolor sit amet consectetur adipisicing elit. <mark>Dolores temporibus vitae praesentium quaerat</mark> quidem eaque dignissimos corporis dolorum explicabo? Alias? 
</p>

<abbr>

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

<abbr title=” Do I Eat Today?”>DIET</abbr>

از این تگ و اتریبیوت title آن می‌توان برای دستیابی به tooltip نیتیو HTML نیز استفاده کرد.

<pre>

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

<pre>
    /* Code */
    var json = {
       a: 1,
       b: 2,
       c: 3
    }
 
    function example(){
       console.log(“Hello world”);
       return true;
    }
 
    example();
 
 </pre>

<hr>

این تگ دقیقا وظیفه‌ی فورمت دادن به متن را ندارد اما می‌تواند کاربرد مناسبی در تگ <p> داشته باشد. این تگ به عنوان یک جداکننده مورد استفاده قرار می‌گیرد. در حالت پیش‌فرض تگ <hr> ۱۰۰٪ عرض پدر خود را اشغال می‌کند و رنگ پس‌زمینه‌ی سفید دارد.

<!-- Simple as this: -->
<hr />

تنها با تغییر دادن پراپرتی css ای border-color می‌توانید رنگ این جداکننده‌ی افقی را نیز به دلخواه خود تغییر دهید.

8- [contenteditable]

شاید باورتان نشود اما ساختن یک قسمت قابل ویرایش توسط کاربر در HTML به سادگی افزودن اتریبوت contenteditable به تگ مورد نظرتان است. پس از این‌ پس می‌توانید با اضافه کردن این اتریبیوت به تگ‌های HTML ای خود، به کاربر قابلیت تعامل بیش‌تر با وب‌سایت‌تان و ویرایش متون داخل تگ‌هایتان را بدهید.

<div contenteditable>
    <p>A lorem text</p>
</div>

اگر کمی عمیق‌تر به این قابلیت HTML نگاه کنید، متوجه قدرت آن می‌شوید! شما می‌توانید با استفاده از این اتریبیوت به سادگی یک ویرایش‌گر متن (text editor) حرفه‌ای درون سند HTML به وجود آورید. در این‌جا می‌توانید یک ویرایش‌گر متن را که توسط کتاب‌خانه‌ی Quilljs ساخته شده است را ببینید. در واقع این کتاب‌خانه نیز در دورن خود از contenteditable برای ساخت ویرایش‌گرهای متن استفاده می‌کند.

جمع‌بندی

همیشه نگاهی به تمامی تگ‌های HTML داشته باشید و بدانید که ممکن است استفاده از برخی از آن‌ها کار شما را بسیار راحت‌تر و بهینه‌تر از گذشته کنند. امیدوارم با خواندن این مقاله ترغیب به جست‌و‌جوی بیش‌تر راجع به تگ‌ها و اتریبیوت‌های HTML مانند data-* یا pattern و hidden شوید.

منبع