Baca Selengkapnya..Panduan Belajar HTML untuk Pemula

Membuat Layout HTML dengan Semantic Element

Pada bahasan sebelumnya kita telah mengenal beberapa element HTML seperti heading, paragraph, list, link, table, dan form. Selain itu ditinjau dari cara browser menampilkan halaman web terdapat element block dan inline. Pertanyaan sederhana bagaimana cara kita menyusun element-element tersebut biar kelihat rapi dan mudah dibaca?

Jawabannya adalah pengaturan tata letak atau layout. Pada bab sebelumnya kita menggunakan element div dan span untuk menterjemahkan setiap element yang terdapat pada halaman HTML. Tag <div> dan <span> ini tidak memiliki makna kecuali kita tambahkan atribut class dan id pada kedua tag tersebut. Misalnya untuk header kita gunakan element <div class=”header”> atau <div id=”header”>, bagian konten/artikel kita definisikan dengan <div class=”article”>, begitu juga dengan footer kita gunakan <div class=”footer>.

Seri belajar HTML:

Pada HTML5 terdapat pembaharuan tag berkaitan dengan fungsionalitas layout HTML yang dikenal dengan istilah semantic element. Pada semantic element, setiap layout menggunakan tag sesuai dengan fungsi masing-masing. Sebagai contoh untuk header kita gunakan tag <header> … </header>, artikel kita gunakan tag <article> … </article>, dan footer menggunakan tag <footer> … </footer>.

Jika diperhatikan, antara element semantic dengan div dan span sama-sama bisa digunakan untuk membuat layout HTML. Hanya saja pada element semantic web browser lebih mudah mendefinisikan apa yang terdapat pada element tersebut, beda halnya dengan penggunakan tag <div> dan <span> dalam membentuk layout, karena kedua tag ini tidak mendefinisikan isi element dengan jelas bagi browser.

Berikut beberapa element semantic yang dapat digunakan untuk mendefinisikan struktur atau layout halaman web:

No.Tag SemantikDeskripsi
 1<article>Mendefinisikan element artikel web
 2<aside>Mendefinisikan element di samping konten utama
 3<details>Mendefinisikan element detail atau spoiler
 4<figcaption>Mendefinisikan text caption pada figure
 5<figure>Mendefinisikan figur atau gambar pada artikel
 6<footer>Mendefinisikan element footer web
 7<header>Mendefinisikan element header web
 8<main>Mendefinisikan element utama web
 9<mark>Mendefinisikan teks yang ditandai
 10<nav>Mendefinisikan element navbar atau navigasi
 11<section>Mendefinisikan bagian halaman web
 12<summary>Mendefinisikan ringkasan artikel web 
 13<time>Mendefinisikan element waktu

Layout HTML menggunakan element semantik dapat dilihat pada gambar berikut ini.

Semantic Element

Beberapa contoh penggunaan element semantik dapat disimak pada pembahasan di bawah ini:

Element Header

Element header biasanya digunakan untuk menempatkan informasi judul maupun tagline website menggunakan tag heading. Selain judul dan tagline, pada header juga dapat disematkan logo atau icon website. Element header juga dapat ditambahkan pada element article pada suatu artikel web untuk menandai judul artikel. Tag yang digunakan untuk membuat element header adalah <header> … </header>. Contoh penggunaan element header:

semantic element - header

Element Nav

Element nav biasanya ditempatkan setelah element header dan berfungsi untuk mendefinisikan link navigasi pada sebuah website. Selain itu, element navigasi juga dapat ditempatkan dalam artikel maupun sidebar. Tidak semua navigasi harus menggunakan element ini, misalnya daftar link navigasi yang terdapat pada footer. Tag yang digunakan untuk mendefinisikan element nav adalah <nav> … </nav>. Element nav dapat dibuat dalam bentuk element inline maupun block. Penggunaan element nav dalam bentuk inline dapat menggunakan tag <a> seperti contoh berikut:

semantic element - nav

Untuk element nav dalam bentuk list (block element), gunakan tag <ul> dan tambahkan atribut role=”navigation” (optional) pada tag <nav> seperti contoh berikut:

Element Footer

Element footer mendefinisikan bagian footer sebuah website. Pada element footer biasa berisi informasi hak cipta, profil, kontak, peta situs, situs relevan, atau dapat juga link yang mengarah ke bagian atas (header) web. Element footer juga dapat ditambahkan pada element article pada suatu artikel web. Tag yang digunakan untuk membuat element ini adalah <footer> … </footer>. Contoh penggunaan element footer untuk informasi hak cipta:

semantic element - footer

Element Article

Fungsi element article adalah untuk menempatkan konten mandiri seperti artikel, postingan blog, forum, komentar blog, atau widget interaktif. Setiap konten yang terdapat pada element ini dapat berdiri sendiri dan tidak terikat dengan konten lain. Satu element article mewakili satu jenis konten dengan tema atau judul yang sama. Element article dapat juga disisipkan pada element article lain yang masih berkaitan. Contoh penggunaan element article dengan satu buah judul artikel dan komentar:

Baca Juga:  Membuat Website Sekolah menggunakan WordPress
layout element semantic - article

Element Section

Fungsi dari element section adalah mengelompokkan konten secara tematik pada halaman web sesuai dengan judul atau tema masing-masing. Element section harus ditambahkan tag heading untuk menandai judul setiap section.

Untuk membuat element section kita gunakan tag <section> … </section>. Dalam penggunaanya, element section bisa berada di dalam maupun di luar element article. Selain itu, element section tidak diperuntukkan sebagai container atau pembungkus element-element lain. JIka kita ingin menerapkan fungsi container pada suatu element, sebaiknya gunakan tag <div>. Contoh penggunaan element section:

layout element semantic - section

Element Aside

Element aside merupakan element yang berada di samping (bersebelahan) dengan element konten website. Element aside bisa saja berupa informasi tambahan terkait dengan artikel yang ditampilkan seperti referensi, kutipan, kata kunci, dan konten terkait atau dapat juga berupa element terpisah dari artikel seperti sidebar yang terletak di samping kiri dan/ atau kanan kolom artikel. Jika berupa sidebar maka dapat ditambahkan element lain yang tidak berhubungan langsung seperti artikel populer, artikel terbaru, komentar terbaru, atau dapat juga berupa iklan. Untuk membuat element ini dapat menggunakan tag <aside> … </aside>. Contoh penggunaan element aside berupa kutipan:

Baca Juga:  Panduan Instalasi MikroTik di VirtualBox
layout element semantic - aside

Contoh penggunaan element aside sebagai sidebar:

layout element semantic - aside

Element Figure

Element figure berfungsi mendefisikan sebuah gambar, ilustrasi, diagram, skema, video, kode, dan lain-lain, sebagai informasi tambahan dalam sebuah artikel atau konten. Tag yang digunakan untuk membuat element figure adalah <figure> … </figure>. Element ini selalu diikuti dengan text caption atau keterangan figure dengan menambahkan tag <figcaption> … </figcaption>. Contoh penggunaan element figure:

semantic element - figure

Membuat Layout HTML dengan Semantic Element

Kode HTML:

Baca Juga:  Mengaktifkan Fitur Wifi via Command Prompt pada Windows 8 untuk Berbagi Data

Kode CSS:

Hasil layout pada web browser:

membuat layout html dengan semantic element
5 1 vote
Article Rating
Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Asep Jamil
Asep Jamil
1 month ago

terimakasih mas..