Kullanımdan Kalkan HTML Etiketleri: center, font, marquee ve Yerine Ne Kullanılır

Neden kullanmamalısınız? Hâlâ çalışıyor ama...

Bu öğelerin bir kısmı tarayıcılarda hâlâ görüntülenir. MDN örneğin <noembed> için "birçok tarayıcıda hâlâ çalışıyor ama eski, kullanılmamalı" der, <frame> için de artık HTML belirtiminin parçası olmadığını ve desteğin gelecekte kaldırılabileceğini belirtir. Yani "bende düzgün görünüyor" bir gerekçe değildir. Daha önemli sorun anlamdır: <font> veya <center> yalnızca görünüm söyler, içeriğin ne olduğunu söylemez. Ekran okuyucular, arama motorları ve diğer araçlar bu öğelerden anlamlı bir bilgi çıkaramaz; <frame> gibi bazıları ise MDN'ye göre ekran okuyucuyla gezinmeyi doğrudan zorlaştırır.

Bir de bakım sorunu var. Görünümü HTML'in içine gömdüğünüzde, renk veya yazı tipi değişikliği için yüzlerce dosyayı tek tek düzenlemeniz gerekir. CSS'e taşındığında aynı değişiklik tek bir kuralla yapılır. Bu yazı CSS anlatmıyor; ama her öğenin yerine hangi CSS özelliğinin geçtiğini MDN'nin önerdiği adlarla belirteceğiz.

MDN listesindeki eski öğeler ve yerlerine ne kullanılır

Tablodaki "Yerine" sütunu MDN sayfalarının kendi önerilerinden alındı. Şimdi bunları gruplar halinde, ayrıntılarıyla görelim.

Görünüm öğeleri: center, font, big, nobr

<center>, MDN'ye göre HTML 4 ve XHTML 1'de CSS text-align özelliği lehine kullanımdan kaldırıldı. Metni ortalamak için text-align bir <div> veya <p> öğesine uygulanır; blokları ortalamak için margin-left ve margin-right değerlerini auto yapmak (ya da margin: 0 auto) önerilir. <font> öğesi color, face ve size öznitelikleriyle rengi, yazı tipini ve 1 ile 7 arasındaki boyutu belirliyordu; MDN bunun yerine CSS yazı tipi özelliklerini kullanmanızı söyler. <big> metni bir boy büyütüyordu ve belirtimden kaldırıldı; yerine font-size kullanılır. <nobr> ise MDN'nin vurgusuyla hiçbir zaman standart HTML olmadı; satırın kırılmasını engellemek için CSS white-space özelliği kullanılır.

<!-- Eski:
<center><font face="Arial" size="5" color="red">Kampanya bitiyor!</font></center>
-->

<!-- Yeni: anlam HTML'de, gorunum CSS'te (text-align, font-size, color) -->
<p class="duyuru"><strong>Kampanya bitiyor!</strong></p>

Bu dönüşümde dikkat edilecek bir nokta var: eski kodda kırmızı ve büyük yazı muhtemelen bir önem vurgusuydu. Yeni kodda bu anlamı <strong> taşıyor, görünüm ise "duyuru" sınıfına bağlı CSS'te. Vurgunun türüne göre <strong>, <mark> veya <b> arasındaki seçim için metin etiketleri yazısına bakın.

Hareket: marquee

<marquee> kayan bir metin alanı ekliyordu ve behavior, bgcolor gibi özniteliklerle denetleniyordu. MDN bu öğenin kullanımdan kalktığını ve kullanılmasının kesinlikle önerilmediğini belirtir. Kayan bir etki gerçekten gerekiyorsa CSS animasyonları ve dönüşümleri kullanmanızı, ayrıca kullanıcı tercihine göre animasyonu durdurmak için prefers-reduced-motion medya sorgusunu eklemenizi önerir. Bu, erişilebilirlikle de doğrudan ilgilidir: WCAG 2.2.2 ölçütü kendiliğinden başlayan ve 5 saniyeden uzun süren hareketli içerik için duraklatma veya durdurma denetimi ister (WCAG temelleri).

Anlamlı yerine geçenler: tt, strike, acronym, dir

