FrontEnd Developer Road Map

FrontEnd Developer RoadMap – HTML 5 Tutorial 8 !Doctype Nedir Neden Kullanılmalıdır?

Merhabalar, bu yazımda Doctype konusunu ele alacağız.

Yukarıda gösterdiğim kodlamayı inceliyor olacağız.

DOCTYPE Nedir?

DOCTYPE; hazırladığınız sayfaların hangi tipte bir belge olduğunu tarayıcıya bildirmek için kullanılır. Bu sayede tarayıcı bu sayfayı hangi standarda (hangi HTML sürümü kullanılmış) göre yorumlayacağını anlamış olur. Eğer DOCTYPE kullanılmazsa tarayıcılar sayfaları standarda uygun olarak yorumlamayacak, dolayısıyla her tarayıcı size farklı farklı sonuçlar verecektir. Sitenin tarayıcılarda farklı görünmesinin nedenlerinden birisi DOCTYPE kullanılmamasıdır. Yani siteniz Chrome’da düzgün ama IE’de bozuk formatta görünmesin istiyorsanız DOCTYPE kullanmalısınız.,

Tarayıcıya bu satır sayesinde bu dosya Html5 standartlarına göre kodlanmış bir sayfadır bildirimi yapmış oluyoruz. DOCTYPE bildirimi sayfanın en başında html etiketinden önce yapılmalıdır.

DOCTYPE Nerede Tanımlanır?

DOCTYPE tanımlaması <html> etiketinin bir üst satırında olmalı ve DOCTYPE tanımlamasının üstünde hiçbir şey olmamalıdır. DOCTYPE tanımlaması bir Html etiketi değildir bu yüzden <html> etiketi yerine kullanılamaz. Aşağıda doğru ve yanlış bir DOCTYPE tanımlamasını göreceksiniz.

Doğru DOCTYPE tanımlaması

<!DOCTYPE html>
<html>
<head>
<title>Başlık</title>
</head>
<body>
Site içeriği...
</body>
</html>

Yanlış DOCTYPE tanımlaması

<!DOCTYPE html>
<head>
<title>Başlık</title>
</head>
<body>
Site içeriği...
</body>
</html>

Sizin için şu anda anlamlı ve gerekli olan tek kullanım Html5 DOCTYPE kullanımı olsa da diğerlerini de bir liste olarak aşağıda sizinle paylaşıyorum.

DOCTYPE Belge Türü Kullanımları

A HTML 5
<!DOCTYPE html>
B HTML 4.01 Katı

Bu DTD tüm Html öğelerini ve niteliklerini içerir, ancak sunum veya kullanımdan kaldırılmış öğeleri (yazı tipi gibi) içermez. Çerçeve kümelerine izin verilmez.

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

Bu DTD, sunum ve kullanımdan kaldırılmış öğeleri (yazı tipi gibi) içeren tüm Html öğelerini ve özelliklerini içerir. Çerçeve kümelerine izin verilmez.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
D HTML 4.01 Çerçeve Kümesi

Bu DTD HTML 4.01 geçişine eşittir, ancak çerçeve kümesi içeriğinin kullanılmasına izin verir.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
E XHTML 1.0 Katı

Bu DTD tüm Html öğelerini ve niteliklerini içerir, ancak sunum veya kullanımdan kaldırılmış öğeleri (yazı tipi gibi) içermez. Çerçeve kümelerine izin verilmez. İşaretleme ayrıca iyi biçimlendirilmiş XML olarak yazılmalıdır.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
F XHTML 1.0 Geçici

Bu DTD, sunum ve kullanımdan kaldırılmış öğeleri (yazı tipi gibi) içeren tüm Html öğelerini ve özelliklerini içerir. Çerçeve kümelerine izin verilmez. İşaretleme ayrıca iyi biçimlendirilmiş XML olarak yazılmalıdır.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
G XHTML 1.0 Çerçeve Kümesi

Bu DTD, XHTML 1.0 geçişine eşittir, ancak çerçeve kümesi içeriğinin kullanılmasına izin verir.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
H XHTML 1.1

Bu DTD, XHTML 1.0 Strict’e eşittir, ancak modüller eklemenize izin verir (örneğin, Doğu Asya dilleri için Ruby desteği sağlamak için).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

VS Code ve Emmet’i kullandığınız sürece DOCTYPE tanımlamayı unutmanız pek olanaklı olmasa da, tarayıcıların ne yaptığınızdan haberdar olması için DOCTYPE tanımlamasını unutmayınız.

Bir sonraki yazımda görüşmek üzere.

Murat Bilginer

21 Şubat 1992'de doğdum. Endüstri Mühendisi olarak lisansımı 2016 yılında tamamladım. Industryolog Akademi - NGenius oluşumlarının kurucusuyum. Şu anda kendi şirketim Brainy Tech ile Web ve Mobil Geliştirme, AWS, Google Cloud Platform Sistemleri için DevOps, Big Data Analiz ve Görselleştirme hizmetleri sunmakta ve Online Eğitimler vermekteyiz.

Share
Published by
Murat Bilginer

Recent Posts

Kedimiz Oly & FIP Süreci 9 – 1 Haftalık GS İğnesi Serüveni – Oly İyileşiyor mu?

Selamlar, bu yazımda Oly'nin 1 hafta boyunca olduğu GS iğnesi, yaşanan değişimleri anlatmaya çalışacağım. PCR…

2 gün ago

Kedimiz Oly & FIP Süreci 8 – Yeniden Hayvan Hastanesi – Sonuç Kontrolü ve Sonrası…

Selamlar, bu yazımda Hemogram ve Biyokimya sonuçlarımızı göstermek için İÜCHH'ne tekrar gidişimizi ve sonrasını anlatacağım.…

2 gün ago

Kedimiz Oly & FIP Süreci 7 – GS İğnesine Başlama Kararımız ve Oly’de Dikkat Ettiklerimiz

Selamlar, bu yazımda GS iğnesine başlama kararımızı ve Oly’de bu süreçte nelere dikkat ediyor, neler…

3 gün ago

Kedimiz Oly & FIP Süreci 6 – İstanbul Üniversitesi Cerrahpaşa Hayvan Hastanesi Serüveni ve Sonrası

Selamlar, bu yazımda İÜCHH'deki tedavi sürecimiz ve sonrasında yaşananlardan bahsetmeye çalışacağım. 20.06.2025 Cuma günü saat…

4 gün ago

Kedimiz Oly & FIP Süreci 5 – Teşhisten Önce Biz… Veterinerimize Güvenebilir Miydik?

Eve Dönüş ve İlk Şüpheler 18 Haziran Perşembe saat 23 sularında İstanbul’daki evimize giriş yaptık.…

4 gün ago

Kedimiz Oly & FIP Süreci 4 – Antalya’ya Yolculuk – Bir Şeyler Ters Gidiyor… & İstanbul’a Geri Dönüş

9 Haziran Pazartesi günü Aydın’daki sürecimiz bitti ve Antalya yolculuğumuz başladı. Saat 11 gibi yola…

4 gün ago