, , ve etiketleri neden yeniden biçimlendirilmemelidir?

, ve öğelerinin içindeki boşluklar ve satır sonları tarayıcı tarafından tam anlamıyla oluşturulur, bu nedenle girintinin değiştirilmesi görüntülenen çıktıyı bozar. Benzer şekilde, veya etiketlerinin içindeki satırların bir HTML ayrıştırıcıyla bölünmesi, JavaScript dize değişmezlerini veya CSS seçicilerini bozabilir. , , Biçimlenmemiş Tut seçeneğinin etkinleştirilmesi bu blokları aynen korur.

HTML Beautifier ve Çevrimiçi Formatlayıcı

Q: HTML güzelleştirme ile HTML küçültme arasındaki fark nedir?

HTML güzelleştirme (pretty-baskı), geliştiricilerin işaretlemeyi kolayca okuyabilmesi, hata ayıklayabilmesi ve bakımını yapabilmesi için yapılandırılmış satır sonları ve hiyerarşik girintiler ekler. HTML küçültme, üretim sayfasının daha hızlı yüklenmesi için dosya boyutunu küçültmek üzere gereksiz boşlukları, yeni satırları ve yorumları ortadan kaldırır.

Q: HTML Beautifier, HTML5 geçersiz (kendi kendine kapanan) elemanları nasıl ele alır?

HTML5 hiçbir zaman kapanış etiketi olmayan 14 geçersiz öğeyi (alan, taban, br, sütun, yerleştirme, hr, img, giriş, bağlantı, meta, param, kaynak, parça ve wbr) tanımlar. Bu formatlayıcı, 14 geçersiz öğenin tamamını (artı bildirimleri ve XML/SGML talimatları) otomatik olarak tanır, böylece sonraki kardeş etiketleri asla daha derin girinti düzeylerine itmezler.

Dağınık veya minified HTML5 kodunu gerçek zamanlı olarak biçimlendirin, girintileyin ve temizleyin. HTML5 void etiketlerini, inline öğelerini, wrapping özniteliğini düzgün bir şekilde işler ve

HTML Kodunu Girin

Quick Presets:

karakterler: 0

Satırlar: 0

Boyut: 0 B

Biçimlendirilmiş HTML Çıkışı

Girinti Seçenekleri

Girinti Boyutu (Boşluklar):

Boşluklar Yerine Sekmeleri Kullanın Indent nested HTML elements using tab characters (\t)

Etiket ve Satır Sarma

Kısa Satır İçi Etiketleri Tek Satırda Tutun Keep inline tags like <strong>, <a>, <span>, and <code> together with surrounding text

Preserve exact whitespace and line breaks inside raw text and code blocks

Etiket Niteliklerini Yeni Satırlara Kaydır Place each HTML attribute on its own indented line when a tag has 2+ attributes

Metin İçeriğini Şuraya Kaydır:

Temizleme Seçenekleri

HTML Yorumlarını Kaldır Strip  comments from the formatted output

Tüm Boş Satırları Kaldır Strip blank lines between formatted HTML elements

Korunacak Maksimum Boş Satır:

Çevrimiçi HTML Beautifier ve Formatlayıcı Nedir?

HTML Beautifier (HTML formatlayıcı veya pretty yazıcı olarak da bilinir) sıkıştırılmış, minified veya tutarsız girintili HTML kaynak kodunu alır ve onu temiz, insanlar tarafından okunabilir bir DOM hiyerarşisi halinde yeniden yapılandırır. İster minified üretim şablonlarını inceliyor, ister CMS aktarımlarını temizliyor veya Git'e geçmeden önce kodu standartlaştırıyor olun, doğru girintileme, kapatılmamış etiketleri ve derinlemesine iç içe geçmiş kapsayıcıları tespit etmenizi kolaylaştırır.

Her köşeli ayracı yeni bir satıra bölen ve

veya

HTML Kodunu Çevrimiçi Güzelleştirme veya Küçültme

HTML işaretlemenizi yapıştırın: Formatlanmamış veya minified HTML kodunuzu HTML Kodunu Girin kutusuna yapıştırın veya formatlayıcıyı eksiksiz bir HTML5 şablonuyla test etmek için Örnek HTML Yükle seçeneğine tıklayın.
Biçimlendirme tercihlerinizi seçin: Girintiyi (2, 4 veya 8 boşluk veya sekme), wrapping özniteliğini, inline etiket gruplamasını ve yorum kaldırmayı yapılandırmak için Hızlı Ön Ayarlar çubuğunu veya sağ taraftaki ayarlar sütununu kullanın.
Kopyalayın, indirin veya küçültün: Biçimlendirilmiş HTML'niz siz yazdıkça otomatik olarak güncellenir. Dosyayı yerel olarak kaydetmek için clipboard'a Kopyala, .html İndir'i veya işaretlemeyi tek bir satıra sıkıştırmak için HTML'yi küçültün'yi tıklayın.

