HTML Biçimlendirme

Nasıl çalışır?

Bir sayfanın kaynağını açtığınızda ya da bir e-posta şablonunu, bir site oluşturucunun dışa aktardığı kodu incelediğinizde HTML çoğu zaman tek satırdır ya da girintileri karmakarışıktır. Kodu sol panele yapıştırın; sağ panelde her blok etiketi (div, ul, li, table, p) kendi satırına iner ve iç içe geçtiği kadar içeri alınır. Böylece hangi </div> etiketinin hangi <div>'i kapattığı, bir listenin nerede bittiği gözle görülür. <style> içindeki CSS ve <script> içindeki JavaScript de aynı girintiyle biçimlenir. <pre> ve <textarea> içeriğine dokunulmaz, çünkü oradaki boşluklar sayfada aynen görünür. Satır içi etiketler (a, span, strong) metinle aynı satırda kalır. Uzun satırlar varsayılan olarak 120 karakterde kırılır; kırılmasın istiyorsanız Uzun satırlar ayarından Olduğu gibi kalsın'ı seçin. Sonuç satırı kaç satırın kaça açıldığını söyler. Ne yapılsın? ayarından Küçültülmüş'ü seçerseniz tersini yapar: yorumlar ve etiketler arasındaki gereksiz boşluklar atılır; <style> ve <script> içine bu modda dokunulmaz.

Bu araç html formatter, html beautifier, html girintileme aramalarıyla da biliniyor.

HTML nedir?

HTML (HyperText Markup Language), web sayfalarının iskeletini oluşturan işaretleme dilidir: başlık, paragraf, liste, tablo, bağlantı ve görsel birer etiketle (<h2>, <p>, <ul>, <a>) belirtilir ve etiketler iç içe geçerek bir ağaç kurar. Tarayıcı etiketler arasındaki boşluk ve satır sonlarının çoğunu tek boşluğa indirir; bu yüzden aynı sayfa tek satır olarak da girintili olarak da yazılabilir ve girintinin tek görevi bu ağacı insana göstermektir.

Blok ve satır içi öğe nedir?

Blok öğeler (div, p, ul, table, h1-h6) kendi satırında başlar ve bulunduğu alanın genişliğini kaplar; satır içi öğeler (a, span, strong, img) metnin akışı içinde yer alır. Biçimlendirmede bu ayrım önemlidir: blok öğelerin arasına satır sonu eklemek görünümü değiştirmez, ama iki satır içi öğenin arasına eklenen satır sonu tarayıcıda bir boşluk olarak görünür. Biçimleyici bu yüzden satır içi öğeleri metinle aynı satırda tutar.

HTML biçimlendirme ile HTML küçültme arasındaki fark nedir?

Biçimlendirme HTML'e girinti ve satır sonu ekler, kodu insanın okuyacağı hale getirir; dosya büyür, sayfa aynı görünür. Küçültme tam tersini yapar: yorumları ve etiketler arasındaki gereksiz boşlukları atar, isterse içerdeki CSS ve JavaScript'i de sıkıştırır; dosya küçülür ama okunmaz hale gelir. İkisi de <pre> içeriğine dokunmaz. Kaynağı girintili tutup yayına küçültülmüş hali koymak yaygın düzendir.

Biçimlendirme, doğrulama değildir

Araç HTML'i düzenler ama denetlemez: kapatılmamış bir etiket, yanlış iç içe geçmiş bir yapı ya da yazım hatalı bir öznitelik hata olarak bildirilmez. HTML'in resmî doğrulaması W3C doğrulayıcısıyla yapılır ve o hizmet kodu kendi sunucusuna gönderir; bu sayfa hiçbir şeyi dışarı göndermediği için o işi yapmaz.

Yine de girinti hataları görünür kılar: kapanmayan bir <div> varsa altındaki bütün etiketler bir kademe fazla içeride durur ve belgenin sonunda beklenmedik bir kapanış dizisi görürsünüz. Biçimlendirme görünümü değiştirmez; tek istisna satır içi öğeler arasına eklenen satır sonudur, tarayıcı onu bir boşluk olarak gösterir. Uzun satır kırma bu yüzden satır içi metinde kelime aralarından yapılır.

Girintili mi, küçültülmüş mü?

Girintili biçim okumak ve düzenlemek içindir: bir şablonu anlamak, bir hatayı bulmak, kodu bir ekip arkadaşına göndermek. Küçültülmüş biçim yayın içindir: e-posta şablonlarında boyut sınırı, sayfa hızında her kilobayt önemlidir.

Bu sayfadaki Küçültülmüş seçeneği yalnız HTML'in kendisini sıkıştırır: yorumlar silinir (eski Internet Explorer'a yönelik koşullu yorumlar hariç), etiketler arasındaki boşluklar atılır, <pre> ve <textarea> korunur. İçerdeki CSS ve JavaScript'i de küçültmek, yorumları korumak ya da önce-sonra bayt karşılaştırması görmek için HTML küçültme aracını kullanın.

Sık sorulanlar

Tek satırlık HTML kodu nasıl düzenli hale getirilir?

Kodu bu sayfadaki sol panele yapıştırın; her blok etiketi kendi satırına iner ve iç içe geçtiği kadar girintilenir. Sonucu kopyalayabilir ya da .html dosyası olarak indirebilirsiniz.

Biçimlendirme sayfanın görünümünü değiştirir mi?

Blok etiketler arasında değiştirmez, çünkü tarayıcı oradaki boşlukları yok sayar. Satır içi öğeler (span, a) arasına eklenen satır sonu tarayıcıda tek bir boşluk olarak görünür; araç bu yüzden satır içi öğeleri mümkün olduğunca aynı satırda bırakır. <pre> ve <textarea> içeriğine hiç dokunulmaz.

HTML'imdeki hataları gösteriyor mu?

Hayır, bu araç bir doğrulayıcı değildir. Kapanmayan etiketler girintide kayma olarak kendini belli eder ama hata olarak bildirilmez. Resmî doğrulama için W3C doğrulayıcısı kullanılır; o hizmet kodu kendi sunucusuna gönderir.

Kodum bir yere gönderiliyor mu?

Hayır. Biçimlendirme tarayıcınızın içinde çalışır; yapıştırdığınız HTML bu sayfadan çıkmaz ve hiçbir yere kaydedilmez.