Migrasi dari HTML4 ke HTML5 ~ KODELOVER

Bab ini menunjukkan cara mengonversi halaman HTML4 ke halaman HTML5, tanpa merusak

konten atau struktur orisinal.

Catatan Anda dapat bermigrasi ke HTML5 dari HTML4 atau XHTML, menggunakan cara yang sama ..

Typical HTML4	Typical HTML5
<div id="header">	<header>
<div id="menu">	<nav>
<div id="content">	<section>
<div id="post">	<article>
<div id="footer">	<footer>

Halaman HTML4 Khas

Contoh

See the Pen rrBXLR by Eka Haryanto (@eka-haryanto) on CodePen.

Ubah ke HTML5 Doctype

Ubah doctype, dari doctype HTML4:

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

ke HTML5 doctype:
Contoh

<! DOCTYPE html>

Ubah ke HTML5 Encoding

Ubah informasi pengkodean, dari HTML4:

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

ke HTML5:

Contoh

<meta charset = "utf-8">

Tambahkan Shiv

Elemen semantik HTML5 didukung di semua browser modern.

Selain itu, Anda dapat "mengajari" browser lama cara menangani "elemen tidak dikenal".

Tambahkan shiv untuk dukungan Internet Explorer:
Contoh

<! - [jika lt IE 9]>
<script src = "http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script>
<! [endif] ->

Catatan Baca tentang shiv di Dukungan Browser HTML5.
Tambahkan CSS untuk Elemen Semantik HTML5

Lihatlah gaya CSS Anda yang ada:

div#header,div#footer,div#content,div#post {
    border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
div#header,div#footer {
    color:white;background-color:#444;margin-bottom:5px;
}
div#content {
    background-color:#ddd;
}
div#menu ul {
    margin:0;padding:0;
}
div#menu ul li {
    display:inline; margin:5px;
}

Gandakan dengan gaya CSS yang sama untuk elemen semantik HTML5:
Contoh

header,footer,section,article {
    border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
header,footer {
    color:white;background-color:#444;margin-bottom:5px;
}
section {
    background-color:#ddd;
}
nav ul {
    margin:0;padding:0;
}
nav ul li {
    display:inline; margin:5px;
}

Ubah ke HTML5 <header> dan <footer>

Ubah elemen <div> dengan id = "header" dan id = "footer":

<div id="header">
<h1>Kodelover</h1>
</div>
.
.
.
<div id="footer">
<p>&copy; 2014 Kodelover.</p>
</div>

ke elemen semantik HTML5 <header> dan <footer>:
Contoh

<header>
<h1> Kodelover </h1>
</header>
.
.
.
<footer>
<p> & copy; 2018 Kodelover.</P>
</footer>

Ubah ke HTML5 <nav>

Ubah elemen <div> dengan id = "menu":

<div id = "menu">
<ul>
    <li> Berita </li>
    <li> Olahraga </li>
    <li> Cuaca </li>
</ul>
</div>

ke elemen semantik HTML5 <nav>:
Contoh

<nav>
<ul>
    <li> Berita </li>
    <li> Olahraga </li>
    <li> Cuaca </li>
</ul>
</nav>

Ubah ke HTML5 <section>

Ubah elemen <div> dengan id = "konten":

<div id = "konten">
.
.
.
</div>

ke elemen semantik HTML5 <section>:
Contoh

<section>
.
.
.
</section>

Ubah ke HTML5 <article>

Ubah semua elemen <div> dengan class = "post":

<div class = "post">
<h2> Artikel Berita </h2>
<p> Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum. </p>
</div>

elemen semantik HTML5 <article>:
Contoh

<article>
<h2> Artikel Berita </h2>
<p> Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum. </p>
</article>

KODELOVER

Migrasi dari HTML4 ke HTML5

Related Post