<time> يُحدد تاريخاً أو وقتاً بصيغة يفهمها الآلة والإنسان.
الصفة datetime إلزامية تقنياً للمعنى الدلالي: • تاريخ: YYYY-MM-DD (مثال: 2024-06-15) • وقت: HH:MM (مثال: 14:30) • تاريخ ووقت: 2024-06-15T14:30:00 • مدة: P1Y2M3D (سنة، شهران، 3 أيام) • أسبوع: 2024-W25 • شهر: 2024-06
فوائد time: ✅ محركات البحث تفهمه وتعرضه في Rich Snippets ✅ المتصفحات تستطيع تحويله للمنطقة الزمنية ✅ تطبيقات التقويم تتعرف عليه ✅ يحسّن Schema.org Structured Data
| 1 | <!-- تاريخ فقط --> |
| 2 | <p>نُشر بتاريخ: <time datetime="2024-06-15">15 يونيو 2024</time></p> |
| 3 | |
| 4 | <!-- وقت فقط --> |
| 5 | <p>الدرس في <time datetime="14:30">2:30 م</time></p> |
| 6 | |
| 7 | <!-- تاريخ ووقت كامل --> |
| 8 | <p> |
| 9 | بدء الدورة: |
| 10 | <time datetime="2024-09-01T09:00:00+02:00"> |
| 11 | 1 سبتمبر 2024، الساعة 9 صباحاً |
| 12 | </time> |
| 13 | </p> |
| 14 | |
| 15 | <!-- مدة زمنية --> |
| 16 | <p>مدة الكورس: <time datetime="P30D">30 يوماً</time></p> |
| 17 | |
| 18 | <!-- مدة درس --> |
| 19 | <p>مدة الفيديو: <time datetime="PT45M">45 دقيقة</time></p> |
مثال 1: بطاقة مقالة مع time
| 1 | <article> |
| 2 | <header> |
| 3 | <h2>مقدمة شاملة في HTML5</h2> |
| 4 | |
| 5 | <p class="article-meta"> |
| 6 | بقلم <strong>أحمد محمد</strong> |
| 7 | | |
| 8 | نُشر في |
| 9 | <time datetime="2024-06-15T10:00:00" class="publish-date"> |
| 10 | 15 يونيو 2024 |
| 11 | </time> |
| 12 | | |
| 13 | آخر تحديث: |
| 14 | <time datetime="2024-12-01T15:30:00"> |
| 15 | 1 ديسمبر 2024 |
| 16 | </time> |
| 17 | </p> |
| 18 | |
| 19 | <p> |
| 20 | وقت القراءة المتوقع: |
| 21 | <time datetime="PT8M">8 دقائق</time> |
| 22 | </p> |
| 23 | </header> |
| 24 | |
| 25 | <p>محتوى المقالة هنا...</p> |
| 26 | </article> |