HTML5, tarayıcı eklentilerini veya diğer yazılımları indirmenize gerek kalmadan çevrimiçi yapmak istediğiniz hemen hemen her şeyi yapmak için tasarlanan bir dünya
HTML5, tarayıcı eklentilerini veya diğer yazılımları indirmenize gerek kalmadan çevrimiçi yapmak istediğiniz hemen hemen her şeyi yapmak için tasarlanmıştır. Animasyonlar mı oluşturmak istiyorsunuz? Müzik ve film yerleştirilsin mi? Tarayıcınızda çalışan gelişmiş uygulamalar mı oluşturuyorsunuz? HTML5 ile yapabilirsiniz.
HTML5 nedir?
HTML5, HTML'nin en yeni sürümüdür. Terim iki şeyi ifade eder. Bunlardan biri, yeni unsurlara ve niteliklere sahip olan güncellenmiş HTML dilinin kendisidir. İkincisi, yeni bir video formatı gibi bu yeni HTML sürümüyle çalışan ve daha karmaşık ve güçlü web siteleri ve uygulamalar oluşturmanıza olanak tanıyan daha büyük teknolojiler kümesidir.
HTML'nin yıllar içinde nasıl geliştiğini anlamak için HTML ve HTML5 arasındaki farklara bakalım.
HTML ve HTML5
HTML, World Wide Web'in temel biçimlendirme dilidir. Başlangıçta bilimsel belgeleri anlamsal olarak tanımlamak için tasarlandı, o zamandan beri çok daha fazlasını açıklamak için gelişti.
Bugün web'deki çoğu sayfa HTML4 kullanılarak oluşturulmuştur. 1993'te yazılan ilk HTML sürümünden bu yana çok fazla gelişmesine rağmen, HTML4'ün hala sınırlamaları vardı. En büyüğü, web geliştiricilerinin veya tasarımcılarının sitelerine HTML'de desteklenmeyen içerik veya özellikler eklemek istemeleriydi. Bu durumda, kullanıcıların tarayıcı eklentileri yüklemesini gerektiren Adobe Flash gibi standart olmayan tescilli teknolojileri kullanmak zorunda kalacaklardı. O zaman bile, bazı kullanıcılar bu içeriğe veya özelliğe erişemezdi. Örneğin, iPhone'lar ve iPad'lerdeki kullanıcılar, bu cihazlar Flash'ı desteklemediği için bunu yapamaz.
Cue, HTML5. HTML5, standart olmayan tescilli teknolojilere olan ihtiyacı ortadan kaldırmak için tasarlandı. HTML'nin bu yeni sürümüyle, çevrimdışı çalışan, yüksek tanımlı video ve animasyonları destekleyen ve coğrafi olarak nerede olduğunuzu bilen web uygulamaları oluşturabilirsiniz.
HTML5'in tüm bunları nasıl yapabileceğini anlamak için HTML'nin bu son sürümündeki yeniliklere bakalım.
HTML5'teki yenilikler
HTML5, aşağıdakileri içeren ana hedeflerle tasarlanmıştır:
— Kullanıcılar ve ekran okuyucular için kodu okumayı kolaylaştırma
— HTML, CSS ve JavaScript arasındaki örtüşmeyi azaltmak
— Tarayıcılar arasında tasarım yanıtını ve tutarlılığını teşvik etme
— Flash veya diğer eklentilere ihtiyaç duymadan multimedya desteği
Bu hedeflerin her biri, HTML'nin bu yeni sürümündeki değişiklikleri bilgilendirdi. Aşağıda bu değişikliklerden yedisine odaklanalım.
Yeni anlamsal öğeler
HTML5, semantik olarak anlamlı birkaç yeni etiket tanıttı. Bunlar arasında <section>, <header>, <footer> <nav>, <mark>, <figure>, <aside> <figcaption>, <data>, <time>, <output>, <progress>, <meter > ve <main>. Bunlar, içeriğin stilini açıkça tanımlayan daha temiz kod yazmayı kolaylaştırır ve bu, ekran okuyucular gibi yardımcı teknolojilere sahip kullanıcılar için özellikle önemlidir.
Inline SVG
HTML4 kullanarak, web sayfalarınıza ölçeklenebilir vektör grafikleri (SVG'ler) eklemek için Flash, Silverlight veya başka bir teknolojiye ihtiyacınız olacaktı. HTML5 ile <svg> etiketini kullanarak doğrudan HTML belgelerine vektör grafikleri ekleyebilirsiniz. Bu yeni öğeyi kullanarak dikdörtgenler, daireler, metin ve diğer vektör tabanlı yollar ve şekiller de çizebilirsiniz. Aşağıda, SVG <circle> öğesi kullanılarak oluşturulmuş dairesel bir şekil örneği bulunmaktadır.
Form özellikleri
HTML5’in genişletilmiş form seçenekleri sayesinde daha akıllı formlar oluşturabilirsiniz. Tüm standart form girdi türlerine ek olarak HTML5, DateTime, DateTime-local, tarih, ay, hafta, saat, sayı, aralık, e-posta ve URL dahil olmak üzere daha fazlasını sunar. Ayrıca, daha sonra tartışacağımız yeni yer tutucu özelliği sayesinde tarih seçiciler, kaydırıcılar, doğrulama ve yer tutucu metin de ekleyebilirsiniz.
WebM video formatı
HTML5'ten önce, ses ve video içeriğini web sayfalarına yerleştirmek için tarayıcı eklentilerine ihtiyacınız vardı. HTML5, tarayıcı eklentilerine olan ihtiyacı ortadan kaldıran <audio> ve <video> etiketlerini sunmakla kalmadı, aynı zamanda WebM video formatını da tanıttı. Bu, Google tarafından geliştirilen ve mükemmel bir sıkıştırma / kalite oranı sağlayan telifsiz bir video formatıdır. Bu, video öğesiyle kullanılabilir ve çoğu tarayıcı tarafından desteklenir.
Placeholder Attribute
HTML5, yer tutucu özelliğini tanıttı. Kullanıcıların parolaları veya diğer veri girişi alanlarını doldurmasına yardımcı olacak kısa bir ipucu sağlamak için bunu <input> öğesiyle birlikte kullanabilirsiniz. Bu, daha iyi formlar oluşturmanıza yardımcı olabilir. Ancak, bu özelliğin yardımcı teknolojiler için erişilebilir olmadığını unutmamak önemlidir.
Server-sent events
Sunucu tarafından gönderilen bir olay, bir web sayfasının bir sunucudan güncellenmiş verileri otomatik olarak almasıdır. Bu HTML4 ile mümkündü, ancak web sayfasının sorması gerekiyordu
HTML5, tek yönlü sunucu tarafından gönderilen etkinlikleri destekler. Bu, verilerin sürekli olarak bir sunucudan tarayıcıya gönderildiği anlamına gelir. Web siteniz hisse senedi fiyatları, haber beslemeleri, Twitter beslemeleri vb. İçeriyorsa, bunun ne kadar yararlı olacağını düşünün. Sunucu tarafından gönderilen etkinlikler HTML'nin önceki sürümünde destekleniyordu, ancak web sayfasının tekrar tekrar talep etmesi gerekiyordu.
Yerel web depolama
HTML'nin önceki sürümünde veriler, çerezler aracılığıyla yerel olarak depolanır. HTML5 ile, bir komut dosyası API'si sayesinde tanımlama bilgileri yerine web depolama kullanılır. Bu, verileri çerezler gibi yerel olarak, ancak çok daha büyük miktarlarda depolamanıza olanak tanır.
Artık HTML5'teki yenilikleri anladığımıza göre, bunu web sitenizde neden kullanmanız gerektiğine bir göz atalım.
Neden HTML5?
HTML5, önceki HTML sürümlerine göre çok çeşitli avantajlar sunar - bunlardan bazılarına yukarıda kısaca değinmiştik. HTML5'in neden bu kadar özel olmasının birkaç nedenine daha yakından bakalım.
Tarayıcılar arasında uyumludur: HTML5, Chrome, Firefox, Safari, Opera dahil olmak üzere tüm büyük tarayıcılar ve ayrıca Chrome için iOS, Safari ve Android tarayıcılar tarafından desteklenir. Hatta Internet Explorer gibi daha eski ve daha az popüler tarayıcılarla da çalışabilir. Bu, HTML5 ile derleme yaparken, hangi tarayıcıyı kullanırlarsa kullansınlar veya mobil ya da masaüstünde olsun, kullanıcıların sitenizde tutarlı bir deneyim yaşayacaklarını bilirsiniz.
Çevrimdışı taramayı etkinleştirir: HTML5, çevrimdışı uygulamalar oluşturmanıza olanak tanır. HTML5 çevrimdışı uygulamalarını (çoğu) destekleyen tarayıcılar, uygulamayı oluşturan HTML, CSS, JavaScript, resimler ve diğer kaynakları indirir ve bunları yerel olarak önbelleğe alır. Ardından, kullanıcı web uygulamasına bir ağ bağlantısı olmadan erişmeye çalıştığında, tarayıcı yerel kopyaları oluşturacaktır. Bu, kullanıcı aktif bir internet bağlantısını kaybederse veya aktif bir internet bağlantısına sahip değilse sitenizin yüklenmemesi konusunda endişelenmenize gerek kalmayacağı anlamına gelir.
Daha temiz kod yazmanıza izin verir: HTML5’in yeni anlamsal öğeleriyle, daha temiz ve daha açıklayıcı kod tabanları oluşturabilirsiniz. HTML5'ten önce, geliştiricilerin div'ler gibi birçok genel öğeyi kullanması ve başlıklar veya gezinme menüleri gibi görüntülenmeleri için bunları CSS ile biçimlendirmeleri gerekiyordu. Sonuç? Birçok div ve sınıf adı, kodu okumayı zorlaştırdı.
HTML5, sizin ve diğer okuyucuların stil ve içeriği ayırmanıza olanak tanıyan anlamsal olarak daha anlamlı kod yazmanıza olanak tanır.
Daha erişilebilir: Ayrıca HTML5’in yeni anlamsal öğeleri sayesinde, daha erişilebilir web siteleri ve uygulamalar oluşturabilirsiniz. Bu öğelerden önce, ekran okuyucular, bir sınıf veya kimlik adı "başlığı" olan bir div'in aslında bir başlık olduğunu belirleyemezdi. Artık <header> ve diğer HTML5 semantik etiketleriyle, ekran okuyucular bir HTML dosyasını daha net bir şekilde inceleyebilir ve ihtiyacı olan kullanıcılara daha iyi bir deneyim sağlayabilir.
HTML5 nasıl kullanılır?
Web sitenizde HTML5 kullanmaya başlamak için önce bir HTML şablonu oluşturmanız önerilir. Daha sonra bunu ilerideki tüm projeleriniz için bir standart olarak kullanabilirsiniz. Temel bir şablon şu şekildedir:
<!DOCTYPE html>
<html lang=”en” manifest="/cache.appcache">
<head>
<title>This is the Title of the Page</title>
<meta charset="utf-8">
<link rel="stylesheet" rel="noopener" target="_blank" href="bootstrap/css/bootstrap.min.css"> <!-- This link is only necessary if you’re using an external stylesheet -->
<style>
/* These style tags are only necessary if you’re adding internal CSS */
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
HTML5 ne zaman çıktı?
HTML5'in ilk kamuya açık taslağı, 2008'de Web Hypertext Application Technology Working Group (WHATWG) tarafından yayınlandı. Ancak, 28 Ekim 2014 tarihine kadar World Wide Web Consortium (W3C) önerisi olarak yayınlanmadı.
Spesifikasyon sürecinin neden on yıla yayıldığını anlamak için HTML5'in karmaşık geçmişine bakalım.
1999'da, HTML4 yayınlandıktan bir yıl sonra, W3C HTML üzerinde çalışmayı bırakmaya ve bunun yerine XHTML adlı XML tabanlı bir eşdeğer geliştirmeye odaklanmaya karar verdi. Dört yıl sonra, insanlar XML dağıtımının tamamen RSS gibi yeni teknolojilere dayandığını fark etmeye başladıkça, HTML'nin gelişmesine yeniden ilgi duyuldu.
2004'te Mozilla ve Opera, HTML'nin bir W3C atölyesinde geliştirilmeye devam etmesi gerektiğini önerdi. W3C üyeleri, XML tabanlı değiştirmeler geliştirmeye devam etme lehine öneriyi reddettiğinde, Mozilla ve Opera - Apple'ın katıldığı - HTML'yi geliştirmeye devam etmek için Web Hypertext Uygulama Teknolojisi Çalışma Grubunu (WHATWG) başlattı.
2006 yılında, W3C kursu tersine çevirdi ve HTML5 spesifikasyonunun geliştirilmesine katılmakla ilgilendiklerini belirtti. Bir yıl sonra, WHATWG ile çalışmak üzere bir grup oluşturuldu. Bu iki grup, iki ayrı hedefleri olduğuna karar verdikleri 2011 yılına kadar birkaç yıl birlikte çalıştı. W3C HTML5'in bitmiş bir sürümünü yayınlamak isterken, WHATWG HTML için bir yaşam standardı yayınlamak ve sürekli olarak sürdürmek istedi.
2014 yılında, W3C HTML5'in "son" sürümünü yayınladı ve WHATWG, sitesinde "canlı" bir sürüm bulundurmaya devam etti. Bu iki belge 2019'da W3C ve WHATWG'nin ileriye dönük tek bir HTML sürümünün geliştirilmesi için işbirliği yapmak üzere bir anlaşma imzalamasıyla birleşti.
Hangi tarayıcılar HTML5'i destekliyor?
Google Chrome, Opera, Mozilla Firefox, Apple Safari ve Internet Explorer dahil olmak üzere belli başlı tarayıcıların en son sürümlerinin tümü birçok HTML5 özelliğini destekler, ancak hepsini desteklemez. Şu anda Chrome ve Opera, HTML5 ile en uyumludur, Firefox ve Safari yakından takip etmektedir. Internet Explorer en az uyumlu olanıdır, ancak çoğu HTML5 özelliğini kısmen veya tamamen desteklemektedir.
Aşağıda, başlıca tarayıcıların değişen uyumluluğunu gösteren bir tablo bulunmaktadır. İşte bir anahtar:
✓ Tamamen destekleniyor
≈ Kısmen destekleniyor
✗ desteklenmiyor
HTML5'i destekleyen farklı tarayıcı sürümlerinin daha ayrıntılı bir dökümünü istiyorsanız, Caniuse.com'a bakın.
HTML5, World Wide Web'in geleceğidir
Yeni anlamsal öğeleri, genişletilmiş form seçenekleri, formattan bağımsız video etiketi ve daha fazlasıyla HTML5, geliştiricilerin web sayfalarını oluşturma biçiminde devrim yaratıyor. Bu da tüketicilerin çevrimiçi deneyimlerini değiştiriyor. Artık Flash'ı güncellememiz veya başka bir yazılımı indirmemiz istenmeden videoları izleyebiliyoruz. İnternet bağlantımız olmadığında uygulamaları kullanabiliriz. İster cep telefonu, ister tablet, ister Smart TV - ve daha fazlasını kullanarak bir sitede aynı harika deneyimi yaşayabiliriz.