HTML kodu nasıl biçimlendirilir ve küçültülür?

HTML metnini biçimlendirme ne işe yarar?

HTML metnini daha rahat incelemek, girinti düzenini belirginleştirmek veya belgelenen boşluk ve yorum dönüşümlerini uygulamak istediğinizde bu araçtan yararlanabilirsiniz. Okunabilir bir görünüm için beautify yolu, daha sıkı bir metin için minify yolu tercih edilir. İki seçenek aynı amaca hizmet etmez: ilki sunumu düzenler, ikincisi belirli metin parçalarını azaltır.

Bu çalışma biçimi, elinizdeki HTML’yi inceleme öncesinde düzenli bir görünüme kavuşturmanıza yardımcı olur. Girinti miktarını seçerek etiketlerin iç içe yapısını gözle takip edebilirsiniz. Minify çıktısını ise yalnızca aracın uyguladığı yorum ve boşluk değişikliklerinin sonucu olarak değerlendirin. Araçtan dönen metin, HTML’nin geçerli olduğunu veya güvenli biçimde temizlendiğini tek başına göstermez.

Girdi alanı HTML’yi metin olarak kabul eder ve başlangıçta boş bir değer içerir. Boş ya da yalnızca boşluklardan oluşan bir değer gönderildiğinde başarılı, boş bir sonuç alınması beklenir. Bu özel durum, boş bir sonuç görüldüğünde mutlaka biçimlendirme sorunu yaşandığı sonucuna varılmaması gerektiği anlamına gelir.

HTML Formatter kullanırken izlenecek yol

1. Biçimlendirmek istediğiniz HTML içeriğini giriş alanına düz metin olarak yapıştırın veya yazın. Göndermeden önce değerin gerçekten metin olduğuna ve içeriğin beklediğiniz parçaları taşıdığına bakın. Alanı boş bırakmanız halinde araç boş metin döndürebildiği için, deneme amacıyla anlamlı bir etiket yapısı kullanmanız daha açıklayıcı bir sonuç sağlar.

2. Okunabilir bir düzen gerekiyorsa beautify seçeneğini kullanın. Mod alanı boş kaldığında, içerik boşluk dışı karakterler taşıyorsa beautify yolu seçilir. Mod olarak minify dışında kalan başka bir değer yazıldığında da biçimlendirme yolu kullanılır; bu nedenle küçültme istiyorsanız ilgili modu açıkça seçin.

3. Girinti değerini belirleyin. Değer verilmediğinde iki boşlukluk varsayılan uygulanır. Araç, uygun değerleri tam sayıya dönüştürmeye çalışır; dönüştürme başarısız olursa veya değer 0 ile 8 arasındaki kapsayıcı aralığın dışındaysa yine iki boşluk kullanılır. Tutarlı bir görünüm için bu aralıkta bir tam sayı girin.

