HTML Düzenleyici - DigiKitApp

Sıkışık HTML kodunu okunaklı hale getirin.

Ne zaman kullanmalısın?

Tek satıra sıkışmış veya düzensiz girintili bir HTML kodunu okunabilir, düzgün girintili hale getirmen gerektiğinde kullan.

Ne zaman kullanmamalısın?

Minify edilmiş bir HTML'i sadece incelemek istiyorsan formatlamak geçici bir çözüm; asıl kaynak koddan çalışman daha sağlıklı.

Adım adım kullanım

Düzenlemek istediğin kodu HTML kodu alanına yapıştır. Bu bir sayfanın tamamı olabileceği gibi, bir e-posta şablonundan ya da bir CMS'ten kopyalanmış küçük bir parça da olabilir.
Çalıştır butonuna bas.
Sonuçta iç içe etiketlerin girintiyle ayrıldığını ve hangi div'in nerede kapandığının görülebildiğini kontrol et.
Çıktıyı editörüne kopyala ve düzenlemeyi orada yap.

Örnek

Bir e-posta pazarlama aracından dışa aktardığın bülten şablonu, iç içe tablolarla dolu tek bir uzun satır olarak geliyor. Bir butonun bağlantısını değiştirmek istiyorsun ama hangi tablo hücresinde olduğunu bulamıyorsun. Kodu buraya yapıştırıp formatladığında her tablo, satır ve hücre kendi girintisine oturur ve aradığın bağlantıyı bulmak kolaylaşır. Aynı yöntem, bir CMS'in görsel düzenleyicisinin ürettiği karmaşık kodda gereksiz span ve boş paragrafları fark etmek için de işe yarar.

Kod incelemesinde de faydalı: biri sana bir sayfanın kaynağını gönderdiyse, formatlanmış hali kapanmamış ya da yanlış yerde kapanmış etiketleri gözle fark etmeni kolaylaştırır.

HTML biçimlendirici ne yapar?

Araç HTML’yi her etiket ve her metin parçası ayrı satırda, iç içe seviyeye göre iki boşluk girintiyle yeniden yazar. Açılış etiketinden sonra girinti artar, kapanış etiketinde azalır; br, img, input, meta, link gibi boş etiketler ve yorumlar girinti açmaz. pre, textarea, script ve style bloklarının içeriği olduğu gibi korunur.

Kullanırken dikkat

Metin ve satır içi etiketler (b, a, span) ayrı satırlara bölünür. Bu, görüntüde sözcükler arasına küçük boşluk ekleyebilir; yayına almadan önce sayfayı tarayıcıda kontrol edin.
Araç HTML’i doğrulamaz. Kapanmamış ya da yanlış iç içe geçmiş etiketler varsa girinti de bozuk görünür; bu da hatayı bulmanıza yardımcı olur.
script ve style içeriği biçimlendirilmez; bu bölümler için JavaScript ve CSS biçimlendiricilerini kullanın.
Büyük belgelerde editörünüzdeki biçimlendirici (örneğin Prettier) daha ince kurallar uygular.

Dikkat edilmesi gerekenler

HTML'de satır içi öğeler arasındaki boşluk ekranda görünür. Formatlama sırasında bağlantılar veya span'ler arasına satır sonu eklenirse yan yana duran öğeler arasında küçük boşluklar oluşabilir. Formatlanmış kodu yayına almadan önce tarayıcıda kontrol et.
pre ve textarea etiketlerinin içindeki boşluklar olduğu gibi gösterilir. Bu bölümlerin içeriği değişmişse görünüm de değişir.
Sayfanın içinde script veya style blokları varsa onların düzeni ayrı kurallara tabidir. O kısımları ilgili JavaScript veya CSS aracıyla ayrıca düzenlemek daha temiz sonuç verir.
Formatlama geçersiz HTML'i düzeltmez. Kodun standartlara uygun olup olmadığını görmek için bir doğrulayıcı kullan.

Sık sorulan sorular

Girdiğim kod/veri kaydediliyor mu?

Hayır, hiçbir veri sunucuya gönderilmez veya saklanmaz; işlem tamamen tarayıcınızda gerçekleşir.

Büyük dosyalarda çalışır mı?

Evet, ancak çok büyük girdilerde (birkaç MB üzeri) tarayıcı performansı düşebilir.

Bu araç ücretsiz mi?

Evet, temel kullanım için tamamen ücretsizdir ve üyelik gerektirmez.