Memahami HTML Elements: Struktur Penting di Balik Pembuatan Website
Setelah menyiapkan peralatan tempur seperti text editor dan browser pada panduan sebelumnya, langkah penting selanjutnya dalam belajar web development adalah memahami HTML Elements (Elemen HTML).
Jika diibaratkan sebuah rumah, elemen HTML adalah batu bata, semen, pintu, dan jendela yang menyusun rumah tersebut. Tanpa adanya elemen, browser tidak akan tahu mana teks yang harus dijadikan judul, mana yang paragraf, atau mana bagian yang berupa gambar.
Yuk, kita bedah apa itu elemen HTML dan bagaimana cara menggunakannya!
Apa itu HTML Element?
Secara sederhana, HTML Element adalah satu kesatuan penuh mulai dari tag pembuka, isi konten, hingga tag penutup.
Banyak pemula yang keliru dan menyamakan antara istilah "Tag" dan "Element". Padahal keduanya berbeda. Tag adalah bagian pembentuk dari sebuah elemen, sedangkan elemen adalah kombinasi utuh dari tag beserta isinya.
Berikut adalah anatomi atau struktur dari sebuah HTML Element:
Tag Pembuka (Start Tag): Menandakan awal dari sebuah elemen dan memberi tahu browser bagaimana konten harus ditampilkan. Contoh:
<p>Konten (Content): Teks, gambar, atau media yang ingin Anda tampilkan di layar. Contoh:
Halo Dunia!Tag Penutup (End Tag): Menandakan akhir dari elemen, ditandai dengan karakter garis miring (slash). Contoh:
</p>
Rumus Dasarnya: >
<tag_pembuka>Konten Anda</tag_penutup>= 1 Elemen HTML
Tabel Referensi Elemen HTML yang Paling Sering Digunakan
Berikut adalah tabel rangkuman elemen-elemen dasar yang wajib Anda ketahui saat menyusun kerangka sebuah halaman website:
| Nama Tag / Elemen | Kategori | Fungsi / Penjelasan | Contoh Penulisan Kode |
| <!DOCTYPE html> | Dokumen | Mendeklarasikan kepada browser bahwa dokumen ini adalah HTML5. | <!DOCTYPE html> |
| <html> | Dokumen | Elemen utama (akar) yang membungkus seluruh konten halaman web. | <html> ... </html> |
| <head> | Dokumen | Wadah informasi meta, judul tab browser, dan link dokumen CSS/JS. | <head> ... </head> |
| <title> | Dokumen | Menentukan judul halaman website yang muncul di tab browser. | <title>Blog Pemula</title> |
| <body> | Dokumen | Membungkus semua konten visual yang akan tampil di halaman web. | <body> ... </body> |
<h1> sampai <h6> | Teks | Membuat judul (Heading). <h1> terbesar, <h6> terkecil. | <h1>Judul Utama</h1> |
| <p> | Teks | Membuat paragraf teks biasa. | <p>Ini teks paragraf.</p> |
| <a> | Tautan | Membuat hyperlink untuk menghubungkan halaman web. | <a href="#">Klik Disini</a> |
| <img> | Media | Menampilkan gambar (Elemen kosong, tidak butuh tag penutup). | <img src="foto.jpg" alt="Foto"> |
| <ul> | Daftar | Membuat daftar poin bulat (Unordered List / tidak berurutan). | <ul><li>Item</li></ul> |
| <ol> | Daftar | Membuat daftar angka (Ordered List / berurutan nomor). | <ol><li>Langkah 1</li></ol> |
| <li> | Daftar | Menandakan baris item di dalam list (<ul> atau <ol>). | <li>Item Daftar</li> |
| <div> | Struktur | Wadah generik (block-level) untuk mengelompokkan elemen lain. | <div> ... </div> |
| <span> | Struktur | Wadah generik (inline-level) untuk teks atau sebagian kata. | <span>Teks khusus</span> |
| <br> | Teks | Membuat baris baru atau enter (Tidak butuh tag penutup). | Belajar <br> HTML |
Jenis-Jenis Elemen HTML yang Sering Digunakan
Ada ratusan elemen di dalam spesifikasi HTML, tetapi sebagai pemula, Anda cukup memahami beberapa elemen dasar berikut ini:
1. Elemen Heading (<h1> sampai <h6>)
Digunakan untuk membuat struktur judul artikel atau sub-judul. <h1> adalah yang terbesar (biasanya hanya digunakan sekali untuk judul utama artikel), sedangkan <h6> adalah yang terkecil.
<h1>Ini Judul Utama</h1><h2>Ini Sub-Judul</h2>2. Elemen Paragraf (<p>)
Digunakan untuk menulis teks atau artikel biasa. Elemen ini otomatis akan memberikan jarak baris (margin) baru di bawahnya.
<p>Ini adalah contoh paragraf yang berisi teks panjang di website Anda.</p>
3. Elemen Tautan/Link (<a>)
Digunakan untuk menghubungkan satu halaman ke halaman lain (hyperlink). Elemen ini membutuhkan sesuatu yang disebut attribute (seperti href) untuk menentukan alamat tujuan.
<a href="https://www.google.com">Buka Google</a>
4. Elemen Gambar (<img>)
Digunakan untuk menampilkan gambar. Berbeda dengan elemen lain, elemen gambar adalah Empty Element (elemen kosong), artinya ia tidak memiliki tag penutup dan konten teks di dalamnya, melainkan menggunakan atribut src untuk memanggil file gambar.
<img src="gambar-pemandangan.jpg" alt="Pemandangan Indah">
Elemen Bersarang (Nested Elements)
Hebatnya HTML adalah suatu elemen bisa dimasukkan ke dalam elemen lainnya. Kondisi ini disebut sebagai Nested Elements atau elemen bersarang.
Perhatikan contoh berikut:
<p>Saya sedang belajar coding di <b>Blogger</b> hari ini.</p>
Pada contoh di atas, elemen <b> (untuk membuat teks tebal/bold) berada di dalam elemen <p>. Saat ditampilkan di browser, kata "Blogger" akan otomatis tercetak tebal di tengah-tengah kalimat paragraf tersebut. Pastikan Anda menutup tag bagian dalam terlebih dahulu sebelum menutup tag bagian luar agar struktur kode tidak rusak.
Kesimpulan
Memahami HTML Elements adalah kunci utama agar Anda bisa menyusun konten website dengan struktur yang benar dan rapi. Ingat rumus dasarnya: Tag Pembuka + Konten + Tag Penutup = Elemen.
Di artikel selanjutnya, kita akan membahas tentang HTML Attributes yang membuat elemen-elemen ini menjadi lebih interaktif, fungsional, dan bertenaga. Tetap semangat belajarnya!
Apakah Anda punya pertanyaan atau bingung tentang fungsi elemen HTML tertentu? Jangan ragu untuk menuliskannya di kolom komentar, ya! Mari kita diskusikan bersama.
Tidak ada komentar:
Posting Komentar