Bu yazımızda Html’in son versiyonu olan Html5 nedir? Yeni gelen Html5 etiketleri (tagları) nelerdir? ve Html5 sayfa yapısı konularını öğreneceğiz.
Genel olarak Html’in detaylarına girmeyeceğim. Burada Html5 odaklı bir yazı yazmayı düşünüyorum. Html ile ilgili daha detaylı bilgi almak isterseniz Html Nedir? Ne İşe Yarar? Html Sayfası Oluşturma yazımı okuyabilirsiniz.
Html5, web sitelerini oluştururken kullandığımız metin işaretleme dilinin son versiyonudur. Html5 ile birlikte birçok yeni etiket, etiketler ile kullandığımız yeni parametreler ve bu parametrelere verdiğimiz yeni değerler gelmiştir.
Html5’in genel özellikleri ile başlayalım.
HTML5 SAYFA YAPISI
Html5 sayfa yapısı, en temelde şu şekildedir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Html5</title> </head> <body> İÇERİK </body> </html> |
Buradaki etiketlerin ne işe yaradığından bahsedecek olursak;
<!DOCTYPE html> : Dökümanın türünü belirtir. Burada sayfanın bir Html5 dökümanı olduğunu belirtiyor. Sayfanın en üstünde yazılmalıdır. Tarayıcıların sayfayı doğru görüntülemesini sağlar.
Html5 den önce dökümanın türünü şu şekilde belirtiyorduk.
|
1 2 3 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
<html> : Tüm Html etiketlerini kapsar. Yani diğer etiketler bunun içerisine yazılır.
<head> : Sayfa ile ilgili bazı bilgilerin ( meta bilgileri, sayfa başlığı vb.. ) tanımlandığı etikettir.
<meta> : Sayfa açıklaması, sitenin yazarı, kullanılan karakter seti vb.. gibi bilgilerin tanımlandığı etikettir.
Html5 de kullanılan karakter seti şu şekilde tanımlanır.
|
1 2 3 |
<meta charset="utf-8"> |
Html5 den önce kullanılan karakter setini şu şekilde belirtiyorduk.
|
1 2 3 |
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"> |
Meta etiketleri ile ilgili daha detaylı anlatım için Meta Etiketleri (Tagları) Nedir? Meta Etiketi Kullanımı yazımı okuyabilirsiniz.
<title> : Sayfa başlığının verildiği etikettir.
<body> : Sayfa içeriklerinin yazıldığı etikettir. Tarayıcılar sadece buradaki içeriği bize gösterirler.
Önemli Html5 ile gelen anlamsal etiketler tüm modern tarayıcılar tarafından destekleniyor. Ancak, IE8 ve önceki sürümlerinde bu etiketlerin stillendirilmelerinde bazı problemler yaşayabiliyoruz.
Bu problemler için bir Javascript çözümü olan HTML5Shiv‘i kullanabiliriz. Yapmamız gereken tek şey aşağıdaki kodu Html5 sayfamızın <head> </head> etiketleri arasına yerleştirmek.
HTML5Shiv Kodu
|
1 2 3 4 5 |
<!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <![endif]--> |
Kaynak kodlarını görmek için linke tıklayın
HTML5Shiv’in güncel versiyonu için Github adresini ziyaret edebilirsiniz.
HTML5 DE KALDIRILAN ETİKETLER
Aşağıdaki tabloda bulunan Html4 etiketleri Html5 de kaldırıldı. Bu kaldırılan etiketlerin bir kısmının yerine aynı işlevi gerçekleştiren yeni etiketler geldi. Bir kısmı için de aynı işlevi Css kodları yazarak yerine getiriyoruz.
| Kaldırılan Etiket | Yerine Kullanılan Etiket veya Yöntem |
|---|---|
| <acronym> | <abbr> |
| <applet> | <object> |
| <basefont> | Bu etiket yerine aynı işlevi yerine getirecek Css özellikleri kullanılıyor |
| <big> | Bu etiket yerine aynı işlevi yerine getirecek Css özellikleri kullanılıyor |
| <center> | Bu etiket yerine aynı işlevi yerine getirecek Css özellikleri kullanılıyor |
| <dir> | <ul> |
| <font> | Bu etiket yerine aynı işlevi yerine getirecek Css özellikleri kullanılıyor |
| <frame> | — |
| <frameset> | — |
| <noframes> | — |
| <strike> | <s> veya <del> etiketleri veya aynı işlevi yerine getirecek Css özellikleri kullanılıyor |
| <tt> | Bu etiket yerine aynı işlevi yerine getirecek Css özellikleri kullanılıyor |
ANLAMSAL HTML5 ETİKETLERİ (TAGLARI)
Html5 ile anlamsal etiketler dediğimiz yeni etiketler geldi. Öncelikle biraz anlamsal kavramından bahsedelim.
Html4 ile sayfa tasarımlarımızı yaparken resimde sol tarafta gördüğünüz gibi yapardık.
Örneğin menü oluştururken id’si menu olan bir div içerisine kodlarımızı yazardık. Yada header, footer kısımları için div ler oluşturup içerisine kodlarımızı yazardık. Bu kullandığımız div ve span ların arama motorları için hiçbir anlamı yoktu.
Html5 ile birlikte artık resmin sağındaki anlamsal etiketler ile kodlarımızı yazıyoruz. Yani div ve span kullanmak yerine anlamsal etiketleri tercih ediyoruz. Bu şekilde yazılan kodlar arama motorları için de bir anlam ifade edeceği için SEO açısından bize artısı olacaktır.
Arama motorları, <div id=”menu”> koduna bakarak bunun içerisinde menü kodlarının yazılı olduğunu anlayamaz. Ama <nav> etiketini gördüğü zaman içerisinde menü kodları olduğunu anlayacaktır.
Html5 ile gelen anlamsal etiketler şunlardır:
- <article>
- <aside>
- <details>
- <figcaption>
- <figure>
- <footer>
- <header>
- <main>
- <mark>
- <nav>
- <section>
- <summary>
- <time>
Div ve span kullanımının daha detaylı anlatımı için Html Div Nedir? Span Nedir? Div ve Span Kullanımı yazımı okuyabilirsiniz.
HTML5 İLE GELEN İNPUT TYPE DEĞERLERİ
Daha önceleri input etiketinin type parametresine genelde text değeri verirdik.
|
1 2 3 |
<input type="text"> |
Html5 ile birlikte şu değerleri de kullanabiliyoruz.
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
Bu değerlerin detaylı anlatımları için Tüm Detaylarıyla Html Form Oluşturma yazımı okuyabilirsiniz.
HTML5 İLE GELEN İNPUT PARAMETRELERİ
- autocomplete
- autofocus
- form
- formaction
- formenctype
- formmethod
- formnovalidate
- formtarget
- height and width
- list
- min and max
- multiple
- pattern (regexp)
- placeholder
- required
- step
SES VE VİDEO OYNATMAK İÇİN HTML5 ETİKETLERİ (TAGLARI)
- <audio>
- <embed>
- <source>
- <track>
- <video>
GRAFİKLER İÇİN HTML5 ETİKETLERİ (TAGLARI)
- <canvas>
- <svg>
FORM OLUŞTURMAK İÇİN KULLANDIĞIMIZ HTML5 ETİKETLERİ (TAGLARI)
- <datalist>
- <output>
DİĞER HTML5 ETİKETLERİ (TAGLARI)
- <bdi>
- <dialog>
- <meter>
- <progress>
- <rp>
- <rt>
- <ruby>
- <wbr>
Genel hatlarıyla Html5 nedir? Yeni gelen Html5 etiketleri (tagları) nelerdir? bu şekilde özetleyebiliriz.
Tüm Html etiketleri için TÜM HTML KODLARI VE ANLAMLARI yazımı okuyabilirsiniz.
Şu yazılar da ilginizi çekebilir.
Css Nedir? Ne İşe Yarar? Css Kullanımı
BOOTSTRAP NEDİR? BOOTSTRAP NASIL KULLANILIR?
Jquery Nedir? Ne İşe Yarar? Jquery Kullanımı
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
 ve Sayfa Yapısı){kind=link}