HTML5 ile Ne Değişti?
HTML5‘in ayak sesleri duyulduğunda çok sert bir geçiş sürecinin bizi beklediğiniz düşünmüştük. Fakat korkulan olmadı. Eski elemanlara sağlanan destek yavaşça kesildi ve HTML5’in yenilikleri yerlerini teker teker aldı.
Bu makalemizde HTML5’in beraberinde getirdiği elemanları ve tarihin tozlu sayfalarına gömülecek olan eski kod birimlerini konuşacağız.
HTML5
HTML5 web geliştiricilerinin kodlamalarında kullanabileceği en güncel iskelet sistemdir. Web 1.0‘ın asosyal tasarımları Web 2.0 ile kullanıcılarına kucak açmıştı. Adını sık sık andığımız Web 3.0 ile de etkileşim tavan yapmakta.
Makaleye devam etmeden önce block ve inline terimlerini tanımamız gerekiyor.
- Block elemanlar : Bu elemanlar display:block özelliğine sahiptir ve ayrı bir satır olarak gözükürler. Örneğin h1 veya div gibi…
- Inline elemanlar : Bu elemanlar display:inline özelliğine sahiptir ve eklendikleri satırda yapıyı bozmadan gözükürler. Örneğin b veya a gibi…
Desteklenen veya desteği süren block elemanlar
Bu listedeki öğelerin bir kısmı daha öncede kullanılırken bir kısmı da HTML5 ile yeni aramıza katıldı. Display:block özelliğine sahip bu elemanlar hala tam desteğe sahipler.
article, aside, blockquote, body, br, button, canvas, caption, col, colgroup, dd, div, dl, dt, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, li, map, object, ol, output, p, pre, progress, section, table, tbody, textarea, tfoot, th, thead, tr, ul, video
Desteklenen veya desteği süren inline elemanlar
Bu listedeki öğelerin bir kısmı daha öncede kullanılırken bir kısmı da HTML5 ile yeni aramıza katıldı. Display:inline özelliğine sahip bu elemanlar hala tam desteğe sahipler.
a, abbr, address, area, audio, b, cite, code, del, details, dfn, command, datalist, em, font, i, iframe, img, input, ins, kbd, label, legend, link, mark, meter, nav, optgroup, option, q, small, select, source, span, strong, sub, summary, sup, tbody, td, time, var
Desteklenen tüm elemanlar
Üstteki iki listenin tamamı, HTML5’in resmi olarak desteklediği birimler :
a, abbr, address, area, article, aside, audio, b, blockquote, body, br, button, canvas, caption, cite, code, col, colgroup, command, datalist, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, html, i, iframe, img, input, ins, kbd, label, legend, li, link, map, mark, meter, nav, object, ol, optgroup, option, output, p, pre, progress, q, section, select, small, source, span, strong, sub, summary, sup, table, tbody, tbody, td, textarea, tfoot, th, thead, time, tr, ul, var, video
Desteği kesilen elemanlar
Bu elemanlar artık HTML5 ile desteklenmiyor. Yani ömürlerinin son demlerini yaşıyorlar. Hala aktif olarak kullanılabilir olmaları sizi yanıltmasın, yerlerini daha güncel versiyonları aldı bile.
acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, s, strike, tt, u
Çıkarılan elemanlar | HTML5 ile yerlerine gelenler |
---|---|
<acronym>FBI</acronym> | <abbr>FBI</abbr> |
<applet>x</applet> | <object> |
<basefont color=”red” /> | <body style=”color:red”> |
<big>x</big> | <span style=”font-size:2em”>x</span> |
<center>x</center> | <div style=”text-align:center”>x</div> |
<dir><li>x</li></dir> | <dl><dt>x</dt></dl> |
<font color=”red”>x</font> | <span style=”color:red”>x</span> |
<frameset cols=”100%”> <frame src=”x.htm”><noframes>x</noframes> </frameset> | <div> <iframe src=”x.htm”></iframe> </div> |
<isindex> | <script>s=prompt(‘Msg’);</script> |
<s>x</s> <strike>x</strike> | <span style=”text-decoration:line-through”> x</span> |
<tt>x</tt> | <span style=”font-family:Courier”>x</span> |
<u>u</u> | <span style=”text-decoration:underline”> x</span> |
Listeler bu şekilde. HTML5 süreci gayet esnek ilerliyor. Dolayısıyla eski tip kod birimleri hala çalışmakta. Fakat sizlere tavsiyemiz, şimdiden HTML5 elemanlarını tanımanız ve tasarımlarınızda onlara yer vermeniz.