HTML Onarıcı
Bozuk HTML’i çevrimiçi onarın — kapatılmamış etiketleri, eksik tırnakları, uyumsuz elemanları ve hatalı iç içe geçmeleri düzeltin.
HTML Onarıcı Nedir?
Çoğunlukla doğru ama sayfayı altüst eden bir HTML’iniz mi var? Kapatılmamış bir <p>, başıboş bir </div> veya tırnakları eksik bir href, belgenin geri kalanını tuhaf bir parse durumuna sokabilir. Tarayıcı kötü işaretlemeyle elinden geleni yapar — ama sonuç nadiren istediğiniz şey olur. Buraya yapıştırın, biz size WHATWG HTML Living Standard’daki kurallara göre ayrıştırıcının memnun olacağı bir şey verelim.
Günlük kırılmaları hedefler: eksik bir kapanış etiketi, kaçırılmamış bir tırnak, "’ı eksik bir nitelik değeri, kapatılmamış bir liste öğesi, olmaması gereken yerde iç içe geçmiş bir blok elemanı. Resmi W3C Validator’ın her seferinde bir hata olarak işaretlediği türden şeyler. Onarıcı tüm belgeyi tek seferde okur ve doğrudan projenize geri yapıştırabileceğiniz temiz bir sürüm verir.
İşaretlemeniz HTTPS üzerinden onarım servisine gönderilir ve saklanmaz. <code><script></code> veya <code>data-*</code> niteliklerinde sabit kodlanmış API anahtarları gibi satır içi sırlarınız varsa, yapıştırmadan önce bunları temizleyin.
HTML Onarıcı Nasıl Kullanılır
Üç adım. Kısmi parçalar, tam belgeler veya bir CMS dışa aktarımından geri aldığınız her türlü garip karışım üzerinde çalışır.
Bozuk HTML Yapıştırın veya Örnek Yükleyin
HTML’inizi sol editöre bırakın. Tipik hataları olan küçük bir sipariş onay sayfası için Örnek HTML’e basın — hiç kapatılmamış bir <head>, </li>’siz bir liste öğesi, tırnaksız bir href. Bozuk HTML örneği:
<p>Your order <strong>SKU-101 ships tomorrow.
<ul>
<li>1 x Laptop Stand
<li>2 x USB-C Cable</li>
</ul>Burada üç hata var: <strong> hiç kapanmıyor, ilk <li> sonlandırılmamış ve </p> yok. Onarıcı bunları doğru sırayla kapatır.
HTML’i Onar!! Düğmesine Tıklayın
Yeşil HTML’i Onar!! düğmesine basın. İşaretlemenizi onarım servisine gönderiyoruz; orada açık elemanlar HTML sözdizimi kurallarına göre kapatılır, nitelik tırnakları geri getirilir ve açıkça hatalı olan iç içe geçmeler düzeltilir. Metin içeriğiniz, sınıflarınız, id’leriniz ve satır içi stilleriniz dokunulmadan kalır.
Onarılmış Çıktıyı İnceleyin
Sağ panelde onarılmış HTML var. Bir tarayıcıya, sağlık kontrolü için HTML Doğrulayıcımıza, ya da CMS’inize geri bırakın. Daha derin bir erişilebilirlik incelemesi için ayrı bir a11y aracı kullanın — o, sözdizimi onarımından ayrı bir konudur.
Bunu Gerçekten Ne Zaman Kullanırsınız
CMS veya E-posta Şablonu Çıktısını Onarın
WYSIWYG editörler ve e-posta şablonu oluşturucular ince kırık işaretleme göndermeye bayılır — yetim <p> etiketleri, eksik alt nitelikleri, ara sıra kapatılmamış bir <td>. Yayımlamadan önce dışa aktarımı buradan bir kez geçirin ki render edilen sayfa tarayıcılar arasında beklenmedik biçimde kaymasın.
Office Uygulamalarından Yapıştırılan İşaretlemeyi Kurtarın
Word ve Google Docs, çoğunlukla dengesiz etiketler veya başıboş içeren bir <span> ve özel nitelik karmaşası yapıştırır. Onarıcı yapıyı temizler, böylece sonucu sıfırdan yeniden yazmak yerine düzenlemeye devam edebilirsiniz.
Elle Yazılmış Bileşenleri Onarın
Bir öğretici, wiki sayfası veya eski bir README’deki çabucak yazılmış HTML parçacıkları — kopyalayın, temizletin, gitmesi gereken yere yapıştırın. Birinin blog yazısında işe yarayan ama sizinkinde yaramayan örnekleri kopyala-yapıştırırken kendinizi tıkanıklıktan kurtarmak için faydalı.
Ayrıştırma Öncesi Kazınmış Sayfaları Temizleyin
Bir çıkarıcıya beslemek için HTML kazırken, kırık işaretleme DOM tabanlı ayrıştırıcıların tepesini attırır. Ayrıştırıcınıza üzerinde çalışacak kararlı bir yapı vermek için sayfaları önce buradan geçirin. Sıkı uyumluluk gerekiyorsa gerçek bir doğrulayıcıyla eşleştirin.
Sık Sorulan Sorular
HTML’im saklanıyor mu veya paylaşılıyor mu?
Yapıştırdığınız HTML, onarımı çalıştırmak için backend’imize HTTPS üzerinden gönderilir ve yanıt döndükten sonra saklamayız. İstek yolunda üçüncü taraf izleyici yoktur. Bununla birlikte, sayfanız sabit kodlanmış API anahtarları, dahili URL’ler veya analitik token’lar içeriyorsa, onu herhangi bir genel paste gibi değerlendirin — hassas değerleri önce ayıklayın.
Aslında ne tür HTML hatalarını düzeltir?
Kapatılmamış etiketler (<p>, <li>, <td>, <span>), uyumsuz kapanışlar, eksik veya dengesiz nitelik tırnakları, hatalı biçimlendirilmiş DOCTYPE, varlık olması gereken metin içeriğindeki başıboş &/</> ve apaçık iç içe geçme hataları (satır içi bir elemanın içindeki blok elemanı). Eksik içeriği uydurmaz veya geçerli işaretlemeyi yeniden yazmaz.
Sınıflarımı, id’lerimi veya satır içi stillerimi değiştirir mi?
Hayır. Onarıcıya yalnızca sözdizimini onarması açıkça söylenir — sınıf adları, id’ler, satır içi style nitelikleri, data-* nitelikleri ve onclick gibi olay işleyicileri olduğu gibi geçer. Çıktıda bunlardan biri değişmiş gibi görünüyorsa, bu bir bug’dır.
HTML5, XHTML veya ikisini de mi üretir?
HTML5’i hedefler — günümüzdeki her tarayıcının ayrıştırdığı budur. <br /> gibi void elemanlarda kendinden kapanan etiketler girdide kabul edilir ama çıktı standart HTML5 formunu kullanır. Özellikle sıkı XHTML çıktısına ihtiyacınız varsa (bugün nadir), XHTML farkındalıklı bir araç kullanın.
HTML’imi neden direkt W3C Validator’dan geçirmeyeyim?
Geçirmelisiniz, son tur için — W3C validator’ı geçerli HTML’in ne olduğunun doğruluk kaynağıdır. Ama hataları teker teker gösterir ve onları düzeltmez. Onarıcı, önce belgeyi tek geçişte kapatmak istediğinizde işe yarar; sonra doğrulayıcıyı çalıştırıp doğrularsınız.
Erişilebilirlik nasıl — eksik alt veya ARIA ekler mi?
Hayır ve bu bilinçli. ARIA rolleri ve alt metni içerik kararlarıdır, sözdizimi kararı değil. Yer tutucu bir alt="" eklemek gerçek bir erişilebilirlik sorununu maskelerdi. Bunlar için adanmış bir a11y denetimi (axe, WAVE, Lighthouse) çalıştırın.
İhtiyaç Duyabileceğiniz Diğer HTML Araçları
Sözdizimini düzeltmek sadece başlangıç. Ayrıştırıldıktan sonra şunlar faydalı sonraki adımlar: