HTML5

1. Bölüm : HTML5 döküman yapısı, header, article, footer, nav, aside tagları

Merhaba HTML5!

Eski DocType : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Yeni DocType : <!doctype html>

Meta Tagı

Eski Meta Tag'i : <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Yeni Meta Tag'i : <meta charset=UTF-8>

Eski Tip Döküman Yapısı
Div kullanılarak oluşturulmuş eski tip döküman yapısı
Div kullanılarak oluşturulmuş eski tip döküman yapısı
HTML5 Döküman Yapısı
HTML5 ile oluşturulmuş yeni tip döküman yapısı
HTML5 ile oluşturulmuş yeni tip döküman yapısı

HTML5 ile oluşturulmuş blog örneği
Dialog Tagı
Selahattin
Orçun seni seviyorum oğlum
Orçun
Ok...
Selahattin
Ney ? Ok mi ? Oğlum seni seviyorum diyorum oğlum, okmiş, camış...
<dialog>
<dt id="yorum1">Selahattin</dt>
<dd>Orçun seni seviyorum oğlum</dd>
<dt id="yorum2">Orçun</dt>
<dd>Ok...</dd>
</dialog>
<time> Tagı
<time datetime="2012-01-10T22:21:13.000+02:00" pubdate>Şimdi</time>
 
<details> Tagı
<details open=true>
   <summary>Başlık Alanı</summary>
   <p>
      Detaylı açıklama alanı buraya yazılır.
   </p>
</details>
Başlık Alanı


Detaylı açıklama alanı buraya yazılır.


<figure> Tagı
<figure>
   <img src="images/logo.png" />
   <figcaption>HTML5 logo</figcaption>
</figure>
HTML5 logo
<mark> Tagı
<mark>mark tagı</mark> <em>em tagı</em> değildir.

mark tagı em tagı değildir.
<progress> ve <meter> Tagları
<script type="text/javascript">
   function incrementMeter() {
      var currentValue = parseInt(document.getElementById('mt1').value);
      var maxValue = parseInt(document.getElementById('mt1').max);
      if (currentValue < maxValue) {
         document.getElementById('mt1').value = currentValue + (10 * Math.random());
         setTimeout(incrementMeter, 200);
      }
      }
</script>

<meter id="mt1" value="0" min="0" max="200" style="width:200px;">200 de 0</meter>

<button onclick="incrementMeter();">Başlat</button>

200 de 0
Çıkarılan Taglar
<applet>, <big>, <blink>, <center>, <font>, <marquee>, <frame> (<iframe> ?!?)
Microdata ile HTML'yi genişletmek
<section itemscope itemtype="http://data-vocabulary.org/Person">
   <img src="images/logo.png" style="float:left;" itemprop="photo" />
   Kişisel blog'u <a href="http://merhanersoy.net" itemprop="url">merhanersoy.net /a> olan <span itemprop="name">Mustafa Erhan Ersoy</span>
   <span itemprop="affiliation">özel bir firma</span>da <span itemprop="title">Yazılım Mühendisi</span> olarak çalışmaktadır.
</section>
Microdata Test Sayfası
Google Rich Snippets
Google's data-vocabulary sağlayıcısı
Rich Snippet Test Aracı
Linkler

1. Webdeki popular class değerleri (2005)
2. Webdeki popular id değerleri (2009)
3. HTML5 Validator
4. HTML5 Outliner