Pemahaman Struktur Dokumen HTML5

HTML5 seperti yang kita tahu merupakan versi terbaru dari standard HTML yang memiliki banyak fitur terbaru untuk mendukung kinerja suatu aplikasi web. Saya menemukan artikel menarik mengenai cara membuat struktur web menggunakan HTML5.

1. Struktur HTML5

Persiapan awal yang diperlukan yaitu membuat struktur halaman web HTML5 berupa tag inti dari sebuah halaman html (header, body, footer), lalu menentukan karakter yang akan digunakan (charset) dan bahasa yang digunakan dalam code html.

2. Optimisasi Akses Mobile

Sering dijumpai istilah html-responsive yang berguna untuk menyesuaikan tampilan halaman web saat diakses melalui ukuran layar yang lebih kecil dari standard halaman web, terdapat banyak contoh web dan template yang sudah menerapkan teknik ini untuk kenyamanan akses pengguna.

3. Elemen Head tag

Didalam elemen head tag adalah bagian penting untuk dapat menghasil sebuah tampilan halaman html yang menarik berupa elemen-elemen seperti fonts, styles, scripts dan lain-lain. Dari beberapa point di atas, dokumen html yang dibuat dan elemen-elemen yang digunakan dapat dilihat seperti contoh berikut ini.

4. Struktur Rancangan HTML

Seperti yang telah disebut sebelumnya, html terdiri dari 3 bagian inti dari kerangka halaman web yaitu header, body dan footer. Elemen header yang merupakan struktur html bagian teratas yang merepresentasikan sebuah wadah untuk konten pengantar (untuk akses dan membuat menu bar). Berikut ini contoh sederhana dari penggunaan header tag.

Contoh di atas dapat terlihat kalau terdapat elemen tag yang memiliki class dan id, ini digunakan berdasarkan dari referensi CSS.

Elemen body berisikan konten yang paling relevan dari sebuah dokumen html, dan tempat dimana bagian elemen-elemen utama berada seperti text (artikel), hyperlinks, images, tables, lists dan masih banyak yang lainnya. Berikut ini contoh sederhana dari penggunaan body tag.

Kemudian elemen footer yang merupakan bagian paling bawah dari halaman web, biasanya elemen ini terdiri dari informasi penulis web, copyright, contact, sitemap dan lain-lain. Elemen ini adalah bagian terakhir dari struktur halaman html yang memberikan informasi mengenai halaman web tersebut. Berikut ini contoh sederhana dari penggunaan footer tag.

5. Rancangan Grafis HTML5

Saat merancang sebuah halaman web, bagian terpenting adalah seperti apa tampilan web tersebut akan dibuat. Banyak orang yang berinovasi merancang tmapilan web mereka sesuai keinginannya. Terdapat beberapa contoh sederhana dari design sebuah halaman web sederhana seperti gambar berikut ini.

Dari contoh gambar di atas kita dapat dengan mudah menuli code html dan css karena telah memiliki rancangannya, oleh karena itu sangat dianjurkan untuk membuat rancangan grafis sebelum menulis code html.

Contoh template html5 dapat di download disini dan untuk lebih mengenal HTML5 saya merekomendasikan belajar melalui web ini.

source: webcodegeeks.com