Anda bisa mengajari browser lama untuk menangani HTML5 dengan benar.
Browser yg Support HTML5
HTML5 didukung di semua browser modern.
Selain itu, semua browser, lama dan baru, secara otomatis menangani elemen yang tidak dikenal sebagai elemen inline.
Karena itu, Anda bisa "mengajarkan" browser lama untuk menangani elemen HTML yang tidak dikenal.
Catatan Anda bahkan dapat mengajari IE6 (Windows XP 2001) cara menangani elemen HTML yang tidak dikenal.
Tentukan Unsur HTML5 sebagai Unsur Blok
HTML5 mendefinisikan delapan elemen HTML semantik baru. Semua ini adalah elemen tingkat blok.
Untuk mengamankan perilaku yang benar di browser lama, Anda dapat menyetel properti tampilan CSS untuk dicekal:
judul, bagian, footer, samping, nav, main, artikel, gambar {
tampilan: blok;
}
Menambahkan Elemen Baru ke HTML
Anda juga dapat menambahkan elemen baru ke HTML dengan trik browser.
Contoh ini menambahkan elemen baru yang disebut <myHero> ke HTML, dan mendefinisikan gaya tampilan untuknya:
Contoh
<! DOCTYPE html>
<html>
<head>
<title> Membuat Elemen HTML </title>
<script> document.createElement ("myHero") </script>
<style>
Pahlawanku {
tampilan: blok;
background-color: #ddd;
padding: 50px;
ukuran font: 30px;
}
</style>
</head>
<body>
<h1> Pos Pertama Saya </h1>
<p> paragraf pertama saya. </p>
<myHero> Pahlawan Pertamaku </myHero>
</body>
</html>
Dokumen pernyataan JavaScript.createElement ("myHero") ditambahkan, hanya untuk memenuhi IE.
Masalah Dengan Internet Explorer
Anda bisa menggunakan solusi yang dijelaskan di atas, untuk semua elemen HTML5 yang baru, namun:
Catatan Internet Explorer 8 dan sebelumnya, tidak memungkinkan gaya elemen yang tidak diketahui.
Syukurlah, Sjoerd Visscher menciptakan "HTML5 Enabling JavaScript", "shiv":
<! - [jika ada IE 9]>
<script src = "http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script>
<! [endif] ->
Kode di atas adalah sebuah komentar, namun versi sebelumnya ke IE9 akan membacanya (dan memahaminya).
Solusi Shiv Lengkap
Contoh
<! DOCTYPE html>
<html>
<head>
<title> Styling HTML5 </title>
<! - [jika ada IE 9]>
<script src = "http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script>
<! [endif] ->
</head>
<body>
<h1> Artikel Pertama Saya </h1>
<article>
London adalah ibu kota Inggris. Kota ini merupakan kota terpadat di Inggris, dengan wilayah metropolitan yang berpenduduk lebih dari 13 juta jiwa.
</article>
</body>
</html>
Tautan ke kode shiv harus ditempatkan di elemen <head>, karena Internet Explorer perlu mengetahui semua elemen baru sebelum membacanya.
Kerangka HTML5
Contoh
<! DOCTYPE html>
<html lang = "en">
<head>
<title> Skeleton HTML5 </title>
<meta charset = "utf-8">
<! - [jika ada IE 9]>
<script src = "http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<! [endif] ->
<style>
body{font-family: Verdana, sans-serif; ukuran huruf: 0.8em;}
header, nav, bagian, artikel, footer
{border: 1px abu-abu solid; margin: 5px; padding: 8px;}
nav ul {margin: 0; padding: 0;}
nav ul li {display: inline; margin: 5px;}
</style>
</head>
<body>
<header>
<h1> HTML5 SKeleton </h1>
</header>
<nav>
<ul>
<li> <a href="html5_semantic_elements.asp"> HTML5 Semantic </a> </li>
<li> <a href="html5_geolocation.asp"> Geolokasi HTML5 </a> </li>
<li> <a href="html5_canvas.asp"> Graphics HTML5 </a> </li>
</ul>
</nav>
<section>
<h1> Kota Terkenal </h1>
<article>
<h2> London </h2>
<p> London adalah ibu kota Inggris. Kota ini merupakan kota terpadat di Inggris,
dengan luas metropolitan lebih dari 13 juta jiwa. </p>
</article>
<article>
<h2> Paris </h2>
<p> Paris adalah ibukota dan kota terpadat di Perancis. </p>
</article>
<article>
<h2> Tokyo </h2>
<p> Tokyo adalah ibu kota Jepang, pusat Greater Tokyo Area,
dan wilayah metropolitan terpadat di dunia. </p>
</article>
</section>
<footer>
<p> & salin; Kodelover 2018 All rights reserved. </p>
</footer>
</body>
</html>
Out Of Topic Show Konversi KodeHide Konversi Kode