Saat mulai belajar membuat website, salah satu hal pertama yang perlu dipahami adalah berbagai tag HTML. Tag inilah yang menjadi fondasi dalam menyusun struktur halaman web. Tanpa memahami tag HTML, Anda akan kesulitan membuat tampilan website yang rapi dan mudah dikembangkan.
Dalam artikel ini, kita akan membahas 15 tag HTML yang harus dikuasai pemula, lengkap dengan fungsi, contoh penggunaan, serta tips agar Anda lebih mudah memahaminya. Dengan menguasai tag-tag dasar ini, Anda akan memiliki pondasi yang kuat sebelum melanjutkan ke CSS, JavaScript, atau framework modern.
Apa Itu Tag HTML?
Tag HTML adalah elemen yang digunakan untuk memberi tahu browser bagaimana suatu konten harus ditampilkan. Hampir semua tag memiliki tag pembuka dan tag penutup.
Contoh sederhana:
<p>Halo, saya sedang belajar HTML.</p>Pada contoh di atas, <p> adalah tag pembuka dan </p> adalah tag penutup yang digunakan untuk membuat sebuah paragraf.
Mengapa Pemula Harus Menguasai Tag HTML?
Menguasai tag HTML memberikan banyak manfaat, di antaranya:
- Memahami struktur dasar website.
- Membuat kode lebih rapi dan mudah dibaca.
- Mempermudah belajar CSS dan JavaScript.
- Membantu membuat website yang lebih ramah SEO.
- Memudahkan kerja sama dengan developer lain.
Semakin baik Anda memahami HTML, semakin mudah pula proses belajar teknologi web lainnya.
1. Tag <html>
Tag <html> merupakan pembungkus seluruh isi dokumen HTML.
Contoh:
<html lang="id">
</html>Tag ini wajib ada pada setiap file HTML karena menjadi elemen utama sebuah halaman web.
2. Tag <head>
Tag <head> berisi informasi yang dibutuhkan browser tetapi tidak langsung terlihat oleh pengunjung.
Contohnya meliputi:
- Judul halaman
- Metadata
- Link CSS
- Favicon
Contoh:
<head>
<title>Belajar HTML</title>
</head>3. Tag <title>
Tag <title> menentukan judul halaman yang muncul pada tab browser.
<title>Belajar HTML Dasar</title>Selain memperjelas isi halaman, judul juga berpengaruh terhadap SEO.
4. Tag <body>
Semua konten yang dilihat pengunjung berada di dalam tag <body>.
<body>
<h1>Selamat Datang</h1>
<p>Ini halaman pertama saya.</p>
</body>5. Tag <h1> sampai <h6>
Heading digunakan untuk membuat judul dan subjudul.
<h1>Belajar HTML</h1>
<h2>Materi Dasar</h2>
<h3>Mengenal Tag HTML</h3>Gunakan heading secara berurutan agar struktur halaman tetap rapi.
6. Tag <p>
Tag <p> digunakan untuk membuat paragraf.
<p>HTML adalah bahasa markup untuk membuat struktur website.</p>Tag ini hampir selalu digunakan dalam setiap halaman web.
7. Tag <a>
Tag <a> digunakan untuk membuat hyperlink.
<a href="https://ngodingdaily.my.id">
Belajar Coding
</a>Melalui tag ini, pengguna dapat berpindah ke halaman lain atau website lain.
8. Tag <img>
Tag <img> digunakan untuk menampilkan gambar.
<img src="html.png" alt="Belajar HTML">Selalu gunakan atribut alt agar gambar lebih mudah dipahami mesin pencari dan pembaca layar.
9. Tag <div>
Tag <div> berfungsi sebagai wadah untuk mengelompokkan beberapa elemen HTML.
<div>
<h2>Artikel</h2>
<p>Isi artikel.</p>
</div>Tag ini sering digunakan saat mengatur layout halaman bersama CSS.
10. Tag <span>
Jika <div> digunakan untuk elemen blok, maka <span> digunakan untuk elemen sebaris (inline).
<p>Belajar <span>HTML</span> itu menyenangkan.</p>Biasanya digunakan untuk memberi gaya khusus pada sebagian teks.
11. Tag <ul> dan <li>
Digunakan untuk membuat daftar tanpa nomor.
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>Daftar membantu menyajikan informasi agar lebih mudah dibaca.
12. Tag <ol>
Tag <ol> digunakan untuk membuat daftar yang memiliki nomor urut.
<ol>
<li>Belajar HTML</li>
<li>Belajar CSS</li>
<li>Belajar JavaScript</li>
</ol>Sangat cocok digunakan untuk tutorial langkah demi langkah.
13. Tag <table>
Tag <table> digunakan untuk menampilkan data dalam bentuk tabel.
<table>
<tr>
<th>Nama</th>
<th>Usia</th>
</tr>
<tr>
<td>Andi</td>
<td>18</td>
</tr>
</table>Gunakan tabel hanya untuk data, bukan untuk mengatur tata letak halaman.
14. Tag <form>
Tag <form> digunakan untuk membuat formulir.
<form>
<input type="text">
<button>Kirim</button>
</form>Form sering digunakan pada halaman login, registrasi, atau kontak.
15. Tag <button>
Tag <button> digunakan untuk membuat tombol yang dapat diklik.
<button>Daftar</button>Tombol dapat dikombinasikan dengan JavaScript untuk menjalankan berbagai fungsi.
Bonus: Kenali Tag HTML5 Semantik
Selain tag dasar di atas, Anda juga sebaiknya mengenal elemen semantik HTML5 seperti:
<header><nav><main><section><article><aside><footer>
Tag-tag tersebut membantu membuat struktur halaman lebih jelas dan lebih ramah SEO.
Tips Cepat Menguasai Tag HTML
Agar proses belajar lebih efektif, lakukan beberapa tips berikut:
- Praktikkan setiap tag setelah mempelajarinya.
- Buat proyek sederhana seperti halaman profil atau biodata.
- Gunakan editor seperti Visual Studio Code.
- Hindari hanya menghafal, tetapi pahami fungsi setiap tag.
- Biasakan menulis kode dengan indentasi yang rapi.
- Pelajari dokumentasi resmi HTML untuk menambah wawasan.
Dengan latihan yang konsisten, Anda akan semakin terbiasa menggunakan berbagai tag HTML.
Kesalahan yang Sering Dilakukan Pemula
Saat belajar HTML, beberapa kesalahan berikut masih sering ditemukan:
- Tidak menutup tag dengan benar.
- Menggunakan heading secara acak.
- Terlalu sering memakai tag
<br>untuk mengatur jarak. - Tidak mengisi atribut alt pada gambar.
- Menyusun kode tanpa indentasi.
- Menggunakan tag yang tidak sesuai dengan fungsinya.
Menghindari kesalahan-kesalahan tersebut akan membuat kode Anda lebih bersih dan mudah dipelihara.
Kesimpulan
Menguasai 15 Tag HTML yang Harus Dikuasai Pemula merupakan langkah penting bagi siapa saja yang ingin belajar membuat website. Tag-tag dasar seperti <html>, <head>, <body>, <h1>, <p>, <a>, hingga <form> akan menjadi fondasi dalam setiap proyek web yang Anda kerjakan.
Jangan hanya membaca teori, tetapi praktikkan setiap tag dengan membuat halaman web sederhana. Semakin sering Anda berlatih, semakin cepat Anda memahami cara kerja HTML dan siap melanjutkan ke materi CSS, JavaScript, hingga framework web modern.
FAQ
Berapa banyak tag HTML yang perlu dipelajari pemula?
Pemula tidak perlu menghafal semua tag HTML. Mulailah dengan tag-tag dasar yang paling sering digunakan, seperti yang dibahas dalam artikel ini.
Apakah HTML masih penting dipelajari?
Ya. HTML tetap menjadi fondasi utama dalam pengembangan website dan digunakan hampir di semua teknologi web modern.
Apa tag HTML yang paling sering digunakan?
Beberapa tag yang paling sering digunakan adalah <html>, <head>, <body>, <h1>, <p>, <a>, <img>, <div>, dan <form>.
Apakah saya harus menguasai HTML sebelum belajar CSS?
Sebaiknya iya. HTML digunakan untuk menyusun struktur halaman, sedangkan CSS berfungsi mengatur tampilannya.
Bagaimana cara cepat menguasai HTML?
Belajar sedikit demi sedikit, praktik setiap materi, buat proyek sederhana, dan biasakan menulis kode setiap hari agar lebih cepat memahami penggunaan tag HTML.
