برچسب های کمتر رایج HTML که باید بدانید – با کد مثال
فقط تعداد زیادی تگ HTML وجود دارد که افراد معمولاً هنگام ساخت وب سایت از آنها استفاده می کنند.
اما از آنجایی که بیش از 100 عنصر HTML وجود دارد، به این فکر کردم که آیا برچسب‌های مبتدی‌پسند دیگری وجود دارد که من در مورد آنها نمی‌دانم - و ممکن است دیگران نیز مفید باشند.
پس از انجام برخی تحقیقات، به مجموعه ای از تگ های HTML کمتر شناخته شده، اما بسیار مفید رسیدم.
به نام "HTML for Babies"" width="541" height="399" loading="lazy"> 1. عنصر <base>
هنگامی که ویژگی href را روی a برچسب روی یک URL نسبی تنظیم می کنید، URL پایه پیش فرضی که در نظر می گیرد URL location.href است.
شما می توانید با تعریف این تگ در بالای تمام عناصر HTML که با URL های نسبی سروکار دارند، این رفتار را لغو کنید.
به عنوان مثال، اگر من این کار را انجام دهم:
<head> <base href="https://syntackle.live" /> </head> <body> <a href="/contact/">Contact</a> </body> سپس URL href برای تگ a https://syntackle.live/contact/ خواهد بود.
به خاطر داشته باشید که فقط یک تگ <base> در هر صفحه می تواند وجود داشته باشد. اگر چندین تگ <base> تعریف کنید، تنها اولین تگ در نظر گرفته می شود.
شما در بیشتر مواقع به این عنصر نیاز نخواهید داشت، اما اگر احساس می کنید که همه URL های موجود در یک صفحه به سایت دیگری اشاره می کنند، اعلام آن سودمند است.
2. عنصر <aside>
می توانید از این عنصر برای هر محتوایی که مستقیماً با محتوای اصلی صفحه مرتبط نیست استفاده کنید. برای نمایش تبلیغات، پست های مرتبط، محتوای تبلیغاتی، نقل قول ها، عناصر ناوبری و غیره به خوبی کار می کند.
<main> <h2>Post</h2> <p>This post is about a breed of dogs.</p> <aside> <p>Learn more about cats.</p> </aside> </main> به عنوان مثال، در قطعه فوق، پست عمدتاً در مورد سگ ها و نژادهای آنها است. اما اگر مقاله‌ای درباره گربه‌ها نوشته‌اید و می‌خواهید از مقاله سگ به آن پیوند دهید، می‌توانید از عنصر aside برای ذکر آن استفاده کنید. محتوای موجود در عنصر aside می تواند به طور مماس با صفحه مرتبط باشد.
مشخصات HTML چند مثال خوب در مورد نحوه استفاده از عنصر <aside> ارائه می دهد.
3. عنصر <search>
می توانید از عنصر <search> به عنوان محفظه ای برای عناصری که با جستجو یا فیلتر کردن سروکار دارند استفاده کنید. به عنوان مثال، فرمی که یک درخواست POST برای دریافت نتایج جستجو ارسال می کند یا یک جزء جستجو که برای فیلتر کردن به جاوا اسکریپت متکی است.
// search component relying on JavaScript <search> <input type="text" id="searchInput"> <div id="results"></div> </search>این هم یک مثال دیگر:
<search> <form action="search.js" method="POST"> <input type="text" id="searchInput"> <button type="submit">Search</button> </form> </search> در هر دو مثال بالا، عناصر پیچیده شده در عنصر search در عملکرد جستجوی یک سایت نقش دارند.
شما باید از این عنصر استفاده کنید زیرا ارزش معنایی را برای مرورگر و ابزارهای دسترسی مانند صفحه خوان ها فراهم می کند.
4. عنصر <q>
بیشتر مردم فقط از علامت نقل قول (") برای نقل قول استفاده می کنند.اما یک تگ اختصاصی HTML فقط برای این کار وجود دارد.با استفاده از آن می توانید مطلبی را از منبع دیگری نقل قول کنید و با تعریف ویژگی cite آن، می توانید به آن منبع نیز لینک دهید.
<q cite="https://another-source.com">This is a quote from another source.</q>با این حال، با توجه به مشخصات HTML:
استفاده از عناصر q برای علامت گذاری نقل قول ها کاملا اختیاری است. استفاده از نشانه گذاری نقل قول صریح بدون عناصر q به همان اندازه صحیح است. - html.spec.whatwg.org
5. عنصر <var>
اگر در صفحه وب خود با ریاضیات سر و کار دارید، یک مفهوم را توضیح می دهید یا یک مسئله را حل می کنید، این عنصر می تواند در هنگام ذکر متغیرها در هنگام توصیف مسئله مفید باشد.
<p>These are three variables, <var>a</var>, <var>b</var> and <var>c</var><sup>2</sup>.</p> 
همانطور که در بالا نشان داده شده است می توانید از این عنصر برای نشان دادن نمایش تصویری متغیرهای شناخته شده یا ناشناخته استفاده کنید.
6. عنصر <samp>
این عنصر خروجی یک نرم افزار یا سیستم کامپیوتری دیگر را به تصویر می کشد. همچنین یک عنصر kbd (برای نمایش ورودی های کاربر استفاده می شود) وجود دارد که از نظر بصری شبیه به این عنصر است.
می توانید از این عنصر برای نمایش خروجی کنسول یا خروجی یک برنامه کامپیوتری استفاده کنید.
<pre> <code class="language-javascript">console.log(1 + 2)</code> <samp>3<samp> </pre>7. عنصر <datalist>
ممکن است با عنصر select آشنا باشید که به شما امکان می‌دهد مجموعه‌ای از گزینه‌ها را برای انتخاب در اختیار کاربران قرار دهید. یک عنصر مشابه، عنصر datalist است.
تنها تفاوت بین آنها این است که عنصر datalist به جای مجموعه محدودی از گزینه ها، پیشنهاداتی را ارائه می دهد. کاربران همچنین می‌توانند ورودی خود را تایپ کنند اگر هیچ یک از پیشنهادات با نیازهای آنها مطابقت نداشته باشد، در حالی که هنگام استفاده از عنصر انتخاب، کاربران باید از فهرست گزینه‌های موجود در کشویی انتخاب کنند.
می توانید از <datalist> با عنصر input استفاده کنید تا کاربر بتواند هر چیزی را که می خواهد تایپ کند. سپس اگر با مقادیر موجود در فهرست داده مطابقت داشته باشد، کاربر می تواند آن مقدار را انتخاب کند.
برای پیوند دادن عنصر ورودی با فهرست داده، باید از ویژگی list در عنصر ورودی استفاده کنید. مقدار ویژگی فهرست باید id فهرست داده باشد.
<label> Cars: <input name=car list="cars"> <datalist id=cars> <option value="Ferrari"> <option value="Mercedes"> </datalist> </label>از انواع مختلفی از ورودی ها پشتیبانی می کند اما با پشتیبانی جزئی مرورگر همراه است.
8. عنصر <progress>
عنصر پیشرفت بومی در HTML، همانطور که از نام آن پیداست، برای پیگیری پیشرفت یک کار استفاده می شود.
شما می توانید از این عنصر به دو صورت استفاده کنید: قطعی یا نامعین. یک نوار پیشرفت مشخص می‌داند که در حال حاضر کجاست، و اگر حداکثر مقدار مشخص شده باشد، می‌توانید بفهمید چقدر بیشتر باقی مانده است.
برای ایجاد یک نوار پیشرفت معین، باید ویژگی مقدار را مشخص کنید. محدوده پیش فرض مقدار از 0.0 تا 1.0 است. اما شما همچنین می توانید یک مقدار max سفارشی را مشخص کنید که باید یک عدد ممیز شناور معتبر باشد.
<progress value="0">0%</progress> <!-- or --> <progress value="0" max="100">0%</progress>برای افزایش/کاهش مقدار نوار پیشرفت، ویژگی ارزش را به عدد دلخواه تنظیم کنید. در اینجا یک اجرای ساختگی از به روز رسانی پیشرفت آورده شده است:
<body> <progress value="0" max="100"></progress> </body> <script> const progressBar = document.querySelector("progress") setTimeout(() => { setTimeout(() => { progressBar.value = 100 }, 300) progressBar.value = 65 }, 500) progressBar.value = 10 </script> برای نمایش یک نوار پیشرفت نامشخص، نباید ویژگی value را در عنصر <progress> وارد کنید. نوارهای پیشرفت نامشخص زمانی مفید هستند که نمی توانید دقیقاً بگویید کاربر چقدر باید منتظر بماند تا چیزی بارگذاری شود.
<progress id="indeterminate-progress-bar">Indeterminate</progress> 
9. عنصر <dialog>
من این را مفیدترین عنصر امروزه می دانم زیرا شما را از دردسر ایجاد مدال خود با راه حل های z-index نجات می دهد. اما این بدان معنا نیست که باید بیش از حد از آن استفاده کنید . می توانید از آن برای ایجاد گفتگوهای تعاملی مودال/غیر وجهی به منظور هشدار دادن به کاربران یا نمایش یک پیام یک بار مصرف استفاده کنید.
به عنوان مثال، اگر می خواهید یک پیام یک بار مصرف را به کاربرانی که از سایت شما بازدید می کنند نشان دهید، می توانید یک عنصر form را در یک dialog قرار دهید و سپس "گفتگو" را به عنوان روش فرم ذکر کنید. با کلیک بر روی دکمه داخل فرم، دیالوگ بسته می شود.
این یک نوع گفتگوی غیر مودال است و نیازی به جاوا اسکریپت ندارد. ویژگی open به شما می گوید که به محض بارگیری صفحه، دیالوگ نمایش داده می شود.
<dialog open> <p>This is a one time message. Click the button to close it.</p> <form method="dialog"> <button>Ok</button> </form> </dialog> برای ایجاد یک دیالوگ مودال، به کمی جاوا اسکریپت نیاز دارید تا رویدادهای کلیک را مدیریت کند تا مودال نمایش داده و پنهان شود. دو روش وجود دارد - showModal() و close() - که می توانید بعد از دسترسی به عنصر گفتگو با جاوا اسکریپت از آنها استفاده کنید.
<dialog> <p>This is a dialog box.</p> <button id="close">Close</button> </dialog> <button id="open">Open Dialog Box</button> <script> document.querySelector("#open").addEventListener("click", () => { document.querySelector("dialog").showModal() }) document.querySelector("#close").addEventListener("click", () => { document.querySelector("dialog").close() }) </script> کارهای زیادی می توانید با عنصر dialog انجام دهید، اما فقط برای موارد استفاده خاص مانند ارائه یک فرم ثبت نام به کاربر که قابل بسته شدن است، نمایش یک هشدار قبل از انجام یک عمل مهم توسط کاربر و غیره خوب است.
یکی از شرایطی که نباید از آنها استفاده کنید، در طول فرآیند پرداخت یک برنامه تجارت الکترونیک است. این به این دلیل است که کاربر در حال انجام کاری حیاتی است و اگر به طور تصادفی گفتگو را ببندد، در جریان و تجربه کاربر اختلال ایجاد می کند.
HTML معنایی
عناصر ذکر شده در بالا تحت یک اصطلاح چتر قرار می گیرند: HTML معنایی . HTML معنایی به محتوای HTML شما معنی می دهد - نه تنها برای کاربران بلکه به مرورگرها، خزنده ها و ابزارهای دسترسی نیز.
همه نمی توانند صفحه نمایش را ببینند یا از دستگاه هایی مانند ماوس برای پیمایش در وب استفاده کنند. در عوض، آنها بر فناوری‌های کمکی تکیه می‌کنند که به آنها در تفسیر محتوا کمک می‌کند.
همچنین، موتورهای جستجو می‌توانند با پیمایش در HTML معنایی، محتوای مرتبط را راحت‌تر بیابند. به همین دلیل است که هنگام ساختن یک وب سایت باید یکی از اولویت های اصلی شما باشد.
شما همچنین نمی‌خواهید وب‌سایت شما فقط مجموعه‌ای از div باشد، زیرا عنصر div از نظر محتوا برای مرورگر معنایی ندارد - برای یک مرورگر، فقط یک عنصر تقسیم برای جدا کردن محتوا است.
از عناصر div" width="468" height="420" loading="lazy">نتیجه
امروز، شما در مورد برخی از عناصر یا برچسب های HTML که احتمالاً قبلاً درباره آنها نمی دانستید، یاد گرفتید.
برای هر عنصر HTML هدف خاصی وجود دارد و شما باید محتوای خود را درون عناصر مناسب قرار دهید.
شما همچنین در مورد HTML معنایی و اینکه بهترین راه برای معنا بخشیدن و ساختار به محتوای شما است، یاد گرفتید.
برچسب‌ها
|
ارسال نظر