Panduan Lengkap Belajar Tag Dasar HTML untuk Pemula

Daftar Isi
Belajar Tag Dasar HTML


HTML adalah fondasi utama dalam pembuatan website. Jika kamu ingin serius belajar web development, maka memahami tag dasar HTML adalah langkah awal yang tidak bisa dilewati. Artikel ini akan membahas secara lengkap, bertahap, dan mudah dipahami tentang tag dasar HTML untuk pemula, lengkap dengan contoh kode dan penjelasan fungsinya.

Sebelum masuk lebih jauh, jika kamu masih benar-benar baru, sebaiknya pahami dulu apa itu HTML, pengertian, fungsi, dan cara kerjanya agar alurnya lebih nyambung.

Apa Itu Tag HTML?

Tag HTML adalah perintah atau penanda khusus yang digunakan untuk memberitahu browser bagaimana sebuah konten harus ditampilkan. Tag ditulis menggunakan tanda kurung sudut < > dan biasanya berpasangan antara tag pembuka dan tag penutup.

<p>Ini adalah paragraf</p>

Pada contoh di atas, <p> adalah tag pembuka dan </p> adalah tag penutup.

Struktur Dasar Dokumen HTML

Sebelum membahas tag satu per satu, kamu perlu memahami struktur dasar HTML. Struktur ini wajib ada agar dokumen HTML valid.

<!DOCTYPE html>
<html>
  <head>
    <title>Judul Halaman</title>
  </head>
  <body>
    <h1>Halo Dunia</h1>
    <p>Ini paragraf pertama</p>
  </body>
</html>

Panduan detail tentang struktur dokumen bisa kamu pelajari di cara membuat dokumen HTML untuk pemula.

Daftar Tag Dasar HTML yang Wajib Dipahami

Berikut adalah tag HTML dasar yang paling sering digunakan dan wajib dikuasai oleh pemula.

1. Tag Heading (<h1> – <h6>)

Tag heading digunakan untuk judul dan subjudul. Urutannya dari <h1> (paling penting) hingga <h6> (paling kecil).

<h1>Judul Utama</h1>
<h2>Sub Judul</h2>
<h3>Judul Bagian</h3>

Penggunaan heading yang benar sangat berpengaruh pada SEO. Pembahasan lengkapnya ada di panduan lengkap HTML headings H1–H6.

2. Tag Paragraf (<p>)

Tag <p> digunakan untuk membuat paragraf teks.

<p>Ini adalah paragraf HTML.</p>

Pembahasan lanjutan bisa kamu baca di panduan belajar paragraf HTML.

3. Tag Break dan Garis (<br> dan <hr>)

Tag <br> digunakan untuk pindah baris, sedangkan <hr> untuk membuat garis horizontal.

Baris pertama<br>
Baris kedua

<hr>

4. Tag Teks Dasar

HTML menyediakan tag untuk memformat teks:

  • <strong> → teks tebal (penting)
  • <em> → teks miring
  • <u> → garis bawah
<strong>Teks Penting</strong>
<em>Teks Miring</em>

Untuk pembahasan lebih lengkap, silakan baca belajar pemformatan teks HTML.

5. Tag Link (<a>)

Tag <a> digunakan untuk membuat hyperlink.

<a href="https://example.com">Kunjungi Website</a>

Internal link seperti ini sangat penting untuk SEO dan struktur website.

6. Tag Gambar (<img>)

Tag <img> digunakan untuk menampilkan gambar.

<img src="gambar.jpg" alt="Deskripsi gambar">

Pelajari juga penggunaan media lain di cara menggunakan media pada HTML.

7. Tag Daftar (<ul>, <ol>, <li>)

HTML menyediakan daftar tidak berurutan dan berurutan.

<ul>
  <li>HTML</li>
  <li>CSS</li>
</ul>

Panduan lengkapnya ada di cara membuat daftar dengan HTML.

Perbedaan Tag, Elemen, dan Atribut HTML

Banyak pemula bingung dengan istilah ini:

  • Tag → penanda HTML
  • Elemen → tag + isi
  • Atribut → informasi tambahan

Pelajari lebih lanjut di:

Kesalahan Umum Pemula Saat Menggunakan Tag HTML

  • Tidak menutup tag
  • Salah urutan heading
  • Menggunakan tag hanya untuk tampilan

Jika kamu sering error, baca panduan cara memperbaiki kesalahan pada HTML.

Langkah Selanjutnya Setelah Menguasai Tag Dasar HTML

Setelah memahami tag dasar HTML, langkah berikutnya adalah:

Kesimpulan

Tag dasar HTML adalah fondasi utama dalam membangun website. Dengan memahami struktur dokumen, jenis tag, serta fungsinya, kamu sudah memiliki bekal kuat untuk melangkah ke tahap web development berikutnya.

Jika kamu ingin belajar dari nol hingga bisa membuat website sendiri, lanjutkan ke panduan belajar web dari nol sampai jadi.