إعلان
تعلم الآن

HTML الوسم <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>.
		

جرب الكود

تصميمه الإفتراضي

لا يوجد تصميم إفتراضي له.

نصائح و ملاحظات

يمكنك إضافة تصميم خاص لإبراز الوقت الذي يتم ذكره داخل الوسم <time> بواسطة CSS حتى لو لم ترد ذكر التاريخ أو الوقت كالتالي.

مثال

time {
	color: red;
	font-weight: bold;
}
		

جرب الكود

الدورات

أدوات مساعدة

أقسام الموقع

دورات
مقالات كتب مشاريع أسئلة