أربعة عناصر مفيدة لحالات خاصة:
• <small>: نص صغير الحجم — يستخدم للتنبيهات القانونية، حقوق النشر، والتعليقات الثانوية. في HTML5 له معنى دلالي: "ملاحظات جانبية بأهمية أقل".
• <mark>: تظليل نصي (highlight) — يعني "هذا الجزء وثيق الصلة بما يبحث عنه المستخدم". مثالي لإبراز نتائج البحث.
• <del>: نص محذوف (مشطوب) — يعني "هذا المحتوى حُذف أو لم يعد صحيحاً". يستخدم لمقارنة الأسعار القديمة والجديدة.
• <ins>: نص مُضاف — يعني "هذا المحتوى أُضيف لاحقاً". عكس <del>. يظهر عادةً تحته خط.
| 1 | <!-- small: ملاحظة جانبية --> |
| 2 | <p>السعر 99 جنيه <small>(شامل الضريبة)</small></p> |
| 3 | |
| 4 | <!-- mark: تظليل وإبراز --> |
| 5 | <p>ابحث عن <mark>JavaScript</mark> في هذا الدليل.</p> |
| 6 | |
| 7 | <!-- del: سعر قديم مشطوب --> |
| 8 | <p>السعر: <del>500 جنيه</del> <ins>350 جنيه</ins></p> |
| 9 | |
| 10 | <!-- del و ins لتتبع التعديلات --> |
| 11 | <p> |
| 12 | عدد المنتجات: <del datetime="2024-01-01">50</del> |
| 13 | <ins datetime="2024-06-01">120</ins> |
| 14 | </p> |
مثال 1: بطاقة منتج مع خصم
| 1 | <div class="product-card"> |
| 2 | <h3>كورس JavaScript الشامل</h3> |
| 3 | <p class="price"> |
| 4 | <del>500 جنيه</del> |
| 5 | <ins><strong>250 جنيه</strong></ins> |
| 6 | <mark>خصم 50%!</mark> |
| 7 | </p> |
| 8 | <p><small>العرض ينتهي في 31 ديسمبر</small></p> |
| 9 | </div> |