HTML (HyperText Markup Language) merupakan dasar dari setiap halaman website. Saat belajar membuat website, memahami tag HTML adalah langkah pertama yang wajib dilakukan. Tag HTML berfungsi untuk memberi tahu browser bagaimana suatu konten harus ditampilkan, mulai dari judul, paragraf, gambar, hingga formulir.
Bagi pemula, jumlah tag HTML mungkin terlihat banyak dan membingungkan. Padahal, dalam praktiknya hanya ada beberapa tag yang paling sering digunakan untuk membangun sebuah website.
Pada artikel ini, Anda akan mempelajari 20 tag HTML yang paling sering digunakan beserta fungsi dan contoh penggunaannya. Dengan memahami tag-tag ini, Anda sudah memiliki bekal yang kuat untuk mulai membuat website sendiri.
Apa Itu Tag HTML?
Tag HTML adalah kumpulan kode yang digunakan untuk menyusun struktur halaman web. Sebagian besar tag memiliki pasangan berupa tag pembuka dan tag penutup.
Contohnya:
<p>Ini adalah paragraf.</p>Pada contoh di atas:
<p>adalah tag pembuka.</p>adalah tag penutup.- Teks di dalamnya merupakan isi elemen.
Browser akan membaca tag tersebut lalu menampilkan teks sebagai sebuah paragraf.
Mengapa Tag HTML Penting?
Berikut beberapa alasan mengapa tag HTML sangat penting:
- Membentuk struktur halaman website.
- Membantu browser memahami isi halaman.
- Mempermudah pengaturan tampilan menggunakan CSS.
- Menjadi dasar penggunaan JavaScript.
- Mendukung optimasi SEO jika digunakan dengan benar.
- Membuat kode lebih rapi dan mudah dipelajari.
20 Tag HTML yang Paling Sering Digunakan
1. <html>
Tag ini merupakan elemen paling luar yang membungkus seluruh dokumen HTML.
Contoh:
<html>
</html>Fungsi:
- Menandai awal dan akhir dokumen HTML.
2. <head>
Berisi informasi mengenai halaman yang tidak ditampilkan langsung kepada pengunjung.
Contoh:
<head>
<title>Website Saya</title>
</head>Fungsi:
- Menyimpan metadata.
- Menghubungkan CSS.
- Menghubungkan JavaScript.
- Menentukan judul halaman.
3. <title>
Digunakan untuk memberikan judul halaman yang muncul pada tab browser.
Contoh:
<title>Belajar HTML</title>Fungsi:
- Menampilkan judul browser.
- Membantu optimasi SEO.
4. <body>
Seluruh isi website ditempatkan di dalam tag ini.
Contoh:
<body>
Selamat datang
</body>Fungsi:
- Menampilkan seluruh konten halaman.
5. <h1> sampai <h6>
Digunakan untuk membuat heading atau judul.
Contoh:
<h1>Judul Utama</h1>
<h2>Sub Judul</h2>Fungsi:
- Membuat struktur konten.
- Membantu SEO.
- Memudahkan pembaca memahami isi artikel.
6. <p>
Tag paragraf.
Contoh:
<p>Belajar HTML sangat menyenangkan.</p>Fungsi:
- Menampilkan teks dalam bentuk paragraf.
7. <a>
Digunakan untuk membuat tautan atau hyperlink.
Contoh:
<a href="https://powercode.id">
Powercode Indonesia
</a>Fungsi:
- Menghubungkan halaman.
- Membuat navigasi website.
8. <img>
Untuk menampilkan gambar.
Contoh:
<img src="gambar.jpg" alt="Laptop">Fungsi:
- Menampilkan gambar pada halaman web.
9. <div>
Merupakan wadah atau container untuk mengelompokkan elemen.
Contoh:
<div>
Konten Website
</div>Fungsi:
- Membuat layout.
- Mengelompokkan elemen.
10. <span>
Digunakan untuk memberi format pada sebagian teks.
Contoh:
<span>HTML</span>Fungsi:
- Mengatur teks tertentu menggunakan CSS.
11. <br>
Memberikan baris baru.
Contoh:
Halo<br>
DuniaFungsi:
- Membuat perpindahan baris.
12. <hr>
Membuat garis horizontal.
Contoh:
<hr>Fungsi:
- Memisahkan bagian konten.
13. <ul>
Membuat daftar tanpa nomor.
Contoh:
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>Fungsi:
- Menampilkan daftar bullet.
14. <ol>
Membuat daftar bernomor.
Contoh:
<ol>
<li>Belajar HTML</li>
<li>Belajar CSS</li>
</ol>Fungsi:
- Membuat daftar urutan.
15. <li>
Digunakan sebagai isi daftar.
Contoh:
<li>JavaScript</li>Fungsi:
- Menampilkan item pada list.
16. <table>
Membuat tabel.
Contoh:
<table>
</table>Fungsi:
- Menampilkan data berbentuk tabel.
17. <form>
Digunakan untuk membuat formulir.
Contoh:
<form>
</form>Fungsi:
- Mengumpulkan data dari pengguna.
18. <input>
Elemen input pada formulir.
Contoh:
<input type="text">Fungsi:
- Memasukkan data pengguna.
19. <button>
Membuat tombol.
Contoh:
<button>Kirim</button>Fungsi:
- Menjalankan aksi ketika diklik.
20. <footer>
Digunakan untuk bagian bawah website.
Contoh:
<footer>
Copyright 2026
</footer>Fungsi:
- Menampilkan informasi hak cipta.
- Menampilkan kontak.
- Menampilkan navigasi tambahan.
Tabel Ringkasan 20 Tag HTML
| Tag | Fungsi |
|---|---|
<html> | Awal dokumen HTML |
<head> | Metadata halaman |
<title> | Judul browser |
<body> | Isi halaman |
<h1>-<h6> | Judul dan heading |
<p> | Paragraf |
<a> | Link |
<img> | Menampilkan gambar |
<div> | Container |
<span> | Format teks |
<br> | Baris baru |
<hr> | Garis pemisah |
<ul> | List tanpa nomor |
<ol> | List bernomor |
<li> | Item daftar |
<table> | Tabel |
<form> | Formulir |
<input> | Input data |
<button> | Tombol |
<footer> | Bagian bawah halaman |
Tips Menggunakan Tag HTML dengan Benar
Agar kode HTML lebih rapi dan mudah dipelajari, ikuti beberapa tips berikut:
- Gunakan struktur HTML yang benar sejak awal.
- Tutup setiap tag yang memerlukan penutup.
- Berikan indentasi agar kode mudah dibaca.
- Gunakan tag sesuai fungsinya, jangan hanya karena tampilannya.
- Manfaatkan tag HTML5 semantik seperti
<header>,<main>,<section>,<article>, dan<footer>untuk meningkatkan struktur dokumen dan SEO. - Tambahkan atribut
altpada setiap gambar agar lebih ramah aksesibilitas dan mesin pencari.
Kesalahan yang Sering Dilakukan Pemula
Beberapa kesalahan yang masih sering dilakukan saat belajar HTML antara lain:
- Lupa menutup tag.
- Menyusun heading tidak berurutan.
- Menggunakan terlalu banyak tag
<br>untuk mengatur jarak. - Tidak memberikan atribut
altpada gambar. - Menempatkan elemen di luar tag
<body>. - Menggunakan
<div>untuk semua elemen tanpa memanfaatkan tag semantik.
Menghindari kesalahan-kesalahan ini akan membuat kode lebih bersih, mudah dipelihara, dan sesuai dengan standar pengembangan web modern.
Kesimpulan
Menguasai tag HTML merupakan langkah awal yang sangat penting bagi siapa saja yang ingin belajar membuat website. Meskipun HTML memiliki banyak jenis tag, Anda tidak harus menghafal semuanya sekaligus. Dengan memahami 20 tag HTML yang paling sering digunakan, Anda sudah dapat membangun struktur halaman web yang rapi, mudah dibaca, dan siap dikembangkan menggunakan CSS serta JavaScript.
Semakin sering Anda berlatih membuat halaman web sederhana, semakin cepat Anda memahami fungsi setiap tag. Jadi, jangan ragu untuk mencoba berbagai contoh kode dan terus eksplorasi kemampuan HTML agar semakin mahir dalam pengembangan website.
