تگ های HTML جدیدی که باید از هم اکنون استفاده کنید

HTML یک زبان دائما در حال تکامل است. W3C از HTML5 به عنوان استاندارد زندگی یاد کرد. به عبارت دیگر، تمام موارد اضافه شده اخیر به HTML5 فقط به عنوان HTML نامیده می شود و هیچ شماره نسخه اضافه نخواهد شد. با انتشار مکرر تگ های HTML جدید، اجازه دهید نگاهی به برخی از آنها بیندازیم.

تگ های رایج HTML5 مانند <header>، <footer>، <nav>، <article> و دیگران به طور گسترده مورد استفاده قرار می گیرند. با این حال، تعدادی از برچسب های اخیر وجود دارد که معنای معنایی بهتری ارائه می دهد.

بیایید در مورد برخی از آنها بحث کنیم.

1. <време>

MDN این را می گوید <time> یک عنصر نشان دهنده یک دوره زمانی معین است. همچنین ممکن است شامل شود datetime صفت.

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

<!-- <time> Syntax -->

<p>Durga Puja starts on <time datetime="2020-09-07">Sept 7</time> in Deshbandhu Park.</p>

<p>The local train leaves Habra station at <time datetime="20:00">8PM</time> and reaches Sealdah station at <time datetime="21:30">9:30PM</time>.</p>

2.

تگ HTML <def> برای اشاره به اصطلاحی که در جمله تعریف شده است استفاده می شود. کلمه تعریف شده معمولاً در ابتدای جمله قرار می گیرد. علاوه بر این، شما همچنین می توانید استفاده کنید <abbr> برچسب اختصاری تعریف

<!-- <def> Syntax -->

<dfn><abbr title="Hyper Text Markup language">HTML</abbr></dfn>
is a markup language that is commonly used for creating webpages.

<def> یک عنصر داخلی است.

3. <маркировка>

این <mark> تگ برای برجسته کردن بخش هایی از متن یا جمله استفاده می شود. نشان دادن اهمیت یا ارتباط یک بخش در یک پاراگراف مفید است.

به طور پیش فرض، اکثر مرورگرها متن را در فریم نمایش می دهند <mark> برچسب‌ها به عنوان متن سیاه روی پس‌زمینه زرد.

<!-- <mark> Syntax -->

<p>There are several new <mark>shopping complex</mark> in Habra</p>

این برای انتخاب بخش هایی از محتوا برای توجه خواننده طراحی شده است.

تفاوت اصلی بین <mark> و <strong> برچسب ها آن است <mark> برای نمایش محتوا با درجه ای از استفاده می شود ارتباط در حالی که <strong> متن را روشن نشان می دهد اهمیت.

4. <подробности>

این <details> برای نمایش جزئیات اضافی که کاربر می تواند مشاهده یا پنهان کند استفاده می شود.

یک ویجت آشکارسازی پیش‌فرض ایجاد می‌کند که در آن اطلاعات تنها زمانی قابل مشاهده است که روی ویجت کلیک شود. <summary> همچنین می توان با آن برای ارائه یک برچسب یا عنوان برای عنصر استفاده کرد.

<!-- <details> Syntax -->

<details>
    <summary>Copyright</summary>
    © - Learn Computer Academy
    <p>All content and graphics of this website are the property of Learn Computer Academy</p>
</details>

<details> مقدار پیش فرض یک بلوک در اکثر مرورگرها است. متأسفانه، هیچ روش داخلی برای متحرک سازی انتقال بین باز و بسته وجود ندارد.

5. <фигура>

این <figure> برچسب برای نگهداری مطالب دیگر مانند تصاویر، نمودارها، عکس ها، لیست کدها و غیره استفاده می شود.

عناصر موجود در <figure> باید خودکفا باشد، به این معنی که نباید بخشی از جریان محتوای دیگر باشد و به راحتی قابل جابجایی باشد بدون اینکه معنای محتوا شکسته شود.

<!-- <figure> Syntax -->

<figure>
  <img src="https://learncomputer.in/wp-content/uploads/2019/12/logo.png" alt="The beautiful LCA logo.">
  <figcaption>LCA Logo</figcaption>

</figure>

<!-- <figure> Syntax -->

<figure>
  <p style="white-space:pre">
Twinkle, twinkle, little star, How I wonder what you are, Up above the world so high, Like a diamond in the sky; Twinkle, twinkle, little star, How I wonder what you are.</p>
  <figcaption><cite>Rhymes for the Nursery</cite>,
    by Jane Taylor</figcaption>
</figure>

6.

این <datalist> شامل مجموعه ای از گزینه های از پیش تعریف شده برای یک <input> عنصر

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

<!-- <datalist> Syntax -->

<label for="location">Choose a place to visit in India:</label>
<input list="places" id="location" name="location" />
<datalist id="places">
  <option value="Goa">
  <option value="Darjeeling">
  <option value="Puri">
  <option value="Andaman">
  <option value="Ladakh">
  <option value="Varanasi">
</datalist>

7. <снимка>

این <picture> برچسب مشابه است <img> برچسب، اما با اجازه دادن به چندگانه، انعطاف پذیری را فراهم می کند <source> عناصری برای همان منبع که می توانند بر اساس سناریوهای مختلف نمایشگر/دستگاه سازگار شوند.

<!-- <picture> Syntax -->

<picture>
    <source  media="(min-width: 500px)">
    <img src="/wp-content/uploads/2020/01/Website-Design-Facts-You-Probably-Didn%E2%80%99t-Know-About.jpg">
</picture>

مرورگر به هر کودک نگاه می کند <source> مورد و بهترین تطابق را انتخاب کنید. اگر هیچ منطبقی پیدا نشد یا اگر مرورگر پشتیبانی نمی کند <picture> عنصر، URL از <img> عناصر src ویژگی انتخاب شده است. سپس تصویر انتخاب شده در نمایش داده می شود <img> عنصر