<tt> metni eşit aralıklı yazı tipiyle gösteriyordu. MDN onu eski sayar ve amaca göre daha anlamlı öğeleri önerir: kod için <code>, klavye girişi için <kbd>, program çıktısı için <samp>, değişken için <var>, ayrı bir blok için <pre>. Bunların hiçbiri uymuyorsa bir <span> ve CSS font-family kullanılabilir. <strike> için MDN, HTML 4 ve XHTML 1'de kullanımdan kalktığını ve HTML Living Standard'da eski sayıldığını belirtir: içerik gerçekten silinmişse <del>, diğer tüm durumlarda <s> kullanın.

<!-- Eski: <tt>npm install</tt> komutunu calistirin -->
<p><kbd>npm install</kbd> komutunu çalıştırın; çıktı <samp>added 12 packages</samp> gibi görünür.</p>

<!-- Eski: Fiyat: <strike>500 TL</strike> 400 TL -->
<p>Fiyat: <s>500 TL</s> 400 TL</p>

<!-- Eski: Teslim tarihi <strike>3 Mart</strike> 5 Mart -->
<p>Teslim tarihi <del>3 Mart</del> <ins>5 Mart</ins></p>

İkinci ve üçüncü satır arasındaki fark anlamdadır: eski fiyat artık geçerli olmayan ama silinmemiş bir bilgidir, bu yüzden <s>; değişen teslim tarihi ise belgede yapılmış bir düzeltmedir, bu yüzden <del> ve <ins>. Kod ve klavye öğelerinin ayrıntıları blockquote, q, code ve pre yazısında.

<acronym> için MDN'nin uyarısı tek cümledir: kullanmayın, <abbr> kullanın. Kısaltmanın açılımını title özniteliğine yazabilirsiniz; ancak MDN, mümkünse açılımı ilk kullanımda düz metin olarak yazmayı ve kısaltmayı <abbr> ile işaretlemeyi önerir, çünkü title dokunmatik ve klavye kullanıcılarına güvenilir biçimde ulaşmaz. <dir> bir dosya ve klasör dizini için kapsayıcıydı; MDN, dosya listeleri dahil tüm listeler için <ul> kullanmanızı söyler. Liste öğelerinin ayrıntıları listeler yazısında.

<p>
  Bu yazı Web İçeriği Erişilebilirlik Yönergeleri'ni (<abbr>WCAG</abbr>) temel alır.
  <abbr title="World Wide Web Consortium">W3C</abbr> bu yönergeleri yayımlar.
</p>

<ul>
  <li>index.html</li>
  <li>stil.css</li>
</ul>

Çerçeveler: frame, frameset, noframes

<frameset>, tarayıcı penceresini <frame> öğelerinden oluşan bölmelere ayırıyordu; <noframes> da çerçeveleri desteklemeyen tarayıcılar için yedek içerik sunuyordu. MDN <frame> kullanımını performans sorunları ve ekran okuyucu kullanıcıları için erişilebilirlik eksikliği gibi dezavantajlar nedeniyle önermez ve yerine <iframe> öğesini gösterir. Erişilebilirlik rehberine göre çerçeveli sayfalarda ekran okuyucuyla gezinmek zordur; en iyi erişilebilirlik ve bakım için çerçeve kullanan sayfaları benzer bir düzeni CSS ile kuracak şekilde yeniden tasarlamanız önerilir.

Başka bir belgeyi sayfaya gerçekten gömmeniz gerekiyorsa <iframe> kullanın ve ona içeriği anlatan bir title verin. sandbox, allow ve loading gibi öznitelikler iframe yazısında anlatılıyor.

Ham metin: xmp ve plaintext

<xmp> başlangıç ve bitiş etiketleri arasındaki metni HTML olarak yorumlamadan, eşit aralıklı gösteriyordu; <plaintext> ise başlangıç etiketinden sonraki her şeyi ham metin sayıyordu ve kapanış etiketi yoktu. MDN ikisinin de tutarsız uygulandığını ve güncel HTML'den kaldırıldığını belirtir. Yerine <pre> veya anlamı uyuyorsa <code> kullanılır; ama bu öğeler içeriği HTML olarak yorumlar, bu yüzden <, > ve & karakterlerini kaçırmanız gerekir. MDN ayrıca sayfanın tamamı düz metinse HTML hiç kullanmamayı, dosyayı text/plain MIME türüyle sunmayı önerir.

