HTML ve HTML5 Arasındaki Fark

HTML5 şu anda internetin yapıtaşı diyebiliriz. Kulağa basit gelse de değil. İnternet eskisinden çok daha havalı. Havalı özelliklerin daha da ortaya çıkabilmesi için HTML'in geliştirilmesi gerekiyordu. Rehberimizde HTML ve HTML5'in farkı nedir masaya yatıracağız. Öncelikle "HTML nedir?" sorusuna yanıt arayacağız.

HTML Nedir?

HTML ve HTML5 arasındaki fark rehberimizin ilk sorusu "HTML nedir?" HTML, HyperText Markup Language (Hiper Metin İşaretleme Dili) ifadesinin kısaltmasıdır. Ancak tabii ki de bunu bilmek internette havalı şeyler yapmak için yeterli değil.

Şu Anda Etkin Olan Güncel Teklifler:

İnsanların HTML hakkında yaptıkları en büyük hata bunun bir programlama dili olduğunu düşünmeleri. Değil. Web tarayıcınız için yönlendirmeler yazmanın bir yolu. Bu yönlendirmeler sitenin sınırlarını ifade ediyor.

HTML ve HTML5 arasındaki fark şu; HTML mantıkla başa çıkamıyor. Programlama dillerinin olayı ise bu. Diğer programlama dillerinde olduğu gibi HTML'ye bir şeyi belli koşullar altında yaptırırken farklı bir şeyi farklı koşullarda yaptıramazsınız.

HTML ve HTML5 arasındaki fark rehberimizde inceledğimiz "HTML nedir?" sorusunun kısa cevabı bu şekilde. 

HTML Nasıl Çalışır?

HTML nasıl çalışır anlamak HTML ve HTML5 farkı nedir anlamakla aynı şeydir. Dilin beşinci iterasyonu büyük bir web geliştirme üzerine kuruldu ve farklı bir teknolojiyle başa çıkıyor.

Peki HTML ve HTML5 arasındaki fark açısından HTML nasıl çalışıyor?

HTML kullanarak yazdığınız her şey tarayıcıya sayfada ne olmasını ve hangi sırayla olmasını istediğinizi söylüyor. Basit HTML ile site kurarsanız aşırı basit görünecektir çünkü bu işaretleme dili sitenize stil vermek amacıyla kullanılmaz (bunun için CSS kullanırsınız). Sadece istediğiniz öğeleri ekler ve düzgün bir site yapısı oluşturur (işte bu yüzden web geliştirmedeki önemini bilmek çok önemli). Yine de bazıları HTML'nin internetin kendi olduğu söyleyebilir.

Kısaca HTML ve HTML5 arasındaki fark olarak HTML farklı öğeleri <> (açma) ve </> (kapama) etiketleriyle tanımlayarak çalışıyor. Etiketler tarayıcıya hangi öğenin ne olduğunu ve nereye yerleştirileceğini söylüyor.

Bazı örnekler:

• <p> Etiketlerde p tarayıcıya bunun bir paragraf metni olduğunu söylüyor.
• <h2> etiketi Başlık 2 olduğunu ifade ediyor.
• Paragrafı </p> ile bitirebilir ya da Başlık 2 olması için </h2> tamamlayabilirsiniz.

HTML ve HTML5 arasındaki fark rehberi haricinde etiketler hakkında daha fazla bilgi almak için buradan tam HTML etiket referans listesine göz atabilirsiniz.

Tabii ki bunlar daha temel şeyler, ilerledikçe karmaşıklaşıyor. Ancak HTML bir öğeyi başka bir öğenin ardına yerleştirmekten başka bir şey değil. Öğeyi NASIL ve NEREYE yerleştireceğiniz ve hangi etiketin en iyi temsil edeceği yıllar içerisinde evrimleşmiş başka bir soru. İşte bu yüzden HTML ve HTML5 farkı oluşturan çoğu şeyden biri de sözdizimi. HTML zaman içinde geliştikçe web geliştirmenin yapabileceği şeyler ve konsepti de değişti. HTML daha iyi oldu. Karmaşıklığı azaldı ve insanlara daha sezgisel gelmeye başladı.

