HTML5’te time Elementini Kullanma Rehberi<\/h2>\n
Web sayfalar\u0131nda tarih ve saat bilgilerini g\u00f6stermek, kullan\u0131c\u0131 deneyimi a\u00e7\u0131s\u0131ndan olduk\u00e7a \u00f6nemlidir. Ancak bu bilgileri sadece metin olarak sunmak, arama motorlar\u0131, eri\u015filebilirlik ara\u00e7lar\u0131 ve di\u011fer makineler i\u00e7in anlams\u0131z kalabilir. HTML5 ile birlikte tan\u0131t\u0131lan `<\/code> elementi, bu sorunu \u00e7\u00f6zmek ve web i\u00e7eri\u011fine semantik bir anlam katmak i\u00e7in tasarlanm\u0131\u015ft\u0131r. Bu rehberde, <\/code> elementinin ne oldu\u011funu, nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131, avantajlar\u0131n\u0131 ve en iyi uygulamalar\u0131n\u0131 detayl\u0131 bir \u015fekilde inceleyece\u011fiz.<\/p>\n`

time Elementinin Temelleri ve Kullan\u0131m\u0131<\/h3>\n<\/code> elementi, belirli bir zaman noktas\u0131n\u0131 veya tarih aral\u0131\u011f\u0131n\u0131 temsil etmek i\u00e7in kullan\u0131l\u0131r. En \u00f6nemli \u00f6zelli\u011fi, insan taraf\u0131ndan okunabilen i\u00e7eri\u011fin yan\u0131 s\u0131ra, makine taraf\u0131ndan okunabilen bir “datetime” (tarih ve saat) niteli\u011fine sahip olabilmesidir. Bu nitelik, ISO 8601 standard\u0131na uygun formatta tarih ve saat bilgisini i\u00e7erir.<\/p>\n
Temel s\u00f6zdizimi olduk\u00e7a basittir:<\/p>\n
[\u0130nsan taraf\u0131ndan okunabilen tarih ve\/veya saat]<\/time>\n<\/code><\/pre>\n\u00d6rne\u011fin, bir blog yaz\u0131s\u0131n\u0131n yay\u0131nlanma tarihini belirtmek i\u00e7in:<\/p>\n
Bu makale 27 Ekim 2023<\/time> tarihinde yay\u0131nlanm\u0131\u015ft\u0131r.<\/p>\n<\/code><\/pre>\n
Bu \u00f6rnekte, kullan\u0131c\u0131 “27 Ekim 2023” ifadesini okurken, taray\u0131c\u0131lar, arama motorlar\u0131 ve di\u011fer programlar, datetime<\/code> niteli\u011findeki “2023-10-27” de\u011ferini standart bir tarih format\u0131 olarak anlayabilir. Bu, i\u00e7eri\u011fin daha iyi indekslenmesini, takvim uygulamalar\u0131na entegrasyonu veya zaman bazl\u0131 filtrelemeyi kolayla\u015ft\u0131r\u0131r.<\/p>\n
datetime<\/code> niteli\u011fi, <\/code> elementinin semantik g\u00fcc\u00fcn\u00fc sa\u011flayan kilit noktad\u0131r. E\u011fer datetime<\/code> niteli\u011fi belirtilmezse, element sadece i\u00e7eri\u011fi temsil eden genel bir inline element gibi davran\u0131r ve semantik faydas\u0131 azal\u0131r. Ancak, i\u00e7eri\u011fin kendisi ge\u00e7erli bir tarih veya saat format\u0131nda ise, datetime<\/code> niteli\u011fini atlamak da teknik olarak m\u00fcmk\u00fcnd\u00fcr (\u00f6rne\u011fin, 2023-10-27<\/time><\/code>). Yine de en iyi uygulama, her zaman datetime<\/code> niteli\u011fini kullanmakt\u0131r.<\/p>\n
datetime Niteli\u011finin Detaylar\u0131 ve ISO 8601 Standard\u0131<\/h3>\ndatetime<\/code> niteli\u011finin de\u011feri, Uluslararas\u0131 Standardizasyon \u00d6rg\u00fct\u00fc (ISO) taraf\u0131ndan tan\u0131mlanan ISO 8601 standard\u0131na uygun olmal\u0131d\u0131r. Bu standart, tarih ve saat bilgilerini tutarl\u0131 ve makine taraf\u0131ndan kolayca yorumlanabilir bir \u015fekilde temsil etmek i\u00e7in \u00e7e\u015fitli formatlar sunar. \u0130\u015fte en yayg\u0131n kullan\u0131lan formatlar:<\/p>\n
Tam Tarih<\/h4>\nYYYY-MM-DD<\/code> format\u0131nda y\u0131l, ay ve g\u00fcn belirtilir.<\/p>\n
Proje ba\u015flang\u0131c\u0131: 15 Ocak 2023<\/time>.<\/p>\n<\/code><\/pre>\n
Y\u0131l ve Ay<\/h4>\nSadece y\u0131l ve ay belirtmek i\u00e7in YYYY-MM<\/code> format\u0131 kullan\u0131l\u0131r.<\/p>\n
Finansal rapor d\u00f6nemi: Ekim 2023<\/time>.<\/p>\n<\/code><\/pre>\n
Sadece Y\u0131l<\/h4>\nSadece y\u0131l belirtmek i\u00e7in YYYY<\/code> format\u0131 kullan\u0131l\u0131r.<\/p>\n
\u015eirket 1998<\/time> y\u0131l\u0131nda kuruldu.<\/p>\n<\/code><\/pre>\n
Sadece Saat<\/h4>\nSadece saat belirtmek i\u00e7in HH:MM<\/code>, HH:MM:SS<\/code> veya HH:MM:SS.sss<\/code> (milisaniyelerle) formatlar\u0131 kullan\u0131l\u0131r.<\/p>\n
Toplant\u0131 saati: \u00d6\u011fleden sonra 2:30<\/time>.<\/p>\n
Etkinlik ba\u015flang\u0131c\u0131: Sabah 9:00<\/time>.<\/p>\n<\/code><\/pre>\n
Tarih ve Saat<\/h4>\nTarih ve saati birlikte belirtmek i\u00e7in YYYY-MM-DDTHH:MM<\/code> veya YYYY-MM-DDTHH:MM:SS<\/code> formatlar\u0131 kullan\u0131l\u0131r. ‘T’ karakteri, tarih ve saat aras\u0131nda ay\u0131r\u0131c\u0131 g\u00f6revi g\u00f6r\u00fcr.<\/p>\n
Etkinlik tarihi ve saati: 8 Mart 2024, ak\u015fam 7<\/time>.<\/p>\n<\/code><\/pre>\n
Saat Dilimleri<\/h4>\nSaat dilimi bilgisi, k\u00fcresel uygulamalar i\u00e7in hayati \u00f6neme sahiptir. ISO 8601, UTC’den (Coordinated Universal Time) ofsetleri veya ‘Z’ (Zulu time, yani UTC) kullanarak saat dilimlerini belirtmenize olanak tan\u0131r.<\/p>\n
\nUTC (Zulu Time):<\/strong> YYYY-MM-DDTHH:MM:SSZ<\/code><\/li>\n
Ofset ile:<\/strong> YYYY-MM-DDTHH:MM:SS+HH:MM<\/code> veya YYYY-MM-DDTHH:MM:SS-HH:MM<\/code><\/li>\n<\/ul>\nU\u00e7u\u015f kalk\u0131\u015f saati (UTC): 20 Ocak 2024, 10:00 UTC<\/time>.<\/p>\n
Yerel saat diliminde (\u00f6rne\u011fin \u0130stanbul i\u00e7in UTC+03:00): 20 Ocak 2024, 13:00 (\u0130stanbul)<\/time>.<\/p>\n<\/code><\/pre>\n
Hafta Numaralar\u0131<\/h4>\nBaz\u0131 i\u015f s\u00fcre\u00e7lerinde veya takvimlerde hafta numaralar\u0131 \u00f6nemlidir. YYYY-WNN<\/code> format\u0131 kullan\u0131l\u0131r.<\/p>\n
Teslimat haftas\u0131: 2024 y\u0131l\u0131n\u0131n 5. haftas\u0131<\/time>.<\/p>\n<\/code><\/pre>\n
Ordinal Tarihler (Y\u0131l\u0131n G\u00fcn\u00fc)<\/h4>\nY\u0131l\u0131n ka\u00e7\u0131nc\u0131 g\u00fcn\u00fc oldu\u011funu belirtmek i\u00e7in YYYY-DDD<\/code> format\u0131 kullan\u0131l\u0131r (DDD, 001’den 366’ya kadar bir de\u011ferdir).<\/p>\n
Y\u0131l\u0131n 100. g\u00fcn\u00fc: 10 Nisan 2024<\/time>.<\/p>\n<\/code><\/pre>\n
Bu \u00e7e\u015fitli formatlar, <\/code> elementinin hemen her t\u00fcrl\u00fc tarih ve saat bilgisini semantik olarak ifade etmesine olanak tan\u0131r.<\/p>\n
time Elementinin Avantajlar\u0131 ve Kullan\u0131m Senaryolar\u0131<\/h3>\n<\/code> elementini kullanman\u0131n bir\u00e7ok \u00f6nemli avantaj\u0131 vard\u0131r:<\/p>\n
Semantik Anlam ve SEO<\/h4>\nWeb sayfalar\u0131ndaki i\u00e7erik, sadece g\u00f6rsel olarak de\u011fil, ayn\u0131 zamanda anlamsal olarak da zenginle\u015ftirilmelidir. <\/code> elementi, bir metin par\u00e7as\u0131n\u0131n “tarih” veya “saat” oldu\u011funu a\u00e7\u0131k\u00e7a belirtir. Bu, arama motorlar\u0131n\u0131n i\u00e7eri\u011fi daha iyi anlamas\u0131na ve indekslemesine yard\u0131mc\u0131 olur. \u00d6rne\u011fin, bir etkinlik arayan kullan\u0131c\u0131lar i\u00e7in, etkinlik tarihleri do\u011fru bir \u015fekilde etiketlendi\u011finde arama sonu\u00e7lar\u0131nda daha alakal\u0131 g\u00f6r\u00fcnebilir.<\/p>\n
Makine Okunabilirli\u011fi ve Eri\u015filebilirlik<\/h4>\nEkran okuyucular\u0131 gibi eri\u015filebilirlik ara\u00e7lar\u0131, <\/code> elementini tan\u0131yarak kullan\u0131c\u0131lara daha do\u011fru ve anlaml\u0131 bilgiler sunabilir. Ayr\u0131ca, otomatize edilmi\u015f sistemler (API’lar, veri i\u015fleme ara\u00e7lar\u0131) bu standartla\u015ft\u0131r\u0131lm\u0131\u015f format\u0131 kolayca ayr\u0131\u015ft\u0131rabilir ve kullanabilir. Bu, takvim uygulamalar\u0131yla entegrasyon, hat\u0131rlat\u0131c\u0131lar olu\u015fturma veya veri analizi gibi senaryolarda b\u00fcy\u00fck kolayl\u0131k sa\u011flar.<\/p>\n
Uluslararas\u0131la\u015fma (i18n)<\/h4>\ndatetime<\/code> niteli\u011findeki standart format sayesinde, web sayfas\u0131n\u0131n i\u00e7eri\u011findeki tarih ve saat, kullan\u0131c\u0131n\u0131n yerel ayarlar\u0131na g\u00f6re farkl\u0131 \u015fekillerde g\u00f6r\u00fcnt\u00fclenebilir. \u00d6rne\u011fin, datetime=\"2023-10-27\"<\/code> olarak belirtilen bir tarih, T\u00fcrk\u00e7e konu\u015fan bir kullan\u0131c\u0131 i\u00e7in “27 Ekim 2023”, \u0130ngilizce konu\u015fan bir kullan\u0131c\u0131 i\u00e7in “October 27, 2023” olarak g\u00f6r\u00fcnt\u00fclenebilir. Bu d\u00f6n\u00fc\u015f\u00fcm genellikle JavaScript ile yap\u0131l\u0131r, ancak <\/code> elementinin sa\u011flad\u0131\u011f\u0131 standart makine okunabilirli\u011fi bu s\u00fcreci kolayla\u015ft\u0131r\u0131r.<\/p>\n
Yayg\u0131n Kullan\u0131m Senaryolar\u0131:<\/h4>\n\nBlog ve Haber Siteleri:<\/strong> Makalelerin yay\u0131nlanma veya g\u00fcncellenme tarihlerini belirtmek i\u00e7in.\nYay\u0131nlanma tarihi: 15 Eyl\u00fcl 2023, 10:00<\/time><\/p>\n        <\/code><\/pre>\n<\/li>\n
Etkinlik ve Randevu Siteleri:<\/strong> Etkinliklerin ba\u015flang\u0131\u00e7\/biti\u015f tarihlerini ve saatlerini net bir \u015fekilde belirtmek i\u00e7in.\nWeb Geli\u015ftirme Konferans\u0131<\/h3>\n        Ba\u015flang\u0131\u00e7: 20 May\u0131s 2024, 09:00 CEST<\/time><\/p>\n        
Biti\u015f: 22 May\u0131s 2024, 17:00 CEST<\/time><\/p>\n        <\/code><\/pre>\n<\/li>\n
\u00dcr\u00fcn \u0130ncelemeleri ve Yorumlar:<\/strong> Yorumlar\u0131n veya incelemelerin yap\u0131ld\u0131\u011f\u0131 tarihi belirtmek i\u00e7in.\nYorumlayan: Ahmet, 1 A\u011fustos 2023<\/time><\/p>\n        <\/code><\/pre>\n<\/li>\n
Zaman \u00c7izelgeleri (Timelines):<\/strong> Tarihsel olaylar\u0131 veya proje a\u015famalar\u0131n\u0131 s\u0131ralarken.\n1453<\/time>: \u0130stanbul'un Fethi<\/li>\n        <\/code><\/pre>\n<\/li>\n<\/ul>\nTaray\u0131c\u0131 Deste\u011fi ve En \u0130yi Uygulamalar<\/h3>\n<\/code> elementi, HTML5’in bir par\u00e7as\u0131 olarak modern web standartlar\u0131na tam uyumludur ve t\u00fcm g\u00fcncel taray\u0131c\u0131lar (Chrome, Firefox, Safari, Edge, Opera vb.) taraf\u0131ndan desteklenmektedir. Bu nedenle, uyumluluk konusunda endi\u015felenmenize gerek yoktur.<\/p>\n
En \u0130yi Uygulamalar:<\/h4>\n\nHer Zaman datetime<\/code> Niteli\u011fini Kullan\u0131n:<\/strong> Elementin semantik g\u00fcc\u00fcn\u00fc tam olarak kullanmak i\u00e7in, insan taraf\u0131ndan okunabilen i\u00e7eri\u011fin yan\u0131 s\u0131ra makine taraf\u0131ndan okunabilen datetime<\/code> niteli\u011fini her zaman ekleyin.<\/li>\n
ISO 8601 Standard\u0131na Uyun:<\/strong> datetime<\/code> niteli\u011fi i\u00e7in belirtilen formatlar\u0131n ISO 8601 standard\u0131na uygun oldu\u011fundan emin olun. Bu, veri tutarl\u0131l\u0131\u011f\u0131n\u0131 ve makine okunabilirli\u011fini garanti eder.<\/li>\n
\u0130nsan Okunabilirli\u011fi ve Yerelle\u015ftirme:<\/strong> <\/code> etiketinin i\u00e7indeki metin, kullan\u0131c\u0131lar\u0131n rahat\u00e7a okuyabilece\u011fi ve anlayabilece\u011fi bir formatta olmal\u0131d\u0131r. E\u011fer siteniz \u00e7ok dilli ise, bu i\u00e7eri\u011fi kullan\u0131c\u0131n\u0131n diline ve yerel tarih\/saat format\u0131na g\u00f6re dinamik olarak de\u011fi\u015ftirmeyi d\u00fc\u015f\u00fcnebilirsiniz (genellikle JavaScript ile).<\/li>\n
Microdata veya Schema.org ile Birlikte Kullan\u0131m:<\/strong> Daha karma\u015f\u0131k senaryolar i\u00e7in, <\/code> elementini Schema.org gibi mikro veri i\u015faretlemeleriyle birlikte kullanmak, arama motorlar\u0131na daha da zengin ba\u011flamsal bilgi sa\u011flayabilir. \u00d6rne\u011fin:\n\n            HTML5 time Elementi Rehberi<\/h1>\n            Yazar: Web Geli\u015ftirici<\/span><\/p>\n            
Yay\u0131nlanma tarihi: 27 Ekim 2023<\/time><\/p>\n        <\/div>\n        <\/code><\/pre>\n<\/li>\n
Styling (CSS):<\/strong> <\/code> elementi bir inline elementtir, bu nedenle di\u011fer inline elementler gibi CSS ile stil verebilirsiniz.\ntime {\n            font-weight: bold;\n            color: #0056b3;\n        }\n        <\/code><\/pre>\n