HTML Formatlama Karşılaştırmasından Önce ve Sonra

Biçimlendirme Modu	Örnek HTML Çıkışı	En İyi Kullanım Durumu
Küçültülmüş HTML	`Merhaba Dünya`	Üretim dağıtımı, HTTP verisi boyutunun azaltılması ve HTML şablonlarının e-postayla gönderilmesi.
Standart Güzelleştirilmiş (4 Alan)	`Merhaba Dünya`	Günlük web geliştirme, DOM yerleştirmede hata ayıklama ve kod incelemeleri.
Sarmalanmış Öznitelikler Modu	`class="kart" id="kahraman">`	Birçok Tailwind CSS yardımcı program sınıfına, `data-*` özniteliklerine veya ARIA desteklerine sahip bileşenler.

HTML5 Geçersiz Öğeler ve Satır İçi ve Blok Etiket Formatlaması Karşılaştırması

HTML5 Boş Öğeler Yuvalama Derinliğini Hiçbir Zaman Artırmaz: HTML5'de, geçersiz öğeler (, , , , , , , , , , , , ve ) kapatma etiketleri veya sonunda eğik çizgi gerektirmez. Biçimlendiricimiz bunları otomatik olarak takip ederek kardeş öğelerin hizalı kalmasını sağlar.
Satır İçi ve Blok Öğeleri: gibi inline öğelerini kırmakBelgelerimizi bugün okuyun.'nin beş ayrı satıra yazılması, düzyazının okunmasını zorlaştırır ve tarayıcıda kelimeler arasında istenmeyen boşluklara neden olabilir. Kısa Satır İçi Etiketleri Tek Satırda Tutmak etkinleştirilmiş, doğal cümle akışını korur.
Ham Blokları Koruma: , ve </code> etiketlerinin içindeki boşluk, tarayıcılar tarafından tam anlamıyla oluşturulur. <em>Unformatted</em> seçeneğinin işaretli tutulması, kod parçacıklarınızın, ASCII diyagramlarınızın ve yerleşik <code><script></code> veya <code><style></code> bloklarınızın hiçbir zaman değiştirilmemesini garanti eder.

Sıkça Sorulan Sorular (SSS)

HTML güzelleştirme ile HTML küçültme arasındaki fark nedir?

HTML güzelleştirme (pretty-baskı), geliştiricilerin işaretlemeyi kolayca okuyabilmesi, hata ayıklayabilmesi ve bakımını yapabilmesi için yapılandırılmış satır sonları ve hiyerarşik girintiler ekler. HTML küçültme, üretim sayfasının daha hızlı yüklenmesi için dosya boyutunu küçültmek üzere gereksiz boşlukları, yeni satırları ve yorumları ortadan kaldırır.

, ,

 ve </code> öğelerinin içinde boşluklar ve satır sonları tarayıcı tarafından tam anlamıyla oluşturulur, bu nedenle girintinin değiştirilmesi görüntülenen çıktıyı bozar. Benzer şekilde, <code><script></code> veya <code><style></code> etiketlerinin içindeki satırları bir HTML ayrıştırıcıyla bölmek, JavaScript dize değişmezlerini veya CSS seçicilerini bozabilir. <strong>Keep <pre>, <script>, <style> Unformatted</strong>'nin etkinleştirilmesi bu blokları kelimesi kelimesine korur.

HTML Beautifier, HTML5 geçersiz (kendi kendine kapanan) elemanları nasıl ele alır?

HTML5, 14 geçersiz öğeyi tanımlar (area, base, br, col, embed, hr, img, input, link, meta, param, source, Hiçbir zaman kapanış etiketi olmayan track ve wbr). Bu biçimlendirici, 14 geçersiz öğenin tümünü (artı bildirimleri ve XML/SGML talimatları) otomatik olarak tanır; böylece sonraki kardeş etiketleri asla daha derin girinti düzeylerine itmezler.

HTML girintisi için 2 boşluk, 4 boşluk veya sekme kullanmalı mıyım?

Hem 2 boşluk hem de 4 boşluk yaygın olarak kullanılmaktadır. Google'ın HTML/CSS Stil Kılavuzu ve modern ön uç araç zincirleri (Prettier, Vue, React) varsayılan olarak 2 boşluklarını kullanır çünkü HTML belgeleri genellikle derin DOM yuvalamasına sahiptir. WordPress ve birçok arka uç şablon motoru, tabs veya 4 space'yi tercih eder. Hızlı Ön Ayarlar çubuğunu kullanarak bunlar arasında anında geçiş yapabilirsiniz.

HTML kodum herhangi bir sunucuya yüklendi mi?

Hayır. Tüm HTML ayrıştırma, biçimlendirme ve küçültme işlemleri JavaScript kullanılarak tarayıcınızda %100 yerel olarak gerçekleşir. Kaynak kodunuz ve şablonlarınız asla cihazınızdan ayrılmaz.