Cara Merubah HTML4 menjadi HTML5

Wednesday, March 5, 2014

Dalam tutorial kali ini, Saya akan menjelaskan secara keseluruhan tentang kode apa saja yang perlu dirubah / diganti pada HTML4 sehingga valid HTML5.

Pertama-tama siapkan Tools validatornya :

W3 HTML Validator

HTML Validator ini berguna untuk mencek apa saja yang harus dirubah.

Doctype

Rubahlah dari :

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

menjadi:

<!DOCTYPE HTML>

Maka setelah ini, Anda bisa menggunakan W3 HTML5 Validator.

Berikut ini adalah perubahan pada attribute dan tag HTML.

Head

Rubahlah : <meta http-equiv=”Content-Language” content=”en”>
Menjadi :

 <html lang=”en”>

Text

Rubah lah kode sejenis ini: <font size=”5″>

<p style=”font-size:65%; margin:0;”>

Rubah kode seperti ini :<center> Kode HTML </center>

<p style=”text-align:center; margin:0;”> Kode HTML </p>

tag p bisa dirubah menjadi div Misal seperti :

<div style="text-align:center;"> Kode HTML </div>

Images

Jika ingin men-center-kan image, dari kode seperti ini : <center><img src=#/></center>

<img style=”display:block; margin-left:auto; margin-right:auto;”/>

Jika ada kode seperti ini :<img boder='0' src=# />

<img style=”border:none;”/>

atau

<img style=”border:0;”/>

Jika ada kode seperti ini : <img align=”left” src=# />

<img style=”float:left;” src=# />

Anchors

Jika ada kode seperti ini: <a name=”title”></a>
Rubahlah Menjadi:

<div id=”title”></div>

Tables

Jika ingin men-center-kan table, seperti ini : <center><table></table></center>

<table style=”margin:0 auto;”>

Jika ada code seperti ini : <table align="right"></table>

<table style=”float:right;”>

Jika ada code seperti ini : <tr align=”center”>

<tr style=”text-align:center;”>

Jika ada code seperti ini : <td width=”5%”>

<td style=”width:5%;”>

Jika ada code seperti ini : <td valign=”top”>

<td style=”vertical-align:top;”> atau <td style=”vertical-align:text-top;”>

Jika ada code seperti ini : cellpadding=”0″

style=”padding:0;”

Atau jika ada code seperti ini : cellspacing=”5″

style=”border-collapse:separate; border-spacing:5px;”

Lists

<ul style=”line-height:2em; margin-top:-0.7em;”>

iFrames

Rubah scrolling=”no” menjadi
```
 style=”overflow:hidden;”
```
Rubah frameborder=”0″ menjadi
```
style=”border:none;”
```

Rubah allowTransparency=”true” menjadi


style="background:none;" 

atau 

style="background:0;" 

atau 

style="background:transparent;"

DLL

Hapus language=”JavaScript” dari <script>

Begitulah tentang Cara Merubah HTML4 menjadi HTML5. Semoga bermanfaat untuk Anda. Jika ada hal yang ingin ditanyakan, silahkan berkomentar. Dan jika Anda menyukai artikel ini, silahkan klik tombol share di bawah. Terima kasih..! ;)

Archmaxter : Cara Merubah HTML4 menjadi HTML5