HTML5 Geçiş
Paylaş
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.
| HTML4 | HTML5 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>© 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>© 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>© 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.