HTML5 Nedir?

HTML ve HTML5 arasındaki fark rehberimiz için sıra geldi HTML5 nedir sorusuna.

1995 yılında HTML'yi oluşturanlar internetin bu kadar değişeceğini düşünmüyordu.

Doğal olarak internetle birlikte internet işaretleme dili de değişti. HTML5 nedir sorusunun cevabı Hiper Metin İşaretleme Dili'nin en güncel sürümü. Amacı sitelerin herhangi bir tarayıcıyla olabildiğince uyumlu olmasını sağlama.

Teknik olarak bir sitenin sınırları HTML'nin önceki sürümleri kullanılarak yazılabilse de son sürümün yapabileceği kadar iyi veya  doğru olamayacaktır. HTML ve HTML5 arasındaki fark için en belirgin nokta bazı modern sitelerin özellikleriyle nasıl başa çıkabildiklerinden geçiyor. Biri her gün büyüyen bir alan olan mobil kullanıma adapte ediliyor. Acı gerçek şu ki 2023'de sıfırdan bir site yapacaksanız HTML5 kullanmanız gerekiyor.

En Sevilen Bulgular

Alakalı konular hakkında kapsamlı bilgi mi arıyorsunuz? Sizin için benzer yazılar topladık. Göz atın!

Technology

Hangi Programlama Dilini Öğrenmeliyim?

Career

Web Tasarımcı Maaşları

How-To

Evden Nasıl Para Kazanılır?

HTML ve HTML5 Arasındaki Fark

HTML ve HTML5 farkı rehberimizle iki dilin de ne olduğunu öğrendiniz. Artık son sürümün önceki sürüme göre ne açılardan iyi olduğunu inceleyebiliriz.

Sitelerin böyle göründüğü zamanları hatırlıyor musunuz?

HTML ilk temel sürümü 1993 yılında "oluşturuldu". HTML 2.0 1995 yılıdna çıktı. İlk gördüğünüz web siteyi hatırlamaya çalışın (hatırlayamıyorsanız yukarıdaki örnek size yardımcı olacaktır). Şimdiyeni bir sekme açıp herhangi bir modern, duyarlı siteye girin.

Yeni siteler eskilere kıyasla ne kadar değişmiş değil mi?

Gerçekten büyüleyici. HTML'nin önceki sürümleriyle modern bir şeyler oluşturmak imkansız olmasa da gerçekten zor. Bunu gerçekleştiren teknoloji eskiden yoktu.

Bilgisayarların ve internetin yapabildiği şeyler arttıkça dünyanın her yerinden geliştiriciler tek bir amaç için HTML ile çalıştı. Sitelerin yapabildikleri şeyleri arttırmak istiyorlardı.

HTML 2.0'dan sonra 1997'de HTML 3.0 çıktı. Yaklaşık 11 ay sonra HTML4 çıktı.

HTML4 1997 yılında W3C (World Wide Web Consortium) tarafından oluşturuldu ve 17 yıldan fazla bir süre internetin temeli olarak kaldı (eski sürümlerinden çok daha uzunca bir süre). 2014'te HTML5 oluşturuldu. Geliştiriciler sitelerinde bunu kullanmaya başladı. HTML ve HTML5 arasındaki fark olarak başka bir nokta da daha fazla sürümün gelmeyeceğine karar verilmesi. HTML5 güncellemeler alacak ancak HTML6 gelmeyecek (en azından plan şimdilik bu).

Gelin HTML ve HTML arasındaki fark rehberi için HTML5'in web kullanım değişikliklerine nasıl uyum sağladığına bakalım.

Daha İyi Hata Giderme

HTML ve HTML5 arasındaki fark olarak öne çıkan şeylerden biri daha iyi hata giderme. Peki neden gerekliydi?

Maalesef herkes kod yazarken hatalar yapabiliyor.