<!-- Eski: <xmp><p>Merhaba</p></xmp> -->
<pre><code>&lt;p&gt;Merhaba&lt;/p&gt;</code></pre>

Kaçırma kuralları ve karakter başvuruları için HTML entity yazısına bakabilirsiniz.

Gömme ve bileşen artıkları: noembed, param, image, content, shadow

<noembed>, <embed> öğesini desteklemeyen tarayıcılar için yedek içerik sunmanın standart dışı bir yoluydu. MDN onun yerine <object> kullanmayı ve yedek içeriği <object> öğesinin açılış ve kapanış etiketleri arasına yazmayı önerir. <param> öğesi <object> için parametre tanımlıyordu; MDN, dış kaynağın adresini <object> öğesinin data özniteliğiyle vermeyi gösterir. <image>, MDN'nin deyişiyle <img> öğesinin çok eski ve az desteklenen bir öncülüdür. <content> ve <shadow> ise Web Components teknolojilerinin eski Shadow DOM ekleme noktalarıydı; ikisinin de yerini <slot> aldı (template ve slot yazısı).

Kalan ama anlamı değişen öğeler: b, i, u, s

Her eski görünüm öğesi kaldırılmadı. MDN'ye göre <b> eskiden "kalın yazı" öğesiydi; görünüm bilgisi HTML 4'ten beri kullanımdan kaldırıldığı için anlamı değiştirildi ve artık özel bir önem taşımayan ama okuyucunun dikkatinin çekilmesi gereken metni işaretler. Yalnızca kalın görünüm istiyorsanız CSS font-weight kullanın. <u> de HTML 4'te diğer görünüm öğeleriyle birlikte kullanımdan kaldırılmış, sonra yeni bir anlamla geri getirilmiştir: metne metin dışı bir işaret uygulandığını göstermek, örneğin yazım hatalarını belirtmek. MDN, <u> öğesini varsayılan alt çizgisiyle bağlantıyla karışacak biçimde kullanmamanızı, yalnızca alt çizgi görünümü için CSS text-decoration kullanmanızı önerir. <s> ise MDN'ye göre artık geçerli veya doğru olmayan içeriği gösterir; belge düzeltmeleri için değil, onlar için <del> ve <ins> vardır. <strike> bunun eski "ikiz"idir.

<p>Bu cümlede <u class="yazim-hatasi">yanlız</u> sözcüğü hatalı yazılmıştır.</p>
<p><b class="giris">Kısaca:</b> eski görünüm öğeleri yerine CSS kullanın.</p>

<b> ile <strong> ve <i> ile <em> arasındaki anlam farkları için strong, b, i ve mark yazısına bakın.

Kullanımdan kalkan öznitelikler

Öğeler kadar öznitelikler de eskidi. MDN birçok öğe sayfasında ayrı bir "kullanımdan kalkmış öznitelikler" bölümü tutar. En sık rastlananlar şunlardır:

Bu tablonun en sık karşılaşılan iki satırı sayfa içi bağlantılar ve tablo kenarlıklarıdır. Eskiden bir sayfa bölümüne bağlantı vermek için hedefte <a name="..."> kullanılırdı; MDN, HTML 4.01'de id ve name değerlerinin birlikte kullanılabildiğini, bugün ise name özniteliğinin kullanımdan kalktığını belirtir. Hedef öğeye doğrudan id vermek yeterlidir:

<!-- Eski: <a name="fiyatlar"></a><h2>Fiyatlar</h2> -->
<p><a href="#fiyatlar">Fiyatlara git</a></p>
<h2 id="fiyatlar">Fiyatlar</h2>

<!-- Eski: <table border="1" cellpadding="4" summary="Paket fiyatlari"> -->
<table class="fiyat-tablosu">
  <caption>Paket fiyatları</caption>
  <tr>
    <th scope="col">Paket</th>
    <th scope="col">Aylık</th>
  </tr>
  <tr>
    <td>Başlangıç</td>
    <td>100 TL</td>
  </tr>
