Layout pada HTML

Setiap website mempunyai layout (tata letak). Ada beberapa bagian layout, mulai dari yang paling sederhana sampai pada tingkat paling kompleks. Setidaknya ada tiga bagian layout yang harus ada, pertama bagian header, content, dan footer. Alangkah lebih baik lagi ditambah dengan menu navigasi, baik posisinya di kiri atau kanan.

Layout header berisi informasi tentang logo dan menu utama yang mencakup halaman-halaman inti web. Content berisi informasi baik berupa teks, foto, video yang akan disajikan kepada pengunjung. Footer  berisi informasi pendukung website, seperti menu tentang kami, privacy policy, disclaimer, contact. Sedangkan menu navigasi kiri atau kanan merupakan menu pembantu; baik untuk artikel terkait dari artikel yang sedang dibaca, topik terkait, terbaru, terpopuler, dan tag populer.

 Contoh layout header

Contoh 1; logo dan menu utama (detik.com)

Contoh 2; logo dan menu utama (okezone.com)

Contoh layout content

Contoh layout 1; layout konten republika.co.id

 Contoh layout 2; layout konten okezone.com

Contoh menu navigasi

Contoh menu navigasi (kiri) untuk berita terkait (detik.com).

Contoh menu navigasi (kiri) untuk berita terkini dan terpopuler (republika.co.id).

 Navigasi kanan dengan di isi tag terkini (merdeka.com).

Contoh layout footer

Menu footer merdeka.com

Menu footer liputan6.com

Menu footer detik.com

Contoh-contoh layout di atas hanya untuk referensi atau gambaran saja, Anda tidak disuruh membuat persis sama. Apalagi menconteknya secara penuh, tentu menimbulkan citra buruk, kurang kreativitas. Tidak ada aturan wajib dalam membuat layout, Anda boleh berkreasi sebagus mungkin, asalkan desain tetap konsisten, mudah di navigasi dan tidak membingungkan pengunjung.

Perhatikan dalam membuat warna link, warna link harus berbeda dengan warna tulisan artikel, agar tidak membingungkan pengunjung dalam membedakan mana link mana tulisan biasa. Ukuran logo tidak terlalu besar dan tidak pula terlalu kecil, size-nya seminimal mungkin. Jangan mencamtumkan link (url) yang belum terhubung (belum ada halamannya), karena membuat kecewa pengunjung. Untuk layout konten gunakan warna latar putih, sedangkan menu navigasi, header, footer boleh warna lain, asalkan huruf (teks) bisa dibaca dengan jelas.

Gunakan huruf (font) standar; yang muda dibaca, seperti Tahoma, Verdana, Times New Roman. Ukuran huruf jangan terlalu kecil dan tidak pula terlalu besar, normalnya 14px.

^Baca juga: Menggunakan tag <iframe> untuk video, web dan gambar.