Apakah kamu adalah seorang web developer front-end, mahasiswa IT yang sedang belajar pengembangan web, SEO Specialist, atau mungkin hanya sekadar tertarik dengan dunia IT dan ingin belajar percodingan.
Maka artikel ini adalah untuk kamu! Mulai dari dasar-dasar HTML hingga implementasi praktisnya dalam membangun halaman web yang fungsional dan ramah SEO.
Ketika kita berbicara tentang pengembangan web, istilah HTML pasti sering muncul. HTML atau HyperText Markup Language adalah fondasi dari setiap halaman web.
Tanpa tag HTML, tidak akan ada teks, gambar, tombol, atau elemen lain yang bisa ditampilkan di layar.
Artikel ini akan membahas apa itu HTML dan HTML tag, kumpulan tag HTML dan fungsinya, serta contoh-contoh penggunaannya. Dengan membaca artikel ini, kamu akan lebih paham bagaimana tag HTML berfungsi dalam membangun sebuah halaman web.
Daftar Isi
Apa Itu HTML dan HTML Tag?
HTML adalah bahasa markup yang digunakan untuk membuat struktur dasar halaman web. HTML tag adalah komponen utama yang digunakan untuk memberi instruksi kepada browser tentang cara menampilkan konten. Setiap tag biasanya terdiri dari tag pembuka, konten, dan tag penutup. Sebagai contoh:
Tag di atas adalah tag paragraf (p). Tag pembuka adalah <p>, tag penutup adalah </p>, dan “Tulis paragraf disini” adalah kontennya.
Tag <!DOCTYPE> wajib ada di setiap dokumen HTML modern (HTML5). Tag ini digunakan untuk memberi tahu browser jenis dokumen HTML yang digunakan. Tag ini berfungsi untuk memastikan browser memahami bahwa halaman menggunakan standar HTML5, sehingga elemen-elemen dapat ditampilkan dengan benar.
Kumpulan HTML Tag dan Fungsinya
HTML memiliki ratusan tag, tapi tidak semua sering dipakai. Ada beberapa tag yang wajib kamu tahu, karena menjadi pondasi setiap halaman web.
Tag Dasar: Pondasi dari Semua Halaman Web
Kalau baru mulai belajar HTML, ini adalah tag-tag pertama yang perlu kamu pahami:
- <!DOCTYPE>: Menentukan tipe dokumen HTML yang digunakan.
- <html>: Menjadi pembungkus utama semua elemen HTML dalam halaman.
- <head>: Berisi informasi non-visual seperti metadata, link stylesheet, dan lainnya.
- <title>: Menentukan judul halaman yang muncul di tab browser.
- <body>: Area utama tempat semua konten yang ditampilkan berada.
- <h1> sampai <h6>: Elemen heading, dari yang paling penting (<h1>) sampai sub-judul terkecil (<h6>).
- <p>: Tag paragraf untuk memisahkan teks ke dalam blok teks.
- <br>: Menambahkan jeda baris.
- <hr>: Menyisipkan garis horizontal sebagai pemisah visual.
- <!– –>: Tag komentar, berguna untuk memberi catatan dalam kode.
Tag Format Teks: Bikin Tampilan Teks Lebih Terstruktur
Tag format teks ini berguna untuk mengatur tampilan tulisan secara visual tanpa bantuan CSS.
- <b>: Membuat teks menjadi tebal.
- <strong>: Sama seperti <b>, tapi punya arti semantik untuk penekanan penting.
- <i>: Membuat teks miring.
- <em>: Menandai penekanan, biasanya tampil miring juga.
- <u>: Menggarisbawahi teks.
- <sup> & <sub>: Superscript (seperti pangkat) dan subscript (seperti notasi kimia).
- <pre>: Menampilkan teks dengan format yang dipertahankan (spasi, baris, dll).
- <code>: Menampilkan teks seperti kode (monospace).
- <mark>: Menyorot teks seperti highlight.
- <abbr>: Menandai singkatan, dengan penjelasan via atribut title.
- <blockquote> & <q>: Menyisipkan kutipan panjang dan pendek.
- <cite>: Menandai judul karya, seperti buku atau artikel.
- <del> & <ins>: Menandai teks yang dihapus dan disisipkan.
- <kbd>: Menampilkan input dari keyboard.
- <small>: Membuat teks lebih kecil dari ukuran normal.
Tag Gambar: Menyisipkan Visual ke Halaman Web
Gambar penting untuk memperkaya konten web. HTML menyediakan beberapa tag khusus untuk ini:
- <img>: Tag utama untuk menampilkan gambar. Wajib punya atribut src (sumber gambar) dan alt (teks alternatif).
- <figure>: Pembungkus gambar dan caption-nya.
- <figcaption>: Menambahkan caption ke gambar dalam <figure>.
- <picture>: Digunakan untuk menampilkan gambar yang berbeda berdasarkan kondisi viewport.
- <map> dan <area>: Untuk gambar interaktif seperti peta.
Tag Link: Menghubungkan Halaman Satu dengan Lainnya
Hyperlink adalah jantung dari internet. Berikut beberapa tag yang digunakan untuk membuat link:
- <a>: Membuat hyperlink ke halaman lain atau bagian tertentu dari halaman.
- <link>: Biasanya digunakan dalam <head> untuk menghubungkan stylesheet atau metadata.
- <nav>: Pembungkus khusus untuk kumpulan link navigasi.
Atribut penting:
- href: Alamat tujuan link.
- target=”_blank”: Membuka link di tab baru.
Tag Daftar: Menyusun Konten dalam Bentuk List
Untuk konten yang perlu disusun secara sistematis, tag list ini bisa digunakan:
- <ul>: Unordered list (bullet).
- <ol>: Ordered list (angka).
- <li>: List item.
- <dl>: Definition list.
- <dt>: Term yang didefinisikan.
- <dd>: Deskripsi dari term tersebut.
Tag Form dan Input: Membuat Formulir Interaktif
Form HTML memungkinkan pengguna untuk berinteraksi dengan situsmu. Ini beberapa tag kuncinya:
- <form>: Membuat area form.
- <input>: Menambahkan kolom input (teks, radio, checkbox, dll).
- <label>: Menyediakan label untuk elemen input.
- <select> dan <option>: Membuat dropdown.
- <textarea>: Kolom input teks yang panjang.
- <button>: Tombol kirim, reset, atau aksi lainnya.
Tag Tabel: Menyusun Data Secara Rapi
Kalau kamu ingin menampilkan data tabular, HTML punya serangkaian tag khusus:
- <table>: Membuat struktur tabel.
- <tr>: Baris tabel.
- <th>: Header kolom.
- <td>: Sel biasa dalam tabel.
- <thead>, <tbody>, <tfoot>: Mengelompokkan bagian tabel.
- <caption>: Judul tabel.
Tag Media: Audio dan Video Langsung di Halaman
Web modern butuh lebih dari sekadar teks dan gambar. Tag media ini bantu kamu menambahkan konten interaktif:
- <audio>: Menambahkan audio player.
- <video>: Menyisipkan video.
- <source>: Sumber media.
- <track>: Subtitle atau caption untuk video.
Tag Meta: Informasi di Balik Layar
Tag ini nggak terlihat langsung oleh pengguna, tapi penting banget buat SEO, performa, dan kontrol halaman.
- <meta>: Memberikan metadata seperti charset, viewport, deskripsi.
- <base>: Menentukan URL dasar untuk semua link relatif di halaman.
- <link>: (juga dipakai untuk stylesheet dan favicon).
Tag Struktur: Menata Layout Halaman
Akhirnya, ada tag-tag yang membantu kamu membagi konten jadi lebih terstruktur dan mudah dibaca:
- <div>: Elemen pembungkus umum.
- <header>: Bagian atas halaman atau section.
- <main>: Konten utama yang unik di halaman tersebut.
- <section>: Area tematik.
- <article>: Konten mandiri seperti blog post.
- <footer>: Bagian bawah halaman.
- <details> & <summary>: Untuk konten yang bisa dibuka/tutup oleh user.
Contoh – Contoh Penerapan HTML Tag
Setelah tahu daftar tag-nya, yuk kita lihat bagaimana tag-tag ini bekerja dalam konteks nyata.
1. Struktur Dasar Halaman Web
<!DOCTYPE html> <html> <head> <title>Belajar Tag HTML</title> </head> <body> <h1>Selamat Datang</h1> <p>Ini adalah halaman web pertamaku.</p> </body> </html>
2. Tautan ke Halaman Lain
<a href="about.html">Tentang Kami</a>
Pengunjung akan diarahkan ke halaman about.html saat klik tautan.
3. Menambahkan Gambar
<img src="produk.jpg" alt="Gambar Produk">
alt penting untuk aksesibilitas dan SEO—kalau gambar gagal dimuat, teks ini akan muncul.
4. Heading Berjenjang
<h1>Judul Besar</h1> <h2>Subjudul</h2> <h3>Sub-subjudul</h3>
Struktur ini membantu pembaca (dan mesin pencari) memahami hierarki informasi.
5. Menambahkan Paragraf
<p>Ini adalah paragraf pertama dalam artikel saya.</p>
Membantu memisahkan konten agar lebih mudah dibaca.
6. Kontainer Konten
<div class="section"> <h2>Layanan Kami</h2> <p>Kami menyediakan jasa desain web dan pengembangan aplikasi.</p> </div
<div> Memungkinkan kita mengelompokkan konten dan memberi styling CSS.
7. Penandaan Spesifik dalam Teks
<p>Produk ini <span class="highlight">diskon 50%</span> selama bulan ini.</p>
Dengan <span>, kita bisa memberi style hanya pada bagian tertentu.
8. Membuat Daftar
<ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul>
Daftar unordered dengan bullet points. Ada juga <ol> untuk daftar bernomor.
9. Formulir Sederhana
<form action="/submit" method="POST"> <input type="text" name="nama"> <input type="submit" value="Kirim"> </form>
Digunakan untuk mengambil input dari pengguna.
10. Embed Video
<video controls> <source src="video.mp4" type="video/mp4"> Browser Anda tidak mendukung tag video. </video>
Menyisipkan media interaktif langsung ke halaman web.
Penutup
Tag HTML bukan sekadar potongan kode yang terlihat teknis. Mereka adalah bahasa dasar yang memungkinkan semua halaman web tampil, berfungsi, dan bisa dinikmati pengguna. Dari struktur sederhana seperti paragraf, hingga fungsi kompleks seperti embed video, semua bergantung pada tag HTML.
Kalau kamu baru mulai belajar web development, kuasai dulu dasar-dasar tag HTML ini. Jangan buru-buru ke JavaScript atau framework yang lebih kompleks. Mulai dari yang kecil, tapi pahami dengan serius.
Coba buat halaman sederhana menggunakan 10 tag yang ada dalam artikel ini. Lihat hasilnya langsung di browser. Lalu, lanjut eksplorasi: pelajari atribut tambahan, struktur form lebih kompleks, atau mulai kombinasikan dengan CSS.
Ingin belajar lebih cepat dan langsung praktek di hosting sungguhan? Coba layanan Hosting Murah Exabytes, ideal untuk pemula yang ingin mulai bikin website sendiri tanpa ribet setup server.
