HTML kodunu temiz, okunabilir ve iyi yapılandırılmış web içeriği haline anında dönüştürün.
Giriş
Yayındaki bir siteden alınan, bir sayfa oluşturucudan dışa aktarılan ya da bir e-posta şablonundan kopyalanan HTML çoğu zaman hiç girinti olmadan birkaç satıra sıkıştırılmış halde gelir — teknik olarak geçerlidir ama bir insanın okuması gerçekten zordur. Güzelleştirme bunu tersine çevirir: etiketlerin iç içe geçişini görünür kılan satır sonlarını ve girintileri, işaretlemenin yaptığı işe hiç dokunmadan yeniden kurar. Bu da HTML'in yalnızca tarayıcıda görüntülenmesinin değil, gerçekten okunmasının ya da incelenmesinin gerektiği her durumda önem taşır — bir sayfanın nasıl kurulduğunu anlamak, bir öğrencinin teslim ettiği kodu kontrol etmek ya da bir şeyin neden düzgün görünmediğini bulmak gibi.
Bu araç kodunuzu nasıl biçimlendirir
HTML'i yapıştırıp “Güzelleştir” düğmesine bastığınızda kod, her etiket için bir iç içe geçme düzeyi olacak şekilde iki boşlukluk girintiyle yeniden kurulur; böylece hangi öğenin hangisinin içinde durduğu ilk bakışta belli olur. Aracın gerçek hayattaki HTML'i nasıl ele aldığına dair bilinmesinde fayda olan birkaç nokta var:
- Yorumlar silinmez, korunur. Koşullu yorumlar ve CDATA blokları dahil olmak üzere HTML yorumları olduğu gibi aktarılır — kodunuzda kalması gereken bir kaynak bilgisi, TODO notu ya da lisans yorumu varsa bu işinize yarar.
<script>ve<style>blokları yeniden yazılmaz, yalnızca yeri düzeltilir. Girintileri, çevrelerindeki HTML içinde bulundukları konuma göre ayarlanır; ancak içlerindeki JavaScript veya CSS ayrıca biçimlendirilmez. Bir script ya da style bloğunun içindeki kod baştan dağınıksa dağınık kalır — yalnızca çevresindeki HTML'e göre konumu düzene girer. O içeriğin de kendi başına biçimlendirilmesi gerekiyorsa doğrudan JavaScript Beautifier veya CSS Beautifier kullanın.
Kullanmadan önce bilinmesi gerekenler
Bu araç, alışıldık ve düzgün yazılmış HTML ile iyi başa çıkar. Daha sıra dışı işaretlemelerde çıktıya güvenmeden önce kontrol edilmesinde yarar olan üç nokta var:
- Kendiliğinden kapanan bazı HTML5 öğeleri bu şekilde tanınmaz. Aracın kapanış etiketi gerektirmeyen etiketler listesi, güncel HTML belirtiminin kendi boş öğe listesiyle karşılaştırıldığında yenilerden birkaçını içermiyor — özellikle
<source>(<video>,<audio>ve<picture>içinde kullanılır),<track>(altyazılar için<video>içinde kullanılır) ve<col>(tablolarda<colgroup>içinde kullanılır). HTML'inizde bunlardan biri her zamanki gibi — sonunda açıkça/>olmadan — yazılmışsa, o etiketten sonraki her şey bir düzey fazla girintili çıkabilir; çünkü biçimlendirici hiç gelmeyecek bir kapanış etiketini beklemeye devam eder. Bu etiketleri açık bir eğik çizgiyle (<source />) yazmak sorunu ortadan kaldırır. - Bozuk HTML'i onarmaz. Özgün kodunuzdaki bir etiket hiç kapatılmamışsa ya da etiketler birbirini tutmuyorsa, bu araç bulduğu yapıyı hata vermeden yeniden biçimlendirir; ama eksik bir kapanış etiketi eklemez, sorunun kaynağını da başka bir yolla gidermez. Girdide eksik olan neyse çıktıda da eksik kalır — bu bir biçimlendirici, doğrulayıcı değil.
- Cümle ortasındaki satır içi etiketler kendi satırlarına düşebilir. Akan metinden oluşan bir paragrafın içindeki
<strong>,<em>ya da<a>gibi etiketler çevrelerindeki sözcüklerden ayrılıp ayrı satırlara düşebilir; çünkü bu araç, bazı başka biçimlendiricilerin yaptığı gibi onları “satır içinde tutulacak” etiketler saymaz. Bu, HTML'in tarayıcıdaki görünümünü değiştirmez — etiketler arasındaki boşluk her hâlükârda tek boşluğa iner — ama çok sayıda satır içi biçim etiketi barındıran, metin ağırlıklı içerik biçimlendiriyorsanız bunu beklemekte fayda var.
Bunların hiçbiri, bir tarayıcı sayfayı görüntülediğinde HTML'in gerçekte ne yaptığını değiştirmez — hepsi, kodu doğrudan okuyan bir insanın gözünde nasıl göründüğüyle ilgilidir, sayfanın nasıl görüntülendiğiyle değil.
Bu araç ne zaman doğru seçimdir
- Yayındaki bir sayfanın HTML'ini okuyup ondan öğrenmek. Bir sitenin kaynağını görüntülemek ya da tarayıcının geliştirici araçlarıyla incelemek çoğu zaman sıkıştırılmış veya otomatik üretilmiş, yapısı zayıf bir işaretleme gösterir — güzelleştirmek, bir sayfanın nasıl kurulduğunu gerçekten incelemeyi mümkün kılar; bu da kendi kodunuzu biçimlendirmenin ötesinde, gerçek bir dijital okuryazarlık kullanımıdır.
- Bir öğrencinin HTML ödevini incelemek. Editörler arasında kopyalanan ya da bir sayfa oluşturucudan dışa aktarılan kod bazen özgün biçimini yitirir; okumadan önce güzelleştirmek, değerlendirmeyi ve geri bildirimi hızlandırır.
- Düzgün görüntülenmeyen işaretlemede sorun aramak. Yoğun ve biçimsiz HTML'de eksik ya da yanlış yere konmuş bir etiketi fark etmek zordur — önce biçimlendirmek, asıl yapısal sorunu genellikle daha kolay görünür kılar; yalnız bu aracın gerçekten bozuk bir etiketi sizin için onarmayacağını unutmayın.
HTML'inizde <source>, <track> veya <col> etiketleri açık eğik çizgi olmadan yoğun biçimde kullanılıyorsa, çıktıda bu etiketlerden sonraki girintiyi bir kez daha kontrol edin — yukarıdaki kısıtlamaya bakın. Alışıldık sayfa işaretlemesi içinse bu araç, bir editör ya da eklenti kurmadan okunur bir yapı elde etmenin hızlı bir yoludur.
Örnek
Bir öğrenciden gerçek bir web sitesinin ana sayfasını incelemesi ve ana gezinme yapısının HTML'de nasıl kurulduğunu anlatması isteniyor. Sayfanın kaynağı görüntülendiğinde ortaya hiç boşluk içermeyen, yoğun ve küçültülmüş tek bir satır çıkıyor. Bunu bu araca yapıştırıp güzelleştirmek, düzgün girintilenmiş bir işaretlemeye dönüştürüyor; böylece hangi <nav>, <ul> ve <li> öğelerinin hangilerinin içinde yer aldığını ve gezinmenin sayfanın geri kalanıyla ilişkisini gerçekten görmek mümkün oluyor — biçimsiz tek bir satır üzerinde yapılması çok daha zor olan türden bir yapısal okuma.
Sıkça sorulan sorular
Güzelleştirmek HTML'in görüntülenme biçimini değiştirir mi?
Hayır. Yalnızca boşluklar ve satır sonları değişir — etiketler, öznitelikler ve içerik aynı kalır; dolayısıyla sayfa tarayıcıda her iki durumda da aynı görünür.
HTML yorumları siliniyor mu?
Hayır — koşullu yorumlar dahil, yorumlar çıktıda olduğu gibi korunur.
HTML'imin içindeki CSS veya JavaScript de biçimlendirilir mi?
Kendi başına değil. <script> ve <style> blokları çevrelerindeki HTML'in girintisine uyacak şekilde yeniden konumlandırılır, ama içlerindeki kod kendi başına biçimlendirilmez. O içeriğin kendi biçimlendirmesine ihtiyacı varsa doğrudan JavaScript Beautifier veya CSS Beautifier kullanın.
Bozuk ya da kapatılmamış etiketleri düzeltir mi?
Hayır. Bu araç bulduğu yapıyı biçimlendirir; HTML'i doğrulamaz ve eksik kapanış etiketlerini eklemez.
<source>, <track> ve <col> etiketlerini doğru işler mi?
Açık bir eğik çizgi olmadan yazıldıklarında güvenilir biçimde işlemez — sonrasındaki içerik bir düzey fazla girintili çıkabilir. Bunları <source /> biçiminde yazmak bunu önler. Yukarıdaki “Kullanmadan önce bilinmesi gerekenler” bölümüne bakın.
Kodum bir yere kaydediliyor mu?
Hayır. Yapıştırılan HTML, biçimlendirilmiş sonucu üretmek için işlenir ve sonrasında saklanmaz; yalnızca aracın kullanıldığı bilgisi kaydedilir, kodun kendisi değil.
Hangi ilgili araçları kullanabilirim?
HTML'inizin içindeki JavaScript veya CSS'i biçimlendirmek için JavaScript Beautifier ya da CSS Beautifier, bitmiş HTML'i yayın ortamı için yeniden küçültmek için HTML Minifier kullanın.
