Tutorial Belajar HTML5 Part 3: Perbedaan Struktur HTML dengan Tag div dan HTML5
Dalam tutorial belajar HTML5 kali ini kita akan mencoba menerapkan semantic tag yang kita pelajari dalam tutorial sebelumnya untuk membuat struktur HTML menggunakan tag HTML5 seperti <header>, <nav>, <section>, <article>, <aside> dan <footer>.
Membuat Struktur Halaman HTML dengan Tag <div>
Sebelum era HTML5 yang memiliki tag untuk membuat struktur halaman yang lengkap, web developer umumnya menggunakan tag <div> dengan atribut id atau class untuk memisahkan bagian-bagian struktur dalam halaman HTML, seperti header, footer, dan sidebar.
Sebagai contoh, berikut adalah gambar sederhana struktur sebuah website dengan 2 kolom:
Untuk membuat struktur diatas, berikut adalah kode HTMLnya:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Belajar HTML5</title>
</head>
<body>
<div id="header">
<h1>Judul Website</h1>
<img src="logo_website.jpg" />
</div>
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="content">
<div id="article_1">
<div id="article_header_1">
<h1>Judul Artikel 1</h1>
<h2>Sub Judul Artikel 1</h2>
</div>
<p>...Ini adalah isi dari artikel 1...</p>
</div>
<div id="article_2">
<div id="article_header_2">
<h1>Judul Artikel 2</h1>
<h2>Sub Judul Artikel 2</h2>
</div>
<p>...Ini adalah isi dari artikel 2...</p>
</div>
</div>
<div id="sidebar">
<h1>Artikel Terbaru</h1>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>
<div id="footer">
<p>Footer - Copyright Nusantara Coding 2014</p>
</div>
</body>
</html>
Kode diatas sepenuhnya valid dan sangat sering digunakan hingga saat ini. Akan tetapi, HTML 5 mencoba mengganti semua tag <div> menjadi semantic tag yang lebih bermakna.
Membuat Struktur Halaman HTML dengan tag HTML5
Dengan menggunakan tag-tag HTML5 diatas, kita akan merevisi struktur web sebelumnya dengan menggunakan HTML5. Struktur yang akan kita buat sama dengan contoh pertama:
Dan berikut adalah kode HTML5 yang digunakan untuk membuat struktur tersebut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Belajar HTML5</title>
</head>
<body>
<header>
<h1>Judul Website</h1>
<img src="logo_website.jpg" />
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<section>
<article>
<header>
<h1>Judul Artikel 1</h1>
<h2>Sub Judul Artikel 1</h2>
</header>
<p>...Ini adalah isi dari artikel 1...</p>
</article>
<article>
<header>
<h1>Judul Artikel 2</h1>
<h2>Sub Judul Artikel 2</h2>
</header>
<p>...Ini adalah isi dari artikel 2...</p>
</article>
</section>
<aside>
<h1>Artikel Terbaru</h1>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</aside>
<footer>
<p>Footer - Copyright Nusantara Coding 2014</p>
</footer>
</body>
</html>
Perhatikan bahwa pada kode diatas saya menggunakan 6 semantic tag dari HTML5, yakni <header>, <nav>, <section>, <artikel>, <aside> dan <footer>. Susunan kode HTML tersebut mungkin lebih mudah dipahami jika anda pernah mendesain layout halaman HTML dengan CSS.
Penggunaan semantic tag dari HTML5 juga akan bermanfaat bagi SEO (Search Engine Optimization). Struktur halaman akan lebih jelas, sehingga mesin pencari bisa memprioritaskan bagian mana yang perlu diberikan penekanan (seperti <header> atau <article>) dan bagian mana yang hanya berupa keterangan (seperti <aside> atau <footer>).
Pada Tutorial selanjutnya, kita akan lebih memperdalam fungsi masing-masing kode dalam struktur HTML5 ini.
Belajar HTML Secara Lengkap Disini:
1. Tutorial HTML Bagian 1
2. Tutorial HTML Bagian 2