HTML5 Geçiş

HTML4 ve XHTML ile hazırlanan sayfaları HTML5 ile gelen yeni etiketler ve HTML5 semantik etiketleri kullanarak HTML5 sayfa yapısına nasıl geçiş yapılacağı ile ilgili bilgiler yer alıyor.

HTML4’den HTML5’e geçiş

Bu makalemde sayfa içerisindeki içerik ve sayfa yapısı bozulmadan HTML4 sayfasından HTML5 sayfasına nasıl geçiş yapacağımızı anlattım.

NOT: XHTML sayfalarını da bu makalemdeki adımları takip ederek HTML5 sayfa yapısına çevirebilirsiniz.

HTML4HTML5 karşılığı
<div id=”header”><header>
<div id=”menu”><nav>
<div id=”content”><section>
<div class=”article”><article>
<div id=”footer”><footer>
Örnek HTML4 sayfa yapısı<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="tr">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>HTML4 > HTML5</title>
<style>
body {
    font-family: Verdana,sans-serif;
    font-size: 0.9em;
}

div#header, div#footer {
    padding: 10px;
    color: white;
    background-color: #111111;
}

div#content {
    margin: 5px;
    padding: 10px;
    background-color: #CCCCCC;
}

div.article {
    margin: 5px;
    padding: 10px;
    background-color: #FFFFFF;
}

div#menu ul {
    padding: 0;
}

div#menu ul li {
    display: inline;
    margin: 5px;
}
</style>
</head>
<body>

<div id="header">
  <h1>Meyveler</h1>
</div>

<div id="menu">
  <ul>
    <li>Elma</li>
    <li>Armut</li>
    <li>Portakal</li>
  </ul>
</div>

<div id="content">
  <h2>Meyve Türleri</h2>
  <div class="article">
    <h2>Elma</h2>
    <p>Gülgillerden, humusça zengin ve nemli topraklarda, bol güneş alan yerlerde yetişen, 
     kenarları dişli oval yaprakları olan, açık pembe ya da ak çiçekler açan, dayanıklı bir meyve ağacı.</p>
  </div>
  <div class="article">
    <h2>Armut</h2>
    <p>Gülgillerden, Türkiye’nin her yerinde yetişen, kenarı düz ya da düzensiz dişli yaprakları bulunan, 
    ak çiçekler açan bir meyve ağacı.</p>
  </div>
</div>

<div id="footer">
  <p>&copy; 2016 Meyve Türleri. Her hakkı saklıdır.</p>
</div>

</body>
</html>

DOCTYPE değiştirin

HTML4 sayfasında

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML5 sayfasında

<!DOCTYPE html>

Karakter kodlamasını değiştirin

HTML4 sayfasında

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

HTML5 sayfasında

<meta charset="UTF-8">

Etiketleri değiştirin

HTML4 sayfasında

<body>

<div id="header">
  <h1>Meyveler</h1>
</div>

<div id="menu">
  <ul>
    <li>Elma</li>
    <li>Armut</li>
    <li>Portakal</li>
  </ul>
</div>

<div id="content">
  <h2>Meyve Türleri</h2>
  <div class="article">
    <h2>Elma</h2>
    <p>Gülgillerden, humusça zengin ve nemli topraklarda, bol güneş alan yerlerde yetişen, 
    kenarları dişli oval yaprakları olan, açık pembe ya da ak çiçekler açan, dayanıklı bir meyve ağacı.</p>
  </div>
  <div class="article">
    <h2>Armut</h2>
    <p>Gülgillerden, Türkiye’nin her yerinde yetişen, kenarı düz ya da düzensiz dişli yaprakları bulunan, 
    ak çiçekler açan bir meyve ağacı.</p>
  </div>
</div>

<div id="footer">
  <p>&copy; 2016 Meyve Türleri. Her hakkı saklıdır.</p>
</div>

</body>

HTML5 sayfasında

<body>

<header>
  <h1>Meyveler</h1>
</header>

<nav>
  <ul>
    <li>Elma</li>
    <li>Armut</li>
    <li>Portakal</li>
  </ul>
</nav>

<section>
  <h2>Meyve Türleri</h2>
  <article>
    <h2>Elma</h2>
    <p>Gülgillerden, humusça zengin ve nemli topraklarda, bol güneş alan yerlerde yetişen, 
    kenarları dişli oval yaprakları olan, açık pembe ya da ak çiçekler açan, dayanıklı bir meyve ağacı.</p>
  </article>
  <article>
    <h2>Armut</h2>
    <p>Gülgillerden, Türkiye’nin her yerinde yetişen, kenarı düz ya da düzensiz dişli yaprakları bulunan, 
    ak çiçekler açan bir meyve ağacı.</p>
  </article>
</section>

<footer>
  <p>&copy; 2016 Meyve Türleri. Her hakkı saklıdır.</p>
</footer>

</body>

Siteniz artık HTML5 yapısında!

CSS adlarını değiştirmediğimizden tarayıcıda güzel görünmeyecektir.

Stil adlarını değiştirin

HTML5 önceki CSS

body {
    font-family: Verdana,sans-serif;
    font-size: 0.9em;
}

div#header, div#footer {
    padding: 10px;
    color: white;
    background-color: #111111;
}

div#content {
    margin: 5px;
    padding: 10px;
    background-color: #CCCCCC;
}

div.article {
    margin: 5px;
    padding: 10px;
    background-color: #FFFFFF;
}

div#menu ul {
    padding: 0;
}

div#menu ul li {
    display: inline;
    margin: 5px;
}

HTML5 sonrası CSS

body {
    font-family: Verdana,sans-serif;
    font-size: 0.9em;
}

header, footer {
    padding: 10px;
    color: white;
    background-color: #111111;
}

section {
    margin: 5px;
    padding: 10px;
    background-color: #CCCCCC;
}

article {
    margin: 5px;
    padding: 10px;
    background-color: #FFFFFF;
}

nav ul {
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 5px;
}

Tebrikler HTML4 sayfanız artık HTML5 sayfa yapısında!

HTML5 Derslerine buradan ulaşabilirsiniz…

Hayırlı günler dilerim.

Yusuf SEZER

Yusuf SEZER

Computer Engineer who interested about web technologies, algorithms, artificial intelligence and embedded systems; constantly exploring new technologies.


Bunlara'da bakmalısın!