Biasanya kita menggunakan ID dan Class untuk membagi sebuah halaman web menjadi header, navigasi, konten, sidebar, footer. Kini desainer web dimudahkan dengan semantic elements dari HTML5. Apa saja semantic elements yang baru dari HTML5?
- <header>
- <nav>
- <section>
- <article>
- <aside>
- <footer>
- <figure>
- <figcaption>
Penggunaannya sama dengan ketika menggunakan tag <p>, <a>, <h1>, yang harus memiliki tag penutup. Penggunaan yang sama juga berlaku ketika kita mengatur style di CSS. Berikut sebagai contoh.
<!DOCTYPE HTML>
<html>
<head>
<title>HTML5 Semantic Elements</title>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<header>
Ini bagian header
</header>
<nav>
Ini bagian navigasi
</nav>
<section>
Ini bagian section
</section>
<aside>
Ini bagian aside
</aside>
<footer>
Ini bagian footer
</footer>
</body>
</html>
Untuk di CSS nya berikut saya contohkan.
header {width : 980px; margin : 0 auto;}
nav {width : 960px; padding : 10px; text-align : center;}
section {width : 600px; float : left; margin : 10px 10px 10px 0;}
aside {width : 360px; float : right; margin : 10px 0 10px 10px;}
footer {width : 980px; clear : both; }
Dari penjelasan di atas beserta contohnya semoga mudah di pahami. Untuk HTML5 tidak support dengan browser dengan seri lama, sehingga jangan heran ketika Anda menggunakan semantic elements HTML5 di atas untuk desain website Anda dan membukanya di IE7 atau IE8. Maka layout Anda tak berjalan. Sekian posting saya mengenai Semantic Elements di HTML5, semoga bermanfaat :)
0 comments:
Post a Comment