HTMLالوسم <time>
- تعريفه
- دعم المتصفحات
- خصائصه
- إستخدامه
- تصميمه الإفتراضي
- نصائح و ملاحظات
تعريفه
نستخدم الوسم <time> على النحو التالي بهدف جعل محركات البحث تفهم التاريخ و الوقت المشار إليه في النص بشكل أفضل.
<time datetime="hidden-time">visible-time</time>
<time datetime="hidden-time">visible-time</time>
- مكان الكلمة
visible-timeنمرر النص العادي الذي سيكون عبارة عن وقت ما و الذي سيظهر في الصفحة. - مكان الكلمة
hidden-timeنمرر التاريخ و الوقت بشكل معين حتى تفهمه محركات البحث.
دعم المتصفحات
الجدول التالي يظهر المتصفحات التي تدعم الوسم <time>.
| Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
| 62 | ≤18 | 22 | 49 | 7 | 62 | 62 | 22 | 46 | 4 | 8.0 |
خصائصه
يملك فقط الخاصية datetime التي يجب إضافتها له و تمرير الوقت أو التاريخ أو كلاهما لها كقيمة و الذي يمكن تحديده بعدة أساليب و إليك بعض الأمثلة:
| الأسلوب | إستخدامه |
|---|---|
yyyy |
لتحديد السنة فقط. مثال: 2019 |
yyyy-mm |
لتحديد السنة و الشهر. مثال: 2019-05 |
yyyy-mm-dd |
لتحديد السنة و الشهر و اليوم. مثال: 2019-05-23 |
yy-mm |
لتحديد أول رقمين في السنة و الشهر. مثال: 19-05 |
yyyy-Wn |
لتحديد السنة و رقم أسبوع محدد فيها. مثال: 2019-W17 |
hh:mm |
لتحديد الساعة و عدد الدقائق. مثال: 14:30 |
hh:mm:ss |
لتحديد الساعة و عدد الدقائق و الثواني. مثال: 14:30:27 |
hh:mm:ss:ms |
لتحديد الساعة و عدد الدقائق و الثواني و أجزاء الثانية الحالية. مثال: 14:30:27.145 |
yyyy-mm-ddThh:mm:ss:ms |
لتحديد التاريخ و الوقت بشكل دقيق جداً. مثال: 2019-05-23T14:30:27.145 |
yyyy-mm-dd hh:mm:ss:ms |
هنا قمنا أيضاً بتحديد التاريخ و الوقت مع وضع مسافة فارغة بدل الحرف T.مثال: 2019-05-23 14:30:27.145 |
إستخدامه
في المثال التالي قمنا بوضع التاريخ و الوقت المذكورين في النص بداخل <time>.
مثال
The game starts at <time datetime="2020-09-01T20:00:00">20:00</time>.
The game starts at <time datetime="2020-09-01T20:00:00">20:00</time>.
تصميمه الإفتراضي
لا يوجد تصميم إفتراضي له.
نصائح و ملاحظات
يمكنك إضافة تصميم خاص لإبراز الوقت الذي يتم ذكره داخل الوسم <time> بواسطة CSS حتى لو لم ترد ذكر التاريخ أو الوقت كالتالي.
مثال
time {
color: red;
font-weight: bold;
}
time {
color: red;
font-weight: bold;
}