HTML5 geliştirme olarak en büyük hedeflerden biri tarayıcı geliştiricilerin bozuk HTML koduyla daha iyi başa çıkan parser'ler yapmasını kolaylaştırmaktı.

HTML5 tutarlı hata giderme sağlaması için yapıldı. Böylelikle işlem daha az zaman ve efor sarf ediyor.

HTML5 tarayıcıya düzgün site sayfası göstermesi için yardımcı oluyor. Geliştiriciler küçük bir hata yaptığında ya da bir şey kaçırdığında imdada yetişiyor.

Modern Web Uygulama Desteği

HTML ve HTML5 arasındaki fark olarak ciddi anlamda geliştirilmiş olan web uygulama desteği dile getirilebilir. Peki neden gerekiyor?

90'lardaki siteleri düşünün. Bir de YouTube'u veya Netflix'i düşünün. Modern siteler web tarayıcınızda çalışan tekil programlar gibi. HTML5 geliştiricilerin böyle ürünler meydana getirebilmesini sağlıyor.

HTML4 altın standartken geliştiricilerin Flash ve JavaScript, tarayıcı eklentileri ve diğer pek çok aracı kullanırken sınırlamalara göre hareket etmesi gerekiyordu.

HTML5'in çıkışıyla bu sınırlamalar ortadan kalktı. Böylelikle geliştiricilerin vakit kazanamsını sağladı.

Geliştirilmiş Semantik

HTML ve HTML5 arasındaki fark olarak başka bir nokta da geliştirilmiş semantik, yani diğer bir deyişle basitleştirilmiş sözdizimi.

Karmaşık bir site insanın gözünü korkutabilir. Yüzlerce, binlerce hatta çok daha fazla farklı öğe her yere dağılabilir.

HTML5, HTML'i 21. yüzyılın standartlarına uyması için oluşturuldu. Hiper Metin İşaretleme Dili'nin sözdiliminin daha sezgisel olması sağlandı. Örneğin <nav> gibi etiketler sitenin dolaşım kısmını gösteriyor. <footer> etiketi sitenin footer'larının nasıl yapılandırılması gerektiğini görmeniz konusunda yardımcıoluyor. Daha fazla bilgi edinmek için yeni HTML5 etiketlerine göz atabilirsiniz.

Değişimdeki amaç HTML'de hem yazmayı hem de kontrolü kolaylaştırmak.

Did you know?

Want to earn Rewards & gain real Web3 skills?

Ace exciting Missions, collect Bits & win huge Airdrop Prizes!

Start gaining 🚀

Mobil Destek Geliştirmeleri

1997'de HTML4 çıktığında cep telefonu daha yeni bir olaydı. Telefonlar konuşmak ve mesaj atmak içindi. 

2014'te HTML5 duyurulduğunda bambaşka bir dünyada yaşıyorduk. 4G internete sahip akıllı telefonlar herkesin cebinde olan çok güçlü cihazlardı.

Zamanın ilerlemesi HTML ve HTML5 arasındaki fark olarak ne hoşgörülü karşılanan değişimi; geliştirilmiş mobil desteği beraberinde getirdi.

Telefon ekranları enine değil boyuna uzun. Bilgisayarlar ekranlarında ise tam tersi. Bilgisayarda güzel görünen bir şey haliyle telefonda kötü görünüyor. Site cihazlara uygun şekilde yapılmışsa durum başka.

HTML5 işe bu noktada mobil dostu siteler oluşturmak konusunda dünya çevresindeki tüm geliştiricilerin hayatını kolaylaştırıyor.

Zamanı da gelmişti. İnterneti kullanan kişilerin yarısından fazlası akıllı telefonlardan erişim sağlıyor. Telefonunuzda kötü görünen bir sitede durma şansınız ne kadar?

ThinkWithGoogle'a göre kullanıcıların %80'i markanın mobil sitesi varsa satın almaya daha meyilli. İşte bu yüzden mobil desteği hem kullanıcılar hem de şirketler için oldukça önemli ve faydalı.

Video ve Ses Desteği

