11 تگ غیر معمول HTML برای تقویت مهارت های توسعه وب شما

<p>
  This product is <s>out-of-stock</s> currently available at a discounted
  price!
</p>

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

4.

هنگامی که می خواهید معنای معنایی را به تاریخ ها و زمان ها در محتوای خود اضافه کنید، تگ مفید است.

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

<p>
  The Declaration of Independence was signed on
  <time datetime="1776-07-04">July 4, 1776</time>.
</p>

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

5.

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

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

<p>
  <bdi>5,000</bdi> people attended the conference.
</p>

در این مثال، عنصر عدد 5000 را می‌پیچد. این تضمین می کند که اگر متن اطراف به زبان دیگری باشد یا نیاز به قالب بندی متفاوتی داشته باشد، با شماره تداخلی ایجاد نمی کند.

6. ، ،

برای تایپوگرافی آسیای شرقی، جایی که راهنماهای تلفظ، فوریگانا، یا حاشیه نویسی های دیگر معمولاً در بالا یا پایین کاراکترها استفاده می شوند، تگ های ، و وارد عمل می شوند.

<p>
  I'm learning
  <ruby>漢<rt>かん</rt></ruby>字<rp>(</rp><rt>Kanji</rt><rp>)</rp>.
</p>

در این مثال، عنصر حاوی کاراکتر 漢 (Kanji) و عنصر حاوی تلفظ かん (kan) است. عناصر برای مرورگرهایی که از حاشیه نویسی روبی پشتیبانی نمی کنند، پرانتزهای بازگشتی ارائه می کنند.

7.

وقتی کلمات طولانی دارید که ممکن است طرح شما را خراب کند، تگ اینجاست تا به شما کمک کند. این فرصتی را برای شکستن خط (فرصت شکست کلمه) در یک کلمه طولانی پیشنهاد می کند، جایی که مرورگر ممکن است متن را بپیچد.

<p>
  This is an example of a long url: https://www.example.org/<wbr>with/a/long/path/and/a?query=string.
</p>

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

8. _و

برای نمادهای علمی یا ریاضی، فرمول های شیمیایی یا پاورقی ها، می توانید از تگ های _{و ^{به ترتیب برای متن زیرنویس و بالانویس استفاده کنید.}}

<p>
  The chemical formula for water is H<sub>2</sub>O,
  and the Pythagorean theorem is
  a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>.
</p>

این مثال از تگ _{برای نمایش 2 در H2O به عنوان زیرنویس استفاده می کند، در حالی که تگ های ^{شارح های قضیه فیثاغورث را نشان می دهند.}}

9. <متر>

آیا نیاز به نمایش اندازه گیری های اسکالر در یک محدوده شناخته شده، مانند استفاده از دیسک، رتبه بندی، یا نمرات امتحان دارید؟ تگ شما را تحت پوشش قرار داده است.

با استفاده از ویژگی های مقدار، min و max می توانید به ترتیب مقدار فعلی، حداقل مقدار و حداکثر مقدار اندازه گیری را تعریف کنید.

<meter value="75" min="0" max="100">75%</meter>

در این مثال، عنصر نشان دهنده نمره امتحان 75٪ است.

10. <گفتگو>

هنگامی که شما نیاز به ایجاد یک کادر محاوره ای یا یک پوشش پنجره برای مدال ها یا تعاملات پاپ آپ مودال خوب دارید، تگ

<dialog open>
  <p>This is a dialog box!</p>
  <button>Close</button>
</dialog>

<select>
  <optgroup label="Asia">
    <option value="kr">South Korea</option>
  </optgroup>

  <optgroup label="Europe">
    <option value="de">Germany</option>
  </optgroup>
</select>