Çevrimiçi HTML biçimlendirme
Sıkıştırılmış sayfa kaynağını okunabilir HTML’e dönüştürün. Etiketler iç içe düzeye göre girintilenir, öznitelikler düzenlenir; satır içi betikler ve stiller belgeyle birlikte biçimlendirilir.
Sayfa kaynağı neden böyle görünür?
HTML küçültücüleri etiketler arasındaki boşlukları birleştirir, yorumları siler, isteğe bağlı kapanış etiketlerini kaldırır ve gerekmediğinde öznitelik değerlerinin tırnaklarını çıkarır. Sunucu tarafı şablonları da görünümü karmaşıklaştırır: onlarca parçadan oluşturulan sayfa, kaynak dosyalarının düzenini yansıtmayan tek bir akış olarak gelir. Canlı bir sitenin kaynağını açtığınızda, bir bölümün kapanışını bulmak için etiketleri gözle saymanız gereken birkaç dev satırla karşılaşabilirsiniz.
Asıl mesele belge yapısıdır
HTML bir ağaç yapısıdır; düz bir satıra yayıldığında bu ağacı okumak güçleşir. İç içe düzeye göre girintilemek belgenin şeklini hemen gösterir: üstbilginin nerede bittiğini, ana içeriği hangi kapsayıcının sardığını, bileşenin ne kadar derinde yer aldığını ve hangi öğenin kapanış etiketinin eksik olduğunu görebilirsiniz. Düzenlenmiş sayfa kaynağı, başlık sırasını kontrol etmek, bir framework’ün ürettiği HTML’i incelemek veya başka bir sitenin bir bölümü nasıl yapılandırdığını anlamak için yararlıdır.
Satır içi betikler ve stiller de düzenlenir
Gerçek bir sayfa nadiren yalnızca HTML’den oluşur. Analiz kodları, JSON-LD yapılandırılmış verileri, yapılandırma nesneleri ve kritik CSS doğrudan belgeye gömülebilir; küçültücü bunları da sıkıştırır. Biçimlendirici her gömülü bloğu uygun ayrıştırıcıyla işler. Böylece küçültülmüş JavaScript içeren script etiketi okunabilir JavaScript’e, style etiketi okunabilir CSS’e dönüşür. Bunların tümü, doğru girintilenmiş belgenin içinde kalır.
Boşluğa duyarlı etiketler korunur
HTML’i girintilemek etiketler arasındaki boşlukları değiştirir ve bu boşluklar bazen anlam taşır. Biçimlendirici bunu dikkate alır: pre ve textarea içeriğini olduğu gibi bırakır, satır içi öğeleri de metnin çevresine görünür boşluk ekleyecek veya kaldıracak şekilde bölmemeye özen gösterir. Amaç, sayfanın görünümünü koruyarak belgeyi okunabilir hâle getirmektir. Yine de çıktıyı canlı ortamda kullanmadan önce kendi sayfanızda kontrol etmelisiniz.
Sık sorulan sorular
Sayfa kaynağının tamamını yapıştırabilir miyim?
Evet. Tarayıcınızın kaynak görüntüleme özelliğinden kodu kopyalayın veya sayfayı kaydedip dosyayı açın. head, body, satır içi betikler ve yapılandırılmış veriler dâhil tüm belge biçimlendirilir.
Biçimlendirme sayfanın görünümünü değiştirir mi?
Değiştirmemesi amaçlanır. pre ve textarea gibi boşluğa duyarlı öğeler korunur, satır içi içerik dikkatle işlenir. Yine de okumak için bir kopyayı biçimlendirin ve çıktıyı test etmeden canlı ortama taşımayın.
Twig veya Blade şablonlarında çalışır mı?
Kısmen. Standart HTML düzenlenir, ancak kendine özgü sözdizimi kullanan şablon etiketleri HTML ayrıştırıcısını zorlayabilir. Araç, HTML’i üreten şablondan çok tarayıcının gerçekten aldığı HTML için tasarlanmıştır.