HTML ve HTML5 arasındaki fark için ses ve video kullanımını da söyleyebiliriz.

1997'de çevirmeli bağlantılı hızları ve bilgisayarlar modern bir tost makinesinden çok daha zayıftı. HTML4'ün sitelerde ses ve video desteğinin olmaması normaldi.

Peki 2014 hatta 2023 için aynı mı? Tamamen farklı. İnternet çok daha hızlı. Ses ve video içeriği inanılmaz önemli. Podcast'lerin ve çeşitli video içerik platformlarının yazılı sitelerden çok daha iyi performs gösterdiği biliniyor.

Böyle bir ortamda HTML4'deki geliştirilmiş video ve ses desteği Hiper Metin İşaretleme Dili için gerekli bir geliştirmeydi.

Vektörel Grafik Desteği

HTML ve HTML5 arasındaki fark için dile getirilebilecek yeniliklerden biri de ciddi anlamda geliştirilmiş vektörel grafik desteği diyebiliriz. Çeşitli cihazlarda daha güzel siteler yapmak için kullanılan araçlardan biri.

Oldukça basit bir şekilde ifade etmek gerekirse normal .jpg dosyası orijinal piksellerin yakınlaştırılmasıyla veya uzaklaştırılmasıyla ölçeklendiriliyor.

Peki küçük bir resmi tasarım olarak çok büyük haliyle kullanmanız gerektiğinde ne oluyor? Büyütmek için kaliteden kaybediyorsunuz, piksellenme yaşanıyor. Vektörel grafik bunu bir açıdan çözüyor.

Diyelim ki görsellerden oluşan 700x700 bir kompozisyon için Adobe Photoshop kullanıp .png veya .jpg olarak kaydediyorsunuz. Büyütmek isterseniz mümkün ancak kaliteden kaybedebilirsiniz.

Photoshop'ta daha büyük bir versiyonunu yapmayı deneyebilirsiniz. Ancak kaynak görsel gerekenden daha küçükse kalite her türlü kötü olacaktır.

Adobe Illustrator'la .svg formatı girin. Illustrator'la vektörel bir öğe oluşturursanız ne kadar büyük veya küçük olduğu fark etmeden mükemmel bir şekilde ölçekleniyor.

4K çözünürlüklü ekranların ve TV'lerin çağında sınırsız bağlantı hızlarına sahipken vektörek grafikler logo, tablo gibi sitenizde gerekli olan öğelerin herhangi bir cihazda mükemmel görünmesini sağlar.

HTML5 vektörel grafikleri ve .svg formatını destekliyor, HTML4 desteklemiyor.

İyi Yönler

• Kullanması kolay
• Kaliteli içeriğe sahip
• Fiyat konusunda saydam

Ana Özellikler

• Tamamlamada ücretsiz sertifikalar
• Veri bilimi becerilerine odaklanıyor
• Esnek eğitim programları

SAVE 50%

İyi Yönler

• Basit tasarım (gereksiz bilgi yok)
• Yüksek kaliteli dersler (ücretsizler dahil)
• Çeşitli özellikler

Ana Özellikler

• Nanodegree programları
• Firmalara uygun
• Ücretli tamamlama sertifikası

40% OFF

İyi Yönler

• Sektörde iyi biliniyor
• Pek çok özelliğe sahip
• Dersler üniversite düzeyinde

Ana Özellikler

• Üniversite düzeyince dersler
• Şirketler için uygun
• Ücretli tamamlama sertifikası

30% OFF COURSES

Diğer HTML5 Geliştirmeleri

HTML ve HTML5 arasındaki fark rehberimiz için yukarıda dile getirdiğimiz tüm geliştirmeler arasında hangisinin en önemli olduğuna karar veremedik. Ancak bu avantajlar listesinin bittiği anlamına gelmiyor.

HTML4 sitelerinde tarayıcı önbelleğinde sadece geçici veriler saklanabiliyor. HTML5'li sitelerde web SQL veri tabanı ve uygulama önbelleği de kullanılabildiğinden RAM'iniz daha rahat çıkıyor.

