Tutorial Belajar HTML5 Part 4: Cara Membuat Struktur HTML5

Halo kawan-kawan,
Pada tutorial sebelumnya, kita telah membahas tentang "Perbedaan Struktur HTML dengan Tag div dan HTML5". Pada kesemptan kali ini kita akan belajar lebih dalam tentang HTML khususnya HTML5 terkait dengan Cara Membuat Struktur HTML5.

DOCTYPE (DTD)

DOCTYPE atau document type declaration (DTD) adalah sebuah keterangan yang ditulis untuk memberitahu web browser tentang aturan penulisan dari dokumen yang sedang ditampilkan. doctype ditulis pada baris pertama halaman HTML.

Cara Penulisan DOCTYPE pada HTML5 adalah:

<!DOCTYPE html>

Meta tag

Meta tag adalah ‘data tentang data‘, dimana tag ini ditujukan bukan kepada user, tetapi kepada web browser atau kepada ‘robot program‘ seperti mesin pencari (search engine). Pada tutorial kali ini saya akan membahas meta tag charset UTF-8 yang sering digunakan dalam halaman HTML5.

Charset UTF-8 merupakan meta tag yang paling sering digunakan dalam HTML5, penulisannya adalah sebagai berikut:

Meta tag diatas memberi instruksi kepada web browser untuk menerjemahkan karakter-karakter di dalam halaman HTML sebagai UTF-8.

Baca Penjelasan Lengkap Tentang Meta tag Pada Artikel Sebelumnya Disini:
Pengertian Meta Tags dalam HTML

Tag-tag di dalam tag <body>

Tag <header>

Tag <header> digunakan untuk bagian halaman web yang merupakan header. Coccok untuk meletakkan logo dan judul situs.

Contoh penggunaan tag <header>:

<h1>Judul Website</h1>

</header>

Tag <nav>

Tag <nav> digunakan sebagai ‘container‘ dari menu navigasi. Sebaiknya digunakan untuk menu utama yang dirasa penting seperti pada bagian header.

Contoh penggunaan tag <nav>:

<nav>

<ul>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

Tag <section>

Tag <section> digunakan untuk memisahkan bagian-bagian dari struktur web. Tag ini bisa digunakan sebagai container untuk kumpulan artikel, gallery, atau bagian lain dari halaman web yang perlu pemisahan. Walaupun tag <section> terkesan ‘generik’, tetapi jika yang kita butuhkan hanya kontainer tanpa makna apa-apa, sebaiknya tetap menggunakan tag <div>.

Bagian utama dimana kontent berada bisa ‘dibungkus’ menggunakan tag <section>. Dan jika halaman tersebut memiliki banyak bagian yang secara logika bisa dipisah, bisa menggunakan beberapa tag <section>.

Contoh penggunaan tag <section>:

<h1>Judul 1</h1>

<p>...Kumpulan dari konten...</p>

</section>

<h1>Judul 1</h1>

<p>...Kumpulan dari konten...</p>

</section>

Tag <main>

Tag <main> cocok digunakan untuk menandakan bagian utama dari sebuah halaman. Berbeda dari tag <section>, tag <main> umumnya hanya digunakan 1 kali untuk bagian paling penting, yang biasanya berupa konten/artikel utama.

Contoh penggunaan tag <main>:

<main>

<h1>Judul Utama</h1>

<p>...penjelasan...</p>

<h2>Judul Artikel 1</h2>

<p>...penjelasan artikel 1...</p>

</article>

<h2>Judul Artikel 2</h2>

<p>...penjelasan artikel 2...</p>

</article>

</main>

Tag <article>

Tag <article> bertujuan untuk menampung konten web yang berupa artikel. Umumnya tag ini berada di dalam tag <section> atau <main>. Tag ini cocok sebagai container untuk artikel dalam sebuah blog.

Contoh penggunaan tag <article>:

<h2>Judul Artikel</h2>

<p>...penjelasan artikel...</p>

</article>

Tag <aside>

Tag <aside> bertujuan untuk menandai bagian web yang bukan berisi konten utama, tetapi memiliki kaitan dengan artikel yang saat ini ditampilkan. Bagian paling pas untuk tag <aside> adalah sidebar. Karena pada sidebar bisa terdiri dari berbagai konten yang tidak langsung berkaitan dengan konten utama seperti ’10 artikel terbaru’, atau ‘5 komentar terbaru’. Selain untuk sidebar, tag <aside> juga bisa digunakan di dalam artikel untuk menandai bagian tambahan.

Contoh penggunaan tag <aside>:

<h2>Judul Artikel 1</h2>

<p>...penjelasan artikel 1...</p>

</article>

<aside>

<p>...penjelasan tambahan...</p>

</aside>

Tag <footer>

Tag <footer> biasannya digunakan pada bagian bawah halaman, dimana kita menampilkan beberapa informasi mengenai website. Walapun penggunaan paling jelas adalah untuk bagian footer halaman (meletakkan copyright, about us, dll), tag ini juga cocok digunakan pada bagian bawah artikel untuk menampung informasi tambahan seperti ‘tentang penulis‘ maupun link untuk share ke sosial media.

Contoh penggunaan tag <footer>:

<main>

<h2>Judul Artikel 1</h2>

<p>...penjelasan artikel 1...</p>

</main>

</footer>

Membuat Struktur Halaman HTML dengan tag HTML5

Struktur yang ingin kita buat dengan HTML5 adalah sebagai berikut:

Berikut contoh code struktur halaman HTML dengan tag HTML5:

<!DOCTYPE html>

<html>

<head>

<title>Belajar HTML5</title>

</head>

<body>

<h1>Judul Website</h1>

</header>

<nav>

<ul>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

<h1>Judul Artikel 1</h1>

<h2>Sub Judul Artikel 1</h2>

</header>

<p>...Ini adalah isi dari artikel 1...</p>

</article>

<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>

</ul>

</aside>

<p>Footer - Copyright Nusantara Coding</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>).

Belajar HTML Secara Lengkap Disini:
1. Tutorial HTML Bagian 1
2. Tutorial HTML Bagian 2