1. Adım: Önce sitenin başlık, içerik, menü ve benzeri katmanları çerçeve olarak oluşturuyoruz.

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="iso-8859-9" />
<title>HTML5 Site Şablonu</title>
</head>
<body>
<div>
  <header>
    <p>Logo ve Slogan Metni</p>
  </header>
  <aside>
    <nav>
      <p>Ana Sayfa</p>
      <p>Resimler</p>
      <p>Videolar</p>
    </nav>
  </aside>
  <article>
    <section>Burada resimler, yazılar, bilgiler verilecek...</section>
    <p>i&ccedil;erik i&ccedil;erik i&ccedil;erik i&ccedil;erik i&ccedil;erik i&ccedil;erik i&ccedil;erik i&ccedil;erik &ccedil;erik i&ccedil;erik i&ccedil;erik i&ccedil;erik i&ccedil;erik i&ccedil;erik i&ccedil;erik i&ccedil;erik i&ccedil;erik i&ccedil;erik i&ccedil;erik i&ccedil;erik i&ccedil;erik </p>
  </article>
  <aside>
    <p>Arama</p>
    <p>Reklamlar</p>
    <p>Son Haberler</p>
    <p>İstatistikler</p>
  </aside>
  <footer>
    <p>Webmaster ve diğer iletişim bilgileri buradadır.</p>
  </footer>
</div>
</body>
</html>

Bu hali ile tarayıcıda düz bir halde içerik gelir. Artık CSS ile adım adım düzenlemeler yapalım.

2. Adım:  Tüm sayfayı kapsayan ve başlık olan en üstteki katmanın CSS’lerini düzenleyelim.

<style type="text/css">
body {
       font-family:Verdana, Geneva, sans-serif;
       margin:0px;
}
#kapsayici{
       background-color:#999;
       margin: 10px;
       margin-left:auto;
       margin-right:auto;
       padding:10px;
       width:800px;
}
header{
       padding:10px;
       background-color:#06C;
       text-align:center;
}
</style>

Banner kapsayıcının içini tamamen kaplıyor, rengi mavi ve metin ortalı olarak ayarlanmıştır.

3. Adım: Menü, içerik ve sağ kısım kolonlara ayrılacaktır.

#menu {
       margin-top:10px;
       padding:10px;
       background-color:#0C3;
       width:150px;
       float:left;
}

Menü sol tarafa yapıştırıldı. Genişliği 150 piksel ve yeşil bir renk verilir.

4. Adım: Sayfa içeriğinin olacağı katman ortada olacak şekilde düzenlenir.

article {
       margin-top:10px;
       margin-left:10px;
       padding:10px;
       background-color:#C93;
       width:400px;
       float:left;
}

5. Adım: Sağ tarafa reklam, arama ve benzeri işler için alan kazandıralım.

#sagAlan {
       margin-top:10px;
       padding:10px;
       background-color:#F96;
       width:170px;
       float:right;
}

Reklam alanı sağa dayalı, 170 piksel genişliktedir.

 6. Adım: Son olarak sitenin hakkında kısmı için önce bir temizleyici ve en alta bir katman ekleyelim ve tüm kodu birlikte görelim.

HTML5 şimdilik Safari ve Chrome ile düzgün görüntüleniyor. Internet Explorer 9 ve Firefox 4 ile HTML5 daha rahat çalışabilecektir. Önümüzdeki 5 yıl içinde birçok site artık HTML5 ile yapılacaktır. Şimdilik “Adobe Dreamweaver CS5” yeni dosya yaparken HTML5 türü seçmemize izin verse de, kod kısmında yardımcı olamıyor ve önizleme (Design ve Live View) tam çalışmıyor.     

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="iso-8859-9" />
<title>HTML5 Site Şablonu</title>
<style type="text/css">
body {
 font-family:Verdana, Geneva, sans-serif;
 margin:0px;
}
#kapsayici {
 background-color:#999;
 margin: 10px;
 margin-left:auto;
 margin-right:auto;
 padding:10px;
 width:800px;
}
header {
 padding:10px;
 background-color:#06C;
 text-align:center;
}
#menu {
 margin-top:10px;
 padding:10px;
 background-color:#0C3;
 width:150px;
 float:left;
}
article {
 margin-top:10px;
 margin-left:10px;
 padding:10px;
 background-color:#C93;
 width:400px;
 float:left;
}
#sagAlan {
 margin-top:10px;
 padding:10px;
 background-color:#F96;
 width:170px;
 float:right;
}
.temizleyici {
 clear:both;
}
footer {
 margin-top:10px;
 padding:1px;
 background-color:#F9C;
 text-align:center;
}
</style>
</head>
<body>
<div id="kapsayici">
  <header>
    <p>Logo ve Slogan Metni</p>
  </header>
  <aside id="menu">
    <nav>
      <p>Ana Sayfa</p>
      <p>Resimler</p>
      <p>Videolar</p>
    </nav>
  </aside>
  <article>
    <section>Burada resimler, yazılar, bilgiler verilecek...</section>
    <p>i&ccedil;erik i&ccedil;erik i&ccedil;erik i&ccedil;erik i&ccedil;erik i&ccedil;erik i&ccedil;erik i&ccedil;erik &ccedil;erik i&ccedil;erik i&ccedil;erik i&ccedil;erik i&ccedil;erik i&ccedil;erik i&ccedil;erik i&ccedil;erik i&ccedil;erik i&ccedil;erik i&ccedil;erik i&ccedil;erik i&ccedil;erik </p>
  </article>
  <aside id="sagAlan">
    <p>Arama</p>
    <p>Reklamlar</p>
    <p>Son Haberler</p>
    <p>İstatistikler</p>
  </aside>
  <div>class="temizleyici"</div>
  <footer>
    <p>Webmaster ve diğer iletişim bilgileri buradadır.</p>
  </footer>
</div>
</body>
</html>
Reklamlar