در حالی که هر دو <video> و <audio> عناصر حاوی <source> مورد، الگوریتم انتخاب منبع برای آن متفاوت است <picture> عنصر

نکته مهمی که باید به آن توجه کرد این است <picture> خود عنصر چیزی را نشان نمی دهد. زمینه را برای محتوا فراهم می کند <img> عنصری که به آن امکان می دهد از بین چندین URL انتخاب کند.

8.

این <dl> برای نمایش یک لیست با تعریف یا توضیحات استفاده می شود. برچسب همراه با استفاده می شود <dt> و <dd> برای نمایش لیست

<!-- <dl> Syntax -->

<p>Web Design basic languages:</p>

<dl>
    <dt>HTML</dt>
    <dd>Markup language for creating webpages.</dd>

    <dt>CSS</dt>
    <dd>Giving styles to markup</dd>

    <dt>JavaScript</dt>
    <dd>Provides scripting functionality</dd>
</dl>

همچنین می توان چند اصطلاح را با یک یا چند توصیف متناظر تعریف کرد. <dt> و <dd> داخل a <dl> برچسب.

9. <код>

<code> تگ عبارتی است که برای تعریف یک کد کامپیوتری در HTML استفاده می شود.

متن داخل <code> برای نمایش یک قطعه کوتاه از کد کامپیوتر استفاده می شود.

<!-- <code> Syntax -->

<code>A piece of computer code</code>

<pre> برچسب را می توان بسته بندی کرد <code> عنصری برای نمایش چندین خط کد.

10. <метър>

این <meter> برچسب برای اندازه گیری داده ها در یک محدوده مشخص استفاده می شود. می تواند یک مقدار اسکالر یا یک مقدار کسری را نشان دهد.

<!-- <meter> Syntax -->

<meter value="25" min="1" max="100">25 out of 100</meter><br>
<meter value="0.8">80%</meter>

این <meter> به عنوان a نیز شناخته می شود پیمانهو ممکن است برای نمایش میزان استفاده از دیسک، مبلغ جمع‌آوری‌شده در طول فعالیت‌های جمع‌آوری سرمایه، یا مرتبط بودن یک نتیجه جستجو استفاده شود.

11. <прогрес>

این <progress> برای نشان دادن پیشرفت یک کار استفاده می شود.

تفاوت میان <meter> و <progress> این است که چگونه ارزش تغییر می کند. پیشرفت یک تغییر یک جهته از صفر به حداکثر است. در حالی که مقدار متر می تواند در هر جهت متفاوت باشد.

<!-- <progress> Syntax -->

<label for="file">File progress:</label>

<progress id="file" max="100" value="30"> 30% </progress>

12. <шаблон>

این <template> تگ حاوی کد HTML است که هنگام بارگذاری صفحه نمایش داده نمی شود. از جاوا اسکریپت می توان برای قابل مشاهده کردن محتوای داخل تگ استفاده کرد.

<!-- <template> Syntax -->

<template>
  <h2>Image of Car</h2>
  <img src="car.jpg">
</template>

13. <песен>

این <track> می توان از آن برای نگهداری زیرنویس یا متن استفاده کرد <audio> یا <video> برچسب ها. هنگام پخش رسانه قابل مشاهده است.

<!-- <track> Syntax -->

<video width="320" height="240" controls>
  <source src="bollywood.mp4" type="video/mp4">
  <source src="bollywood.ogg" type="video/ogg">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  <track src="subtitles_hi.vtt" kind="subtitles" srclang="hi" label="Hindi">
</video>

14.

این <var> تگ عبارتی است که برای تعریف متغیرها استفاده می شود.

اکثر مرورگرها یک سبک فونت را اعمال می کنند "italic" با همان فونت فعلی هنگام رندر <var>.

<!-- <var> Syntax -->

<p><var>a</var>(<var>b</var>+<var>c</var>)=<var>ab</var>+<var>ac</var></p>

15.

این <wbr> برچسب یعنی امکان تقسیم کلمات. این نشان می دهد که در کجای متن بهتر است یک خط جدید اضافه شود.

<!-- <wbr> Syntax -->

<p>This is a veryveryveryveryveryveryvery<wbr>veryveryveryveryver<wbr>yveryveryveryveryveryvery<wbr> long word.</p>

این یک عنصر خالی است، به این معنی که هیچ برچسب پایانی ندارد

16. <данни>

این <data> هم یک مقدار قابل خواندن توسط ماشین برای پردازشگرهای داده و هم یک مقدار قابل خواندن توسط انسان برای رندر در مرورگر فراهم می کند.

<!-- <data> Syntax -->

<ul>
  <li><data value="01234">Habra</data></li>
  <li><data value="96480">Barasat</data></li>
  <li><data value="42501">kolkata</data></li>
</ul>

اگر محتوا مربوط به تاریخ یا زمان باشد، <time> باید از برچسب استفاده شود

نتیجه

چند تگ جدید HTML وجود دارد که باید از آنها استفاده کنید. علاوه بر این، چندین توکن جدید دیگر نیز وجود دارد که یا پیشنهاد شده اند یا به تازگی منتشر شده اند. همچنین، برای فهرستی از برچسب‌ها، می‌توانید این برگه‌های تقلب HTML و HTML-DOM را بررسی کنید.

می‌توانید برچسب‌های پیشنهادی HTML جدید را در اسناد نشانه‌گذاری پیشنهادی در w3 org بررسی کنید.

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

از موسسه ما دیدن کنید، آموزش آکادمی کامپیوتر برای یادگیری طراحی سایت در هابرا،