4. Daha sıkı bir metin elde etmek istiyorsanız minify modunu seçin. Bu yol, içeriği [if ile başlayan yorumları korur; bunun dışındaki yorumları kaldırır. Ayrıca etiketler arasındaki boşlukları birleştirir, yinelenen boşlukları azaltır ve metnin başındaki ve sonundaki boşlukları temizler. Bu değişiklikler, tam kapsamlı bir sıkıştırma işlemi olarak sunulmamalıdır.

5. İşlemi başlatın ve dönen metni seçtiğiniz amaca göre gözden geçirin. Büyük içeriklerde boyutu da kontrol edin: boşluk dışı karakter içeren giriş 1.000.000 UTF-8 bayt sınırını aşarsa kabul edilmez. Metin olmayan bir HTML değeri ise biçimlendirilmeden reddedilir.

Oluşan metin nasıl değerlendirilir?

Beautify sonucu, HTML’nin okunabilirliğini artırmak üzere girintili bir temsil sunar. Girinti alanında geçersiz bir değer kullanılmışsa sonuçta iki boşluk görmeniz beklenebilir; bu durum seçtiğiniz değerin aralık veya dönüştürme kurallarına uymadığını düşündürür. Minify sonucu ise yorum ve boşluklar üzerinde tanımlanan değişiklikleri taşır, fakat belgede bulunabilecek her türlü gereksiz içeriğin kaldırıldığını varsaymayın.

Minify çıktısında bir yorumun kalması, onun içeriğinin [if ile başlamasıyla açıklanabilir. Diğer yorumların görünmemesi, bu modun yorumları kaldırma davranışıyla uyumludur. Etiketler arasındaki aralıkların daralması ve çevredeki boşlukların silinmesi de aynı dönüşümün parçalarıdır. Çıktıyı başka bir yere aktarmadan önce bu değişikliklerin içerik açısından uygun olduğuna bakın.

Beautify sırasında gerekli HTML ayrıştırma bağımlılığı kullanılamazsa işlem başarısız olabilir. Ayrıştırma veya biçimlendirme sırasında bir istisna oluştuğunda başarılı metin yerine HTML ayrıştırma hatası dönebilir. Böyle bir sonuç, içeriğin bir doğrulama denetiminden geçtiğini ya da kalmadığını kanıtlamaz. Etiketlerin yapısını, yorumların amacını ve uygulamanızdaki davranışı araç sonucundan bağımsız olarak ayrıca kontrol edin.

Sonuç beklediğiniz biçimde değilse önce modu, girinti değerini ve girişin metin olup olmadığını yeniden inceleyin. Ardından içeriğin boyut sınırını ve ayrıştırılabilir yapısını değerlendirin. Bu kontroller, biçimlendirme çıktısı ile HTML’nin anlamı veya çalışma davranışı arasındaki farkı korumanıza yardımcı olur.

Uygulamalı örnek

Bir geliştirici, kısa bir HTML parçasının okunabilir düzenini görmek ve minify seçeneğinin yorum ile boşluklara etkisini karşılaştırmak ister.

Bir geliştirici, <div><p>Merhaba</p></div> metnini girişe yapıştırır, 2 boşluk girintisiyle beautify işlemini çalıştırır ve ardından aynı girdiyi minify modunda yeniden işler.

Beautify seçildiğinde HTML girinti eklenmiş, okunabilir bir metin olarak; minify seçildiğinde ise yorum ve boşluk dönüşümleri uygulanmış daha sıkı bir metin olarak döner.

Sınırlamalar

• Minify işlemi belirli yorum ve boşluk değişiklikleriyle sınırlıdır; kapsamlı sıkıştırma veya HTML doğrulaması yerine geçmez.
• Beautify, gerekli HTML ayrıştırma bağımlılığı kullanılamadığında ya da ayrıştırma sırasında istisna oluştuğunda başarılı bir metin döndürmeyebilir.

Sık yapılan hatalar

• Girinti alanına dönüştürülemeyen bir değer ya da 0 ile 8 dışındaki bir sayı yazmak, seçtiğiniz görünüm yerine iki boşlukluk varsayılanın kullanılmasına yol açabilir; bu nedenle aralık içinde geçerli bir tam sayı girin.

Sık sorulan sorular

Mod alanını boş bırakırsam hangi işlem uygulanır?

İçerik boşluk dışı karakterler içeriyorsa boş mod değeri beautify yoluna döner. Minify dönüşümü için mod alanına minify yazmanız gerekir.

Girinti değerim geçersizse ne olur?

Dönüştürülemeyen veya 0 ile 8 arasındaki kapsayıcı aralığın dışındaki değerler iki boşlukla değiştirilir. İstediğiniz düzeni korumak için geçerli bir tam sayı seçin.

Minify modu HTML yorumlarını korur mu?

İçeriği [if ile başlayan yorumlar korunur; diğer yorumlar kaldırılır. Etiketler arasındaki boşluklar birleştirilir, yinelenen boşluklar azaltılır ve çevredeki boşluklar temizlenir.