Jika Anda baru mulai belajar membuat website, memahami 15 tag HTML yang harus dikuasai pemula adalah langkah awal yang sangat penting. HTML (HyperText Markup Language) merupakan bahasa markup yang digunakan untuk menyusun struktur sebuah halaman web.
Setiap halaman website tersusun dari berbagai tag HTML yang memiliki fungsi berbeda. Ada tag untuk membuat judul, paragraf, gambar, tautan, hingga formulir. Dengan menguasai tag-tag dasar ini, Anda akan lebih mudah mempelajari CSS, JavaScript, bahkan framework modern seperti Bootstrap atau React.
Pada artikel ini, Anda akan mempelajari 15 tag HTML yang paling sering digunakan beserta fungsi dan contoh penggunaannya.
Mengapa Harus Menguasai Tag HTML Dasar?
Banyak pemula yang terburu-buru mempelajari CSS atau JavaScript tanpa memahami HTML terlebih dahulu. Padahal, HTML adalah pondasi utama sebuah website.
Beberapa manfaat menguasai tag HTML dasar antara lain:
- Memahami struktur halaman web.
- Mempermudah proses belajar CSS dan JavaScript.
- Membuat kode lebih rapi dan mudah dipelihara.
- Membantu optimasi SEO.
- Memudahkan pengembangan website di masa depan.
1. Tag <html>
Tag <html> adalah elemen utama yang membungkus seluruh isi dokumen HTML.
Contoh:
<html lang="id">
</html>Tag ini wajib ada pada setiap halaman HTML.
2. Tag <head>
Tag <head> berisi informasi mengenai halaman web, seperti judul, metadata, favicon, dan file CSS.
Contoh:
<head>
<title>Belajar HTML</title>
</head>Isi tag ini tidak ditampilkan langsung kepada pengunjung.
3. Tag <title>
Tag <title> menentukan judul halaman yang muncul pada tab browser.
Contoh:
<title>15 Tag HTML Dasar</title>Judul yang baik juga membantu meningkatkan SEO website.
4. Tag <body>
Semua konten yang terlihat oleh pengunjung ditempatkan di dalam tag <body>.
Contoh:
<body>
<h1>Selamat Datang</h1>
<p>Belajar HTML itu mudah.</p>
</body>5. Tag <h1> sampai <h6>
Tag heading digunakan untuk membuat judul dan subjudul.
Contoh:
<h1>Belajar HTML</h1>
<h2>Materi Dasar</h2>
<h3>Tag HTML</h3>Gunakan heading secara berurutan agar struktur halaman lebih baik.
6. Tag <p>
Tag <p> digunakan untuk membuat paragraf.
Contoh:
<p>HTML adalah bahasa markup untuk membuat website.</p>Tag ini termasuk yang paling sering digunakan.
7. Tag <a>
Tag <a> berfungsi membuat tautan menuju halaman lain.
Contoh:
<a href="https://ngodingdaily.my.id">
Kunjungi Website
</a>Dengan tag ini, pengunjung dapat berpindah ke halaman lain melalui sebuah link.
8. Tag <img>
Tag <img> digunakan untuk menampilkan gambar.
Contoh:
<img src="gambar.jpg" alt="Belajar HTML">Jangan lupa menggunakan atribut alt agar gambar lebih ramah SEO dan aksesibilitas.
9. Tag <br>
Tag <br> digunakan untuk membuat baris baru.
Contoh:
Belajar HTML<br>
Belajar CSSTag ini tidak memerlukan penutup.
10. Tag <ul> dan <li>
Digunakan untuk membuat daftar tanpa nomor.
Contoh:
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>Daftar seperti ini memudahkan pembaca memahami informasi.
11. Tag <ol>
Jika ingin membuat daftar bernomor, gunakan tag <ol>.
Contoh:
<ol>
<li>Belajar HTML</li>
<li>Belajar CSS</li>
<li>Belajar JavaScript</li>
</ol>12. Tag <div>
Tag <div> digunakan sebagai wadah atau pembungkus beberapa elemen HTML.
Contoh:
<div>
<h2>Artikel</h2>
<p>Isi artikel.</p>
</div>Tag ini sangat sering digunakan dalam pengembangan website modern.
13. Tag <span>
Berbeda dengan <div>, tag <span> digunakan untuk membungkus teks tertentu.
Contoh:
<p>Belajar <span>HTML</span> itu mudah.</p>Biasanya digunakan bersama CSS.
14. Tag <form>
Tag <form> digunakan untuk membuat formulir.
Contoh:
<form>
<input type="text">
<button>Kirim</button>
</form>Form banyak digunakan pada halaman login, registrasi, maupun kontak.
15. Tag <button>
Tag <button> digunakan untuk membuat tombol.
Contoh:
<button>Login</button>Tombol dapat dikombinasikan dengan JavaScript agar memiliki fungsi tertentu.
Bonus: Tag HTML5 Semantik yang Sebaiknya Dipelajari
Selain 15 tag di atas, HTML5 juga memiliki elemen semantik yang membuat struktur website lebih jelas.
Beberapa di antaranya adalah:
<header><nav><main><section><article><aside><footer>
Tag-tag ini membantu browser dan mesin pencari memahami isi halaman dengan lebih baik.
Tips Menghafal Tag HTML dengan Cepat
Agar lebih mudah menguasai HTML, lakukan beberapa tips berikut:
- Praktik langsung setiap selesai mempelajari satu tag.
- Buat halaman website sederhana setiap hari.
- Jangan hanya membaca teori.
- Gunakan Visual Studio Code agar proses coding lebih nyaman.
- Pelajari fungsi setiap tag sebelum menghafalnya.
- Biasakan menulis kode secara rapi.
- Ulangi latihan secara konsisten.
Semakin sering Anda berlatih, semakin mudah mengingat fungsi setiap tag HTML.
Kesalahan yang Sering Dilakukan Pemula
Saat belajar HTML, beberapa kesalahan berikut masih sering dilakukan:
- Tidak menutup tag dengan benar.
- Menggunakan heading secara acak.
- Terlalu banyak menggunakan tag
<br>untuk mengatur jarak. - Tidak memberikan atribut alt pada gambar.
- Menulis kode tanpa indentasi.
- Menggunakan tag yang tidak sesuai fungsinya.
Menghindari kesalahan-kesalahan tersebut akan membuat kode Anda lebih profesional.
Kesimpulan
Menguasai 15 tag HTML yang harus dikuasai pemula merupakan langkah penting sebelum mempelajari CSS maupun JavaScript. Dengan memahami fungsi setiap tag, Anda dapat membuat struktur website yang rapi, mudah dipahami, dan sesuai dengan standar pengembangan web modern.
Jangan hanya menghafal nama tag, tetapi praktikkan langsung penggunaannya melalui proyek sederhana. Semakin sering Anda membuat halaman web, semakin cepat kemampuan coding Anda berkembang. Setelah menguasai tag-tag dasar ini, Anda akan lebih siap mempelajari teknologi web lainnya dan membangun website yang profesional.
FAQ
Apakah 15 tag HTML ini sudah cukup untuk pemula?
Ya. Kelima belas tag tersebut sudah mencakup kebutuhan dasar dalam membuat halaman website sederhana dan menjadi fondasi untuk mempelajari HTML lebih lanjut.
Tag HTML mana yang paling sering digunakan?
Beberapa tag yang paling sering digunakan adalah <html>, <head>, <body>, <h1>, <p>, <a>, <img>, <div>, dan <form>.
Apakah saya harus menghafal semua tag HTML?
Tidak. Yang terpenting adalah memahami fungsi setiap tag dan sering mempraktikkannya. Seiring waktu, Anda akan terbiasa tanpa perlu menghafal.
Kapan saya bisa mulai belajar CSS?
Setelah memahami struktur HTML dan fungsi tag-tag dasar, Anda dapat mulai mempelajari CSS untuk mempercantik tampilan website.
Apakah HTML masih relevan dipelajari saat ini?
Sangat relevan. HTML tetap menjadi dasar utama dalam pengembangan website dan digunakan bersama CSS, JavaScript, serta berbagai framework modern.