HTML5'e entegre JS Worker API'dan dolayı tarayıcı içerisinde JavaScript çalıştırılabiliyor. HTML4'te ise tarayıcı arayüzünde çalışıyordu.

Çeşitli form kontrolleri ve öğeler de HTML5'i modern çağa taşıdı. Geliştiricilere modern siteler yapmaları için gerekli araçları sağlıyor.

HTML5 Uyumluluğu

Uyumluluk açısından HTML ve HTML5 arasında dev bir fark var.

Çeşitli web tarayıcılar hatta bazı farklı platformlar ve cihazlar için HTML4 sorundu. Özellikle de şık bir site yapmak istiyorsanız. Yeni sürüm tüm cihazlarla sorunsuz bir şekilde çalışıyor, web geliştirme olayını basitleştiriyor.

Tüm tarayıcılar hem destekliyor hem de adaptasyonu teşvik ediyor. Buna rağmen eski siteler hala HTML4 kullanıyor. Sebebi de basit; sitelerin 2014'ten beri güncellenmemesinden dolayı.

Tüm modern tarayıcılar hala HTML4'ü destekliyor. Yeni sürüm tabii ki de daha rahat çalışıyor.

HTML5 Örnekleri

Favori sitelerinizde hangi HTML sürümünün kullanıldığını merak ediyor olabilirsiniz. Kontrol etmenin en kolay yolu tarayıcınızdaki kodu görüntüleyip yukarı bakmak. Burada HTML metninin nasıl başladığını görmeniz gerekiyor.

HTML ve HTML5 arasında bu konuda büyük bir fark olmasa da sözdizimindeki değişiklik belirgin. Gelin bazı HTML5 görneklerine bakalım. Herhangi bir HTML5 dosyasının ilk zorunlu satırıyla başlayalım.

Herhangi bir HTML dosyasının ilk satırı doctype belirtme ile başlar. Eğer <!DOCTYPE html> ile başlamıyorsa HTML5 değildir. Bu belirtme HyperText Markup Language'ın bu sürümünde dosya başlatmak için gereklidir.

HTML, HTML 4.01 gibi önceki sürümlerde üç farklı belirtme bulunuyordu.

Buradan bunlar hakkında bilgi alabilirsiniz.

Eski bir HTML sürümünde doctype belirtmesi şölye görünür:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

En kısa HTML5 örneği şuna benzer:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Sample h1 tag</h1>
<p>Sample</p>
</body>
</html>

Doğru temsil edilmiş HTML5 örnekleri arasında yer almıyor. BitDegree.org gibi karmaşık bir sitenin HTML kodu şöyle oluyor:

Biliyor Muydunuz?

Kariyeriniz için hangi online eğitim platformunun daha iyi olduğunu merak etmiş miydiniz?

EN İYİ online eğitim platformunu yan yana görün ve karşılaştırın

En Trend Bulgular

Kripto Para Borsalarıyla alakalı kapsamlı yazılarımızı, rehberlerimizi ve eğitici yazılarımızı inceleyin. Bilgi sahibi olun ve buna göre karar verin!

Technology

En İyi Programlama Dilleri 2024

Technology

Python Kütüphaneleri: Hangisi Ne İşe Yardımcı Olur?

Career

Backend Nedir ve Backend Yazılımcı Nasıl Olunur?

Son Sözler

HyperText Markup Language (veya HTML) web geliştirme için hayati önem taşıyor. 2014'ten önce W3C'den HTML tavsiyeleri gelene kadar HTML bir süredir gerideydi.

HTML5 şu değişiklikleri beraberinde getirdi:

• Daha İyi Hata Giderme
• Basitleştirilmiş Sözdizimi
• Geliştirilmiş Mobil Destek
• Video, Ses ve Vektörel Grafik Desteği

Mobil ve medya desteği geliştirmeleri kullanıcılar için en önemli değişiklikler olsa da web geliştiricilerinin işi kolaylaştıran pek çok farklı şey de mevcut.

Bilimsel Referanslar