E-posta kampanyası hazırlayan ve şablon kodunu elle düzenleyenler için: çapraz etiket, tekrarlanan id ve alt'sız görsel.
E-posta şablonunu tarayıcıda açtınız, her şey düzgün görünüyor. Gönderdiniz. Bir alıcıda düğme kaymış, bir başkasında görsel yerine boş bir kutu var. Hata çoğunlukla şablonun kodunda oradaydı; tarayıcı hoşgörülüydü, gönderdiğiniz yer değil.
Bu yazıda kopyala-yapıştır bir kampanya şablonunu HTML Biçimlendirici'ye yapıştırdık. Şablona bilerek altı hata soktuk ve aracın bunları hangi düzeyde, hangi satırda bulduğunu yazdık. Şablon 30 satırlık kurgusal bir mağaza indirimi e-postası.
Kısaca
Tarayıcı hatayı örter, e-posta programı örtmeyebilir
Tarayıcılar bozuk HTML'i sessizce onarır: eksik kapanış etiketini kendisi ekler, çapraz etiketi kendince düzeltir. Bu, hatalı bir cümleyi okuyan birinin anlamı tahmin etmesi gibi; siz hatayı hiç görmezsiniz. E-postayı açan program aynı tahmini yapmayabilir. Farklı programların bozuk HTML'i nasıl yorumladığını bu yazıda denemedik; ama hatayı gönderimden önce görmek, tahmine bırakmaktan ucuzdur.
Araç bulguları üç düzeyde gösteriyor. Hata, yapının bozuk olduğu yerdir: kapanmamış ya da çapraz geçmiş etiket, sahipsiz kapanış. Uyarı, yapının bozuk olmadığı ama sonradan sorun çıkarabileceği yerdir: alt'sız görsel, tekrar eden id, tırnaksız değer. Bilgi ise HTML'in açıkça izin verdiği ama bilmenizde fayda olan durumlardır.
Denedik: 6 hata, aracın bulguları
Şablonun gövdesine şu altı hatayı soktuk: çapraz geçmiş bir b ve i çifti, fazladan bir kapanış etiketi, aynı id'nin iki kez kullanılması, tırnaksız bir bağlantı değeri, alt'sız bir görsel ve kapatılmamış öğeler. Gövde şöyleydi:
<table width="600" cellpadding="0" cellspacing="0" id="kutu">
<tr>
<td id="ust"><img src="logo.png" width="120" height="40"></td>
</tr>
<tr>
<td id="ust">
<h1>Sonbahar indirimi başladı</h1>
<p>Seçili ürünlerde <b>%30'a varan <i>indirim</b> yarın gece bitiyor.</i></span></p>
<ul>
<li>Ücretsiz kargo
<li>14 gün iade
</ul>
<a href=https://ornek.com/kampanya class="dugme">Kampanyayı gör</a>
</td>
</tr>
<tr>
<td>
<p>Bu e-postayı Örnek Mağaza aboneliğiniz nedeniyle aldınız.
</tr>
</table>Araç "3 hata bulundu, biçimlendirme yine de yapıldı" dedi ve ekranda görünen çıktının değişmediğini not etti. Özet satırı: 23 öğe, 3 hata, 3 uyarı, 4 bilgi.
| Hata | Düzey | Satır | Düzeltme |
|---|---|---|---|
| img öğesinde alt yok | Uyarı | 14 | Görsele alt özniteliği ekleyin |
| Aynı id iki öğede (ust) | Uyarı | 17 | Her id'yi bir kez kullanın |
| b ve i çapraz geçmiş | Hata | 19 | Önce i, sonra b kapatılmalı |
| Karşılığı olmayan kapanış: i | Hata | 19 | Çapraz hatanın yan etkisi, düzelince kalkar |
| Karşılığı olmayan kapanış: span | Hata | 19 | Açılışı olmayan etiketi silin |
| Tırnaksız href | Uyarı | 24 | Değeri çift tırnak içine alın |
Altı hata soktuğumuz halde araç üç hata ve üç uyarı buldu. Sayının tutmaması bir çelişki değil: tek bir çapraz geçme, aracın iki hata satırı üretmesine yol açtı.
Çapraz iç içe etiket nedir?
<b> etiketini açıp içine <i> açtıysanız, önce </i> sonra </b> yazmanız gerekir. Bir matruşka bebeği gibi: küçük olan, büyüğün kapanmasından önce kapanmalı. Biz bilerek ters yazdık ve araç 19. satır, 36. sütunda "i etiketi b kapanmadan önce kapanmalıydı" dedi.
Bu hata, kalın ve eğik metin içeren bir cümle elle düzenlenirken bir kapanış etiketinin yerinden oynamasıyla oluşabilir. Denetim raporu bunu yakalıyor, çünkü etiketlerin açılış ve kapanış sırasını tek tek izliyor. Bu satır aynı zamanda 70. ve 74. sütunlarda iki hata daha üretti: sahipsiz bir kapanış i ve bir kapanış span. İlk hatayı düzeltince i mesajı da kalkıyor. span etiketi ise gerçekten fazlaydı; onu ayrıca silmek gerekiyor.
Düzeltilmiş satırlar şöyle:
<td id="ust"><img alt="Örnek Mağaza" src="logo.png" width="120" height="40"></td>
<td id="icerik">
<p>Seçili ürünlerde <b>%30'a varan <i>indirim</i></b> yarın gece bitiyor.</p>
<a href="https://ornek.com/kampanya" class="dugme">Kampanyayı gör</a>Düzeltmeleri uyguladıktan sonra şablonu tekrar yapıştırdık. Sonuç: "HTML yapısı sağlam, ekranda görünen çıktı değişmedi" ve özet satırında 0 hata, 0 uyarı, 4 bilgi.
Hata sayılmayanlar: HTML'in izin verdiği eksikler
Şablonda kapatılmamış iki <li>, bir <p> ve bir <td> vardı. Araç bunları hata değil bilgi olarak listeledi: "Kapanış etiketi yazılmamış, HTML buna izin veriyor". Kapanış etiketi bu öğelerde isteğe bağlı olduğu için bu doğru.
Yine de bilgi satırlarını yok saymayın. E-posta şablonlarında tabloyla düzen kurulduğunda, kapatılmamış bir hücre okunurluğu düşürür. Kodu bir başkası açtığında da kapanışları eksik satırlarda neyin nerede bittiğini görmek zorlaşır.
Kapatılmayan bir div ise farklı. Ayrı bir küçük denemede <div> açıp hiç kapatmadık; araç "4. satır, 1. sütun: Etiket kapanmadan girdi bitti: div" diyerek hata verdi.
Biçimlendirme görünümü bozar mı?
E-postada boşluk önemlidir: iki kelimenin arasındaki bir boşluğun silinmesi ya da eklenmesi metni değiştirir. Bunu denemek için iki satırlık küçük bir parça hazırladık: bir paragraf içinde kalın, bağlantı ve eğik metin, altında da içindeki boşluklara dokunulmaması gereken bir pre bloğu.
<p>Merhaba <b>Ayşe</b>, <a href="/k">kampanya</a> ve <i>kargo</i> hazır.</p>
<pre> ilk satır
ikinci satır</pre>Biçimlendir'de paragraf tek satırda, kelimeler arasındaki boşluklar olduğu gibi kaldı. pre bloğundaki baştaki boşluklara ve üç boşluklu araya dokunulmadı. Küçült'te de aynı paragraf aynı kaldı, pre bloğu bozulmadı. Bu iki işlemin farkı yalnız boşluk düzeni: biri okunur, diğeri kısa. Şablonu göndermeden önce Küçült ile kısa hale getirmek isterseniz, önce Biçimlendir ile hatasızlığı görün. İki işlemde de araç "HTML yapısı sağlam, ekranda görünen çıktı değişmedi" dedi.
Bu, aracın bir güvencesi: her çalıştırmadan sonra girdinin ve çıktının ekranda görünen metnini karşılaştırıyor. Biçimlendirme metni değiştirecek olsaydı, sayfa bunu kırmızı bir uyarıyla bildirirdi. Biz bu denemede öyle bir durumla karşılaşmadık; yani uyarıyı görmedik, yalnız güvencenin yazıldığını okuduk.
Göndermeden önce kontrol listesi
- Her img öğesinde alt özniteliği var
- Aynı id ikinci kez kullanılmadı
- b, i, a gibi etiketler açıldığı sırayla ters kapatıldı
- Bağlantı değerleri çift tırnak içinde
- Fazladan kapanış etiketi kalmadı
- Denetim raporunda hata ve uyarı satırı yok
Adım adım
- Şablonun kodunu sol kutuya yapıştırın.
- İşlem olarak Biçimlendir'i seçin; girinti ve satır sarma ayarlarını isterseniz değiştirin.
- Denetim raporunu satır satır okuyun; önce hata, sonra uyarı düzeyine bakın.
- Kodunuzda ilgili satırı düzeltip tekrar yapıştırın.
- Rapor temizlenince çıktıyı kopyalayın ya da indirin.
Aracın sınırları: sayfa yapıştırdığınız HTML'i çalıştırmıyor ve bir önizleme çerçevesi göstermiyor; yani şablonun bir e-posta programında nasıl görüneceğini bu araçla göremezsiniz. Yalnız kodun yapısını denetliyor. Gönderim öncesi bir e-posta programında deneme göndermek bu araçla yapılan kontrolün yerini tutmaz, onu tamamlar.
Sayfanın altında Deneyin başlığıyla beş örnek düğmesi var: Kapanmamış etiket, Çapraz geçmiş, Yinelenen id, Satır içi boşluk, Script ve style. Biz bunları kullanmadık, kendi şablonumuzu yapıştırdık; ilk kez deniyorsanız bu düğmeler aracın neyi bulduğunu görmek için bir başlangıç olabilir.
Kendi şablonunuzla HTML Biçimlendirici'yi ücretsiz deneyebilirsiniz.
Bu denemeyi 29 Eylül 2026'da Chrome'da yaptık. Şablon kurgusaldır.
Kaynaklar