</table>

Tablodaki summary özniteliğinin yerini <caption> aldı; kenarlık ve hücre boşlukları CSS'e taşındı. Tablo başlıkları ve scope için colspan, rowspan, scope ve caption yazısına, sayfa içi bağlantılar için a etiketi yazısına bakın. <script> öğesindeki charset için MDN, değerin yalnızca utf-8 olabileceğini ve belge zaten UTF-8 kullanmak zorunda olduğu için gereksiz olduğunu belirtir (script etiketi yazısı).

Eski bir sayfayı adım adım modernleştirmek

• Önce yapıyı düzeltin: sayfanın başına <!DOCTYPE html> ekleyin, <html> öğesine lang verin, <meta charset="utf-8"> kullanın (belge yapısı yazısı).
• Görünüm öğelerini (<font>, <center>, <big>) ve görünüm özniteliklerini (bgcolor, align, border) kaldırıp yerlerine sınıf adları koyun; görünümü bir stil dosyasına taşıyın.
• Anlam taşıyan eski öğeleri karşılıklarıyla değiştirin: <tt> yerine <code> veya <kbd>, <strike> yerine <s> veya <del>, <acronym> yerine <abbr>, <dir> yerine <ul>.
• <a name> hedeflerini id ile değiştirin ve sayfa içi bağlantıların hâlâ çalıştığını kontrol edin.
• Çerçeveli düzeni tek sayfalık bir düzene çevirin; gerçekten gömülü belge gerekiyorsa title verilmiş bir <iframe> kullanın.
• <marquee> veya yanıp sönen içerik varsa kaldırın ya da durdurulabilir hale getirin.
• Son olarak sayfayı bir doğrulayıcıdan geçirin; kalan hatalar için sık yapılan HTML hataları yazısına bakın.

Sık yapılan hatalar

• <strike> yerine her durumda <del> kullanmak: <del> belgeden silinmiş içerik içindir; artık geçerli olmayan bilgi için <s> doğru seçimdir.
• <u> öğesini yalnızca alt çizgi için kullanmak: bu hem anlamca yanlıştır hem de bağlantıyla karıştırılabilir.
• <b> öğesini sadece kalın görünüm için kullanmak: anlam yoksa CSS font-weight yeterlidir.
• <center> kaldırıldıktan sonra içeriği <div> ile sarıp hiçbir şey eklememek: hizalama CSS ile verilmezse içerik sola yaslanır.
• Tablolarda summary kaldırılıp yerine hiçbir şey konmaması: tablonun amacı <caption> ile anlatılmalıdır.

Sık Sorulan Sorular

Eski etiketler tarayıcıda hâlâ çalışıyorsa neden değiştireyim?

Çünkü MDN bu öğelerin yeni projelerde kullanılmamasını ve eski projelerde en kısa sürede değiştirilmesini ister; bazılarının desteği ileride kaldırılabilir. Ayrıca bu öğeler anlam taşımaz, erişilebilirliği zayıflatır ve bakımı zorlaştırır.

<code>&lt;b&gt;</code> ve <code>&lt;i&gt;</code> de kullanımdan kalktı mı?

Hayır. Bu öğeler belirtimde duruyor; MDN'ye göre <b> öğesinin anlamı görünümden "dikkat çekilen metin"e çevrildi. İkisi de yalnızca görünüm için kullanılmamalıdır; anlam farkları metin etiketleri yazısında.

Metni ortalamak için ne kullanmalıyım?

MDN'nin <center> sayfasına göre metin için CSS text-align, bloklar için margin-left ve margin-right değerlerini auto yapmak. CSS ayrıntıları bu serinin dışında kalıyor.

<code>name</code> özniteliği tamamen mi kaldırıldı?

Hayır; <a> ve <img> öğelerindeki name kullanımdan kalktı. Form denetimlerindeki name ise form verisinin anahtarıdır ve geçerliliğini korur (form etiketi yazısı).

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: HTML öğrenme rehberi · metin etiketleri · code, pre ve kbd · erişilebilir tablolar · iframe etiketi · yeni HTML özellikleri