Panduan Lengkap Belajar Tag Dasar HTML untuk Pemula

HTML (HyperText Markup Language) adalah bahasa dasar untuk membuat halaman web. Jika kamu ingin membuat blog, website pribadi, atau sekadar memahami bagaimana internet bekerja, memahami tag-tag dasar HTML adalah langkah pertama yang wajib dikuasai. Artikel ini akan membimbingmu secara lengkap, praktis, dan disertai contoh kode HTML yang bisa langsung digunakan di Blogger atau platform lain.

Daftar isi:

1. Apa Itu HTML?
2. Struktur Dasar Dokumen HTML
3. Tag Heading (H1–H6)
4. Tag Paragraf <p>
5. Tag Tautan <a>
6. Tag Gambar <img>
7. Tag Daftar (ul, ol, li)
8. Tag Format Teks (b, i, u, br)
9. Tag Formulir HTML
10. Tips HTML untuk SEO
11. Penutup

1. Apa Itu HTML?

HTML adalah singkatan dari HyperText Markup Language, yaitu bahasa standar yang digunakan untuk membuat halaman web. HTML terdiri dari elemen-elemen yang disebut "tag" untuk membentuk struktur dan isi halaman seperti teks, gambar, tautan, dan lain-lain.

2. Struktur Dasar Dokumen HTML

Setiap halaman HTML dimulai dengan struktur dasar berikut:

<!DOCTYPE html>

<html>

  <head>

    <title>Judul Halaman</title>

  </head>

  <body>

    Konten halaman ada di sini

  </body>

</html>

<!DOCTYPE html> menyatakan bahwa ini adalah dokumen HTML5
<html> adalah elemen utama yang membungkus seluruh isi halaman
<head> berisi metadata (judul, deskripsi, CSS)
<body> berisi semua konten yang tampil di browser

3. Tag Heading (H1–H6)

Heading digunakan untuk membuat judul atau subjudul. Tag heading memiliki enam level dari <h1> (terpenting) hingga <h6> (paling kecil).

<h1>Judul Utama</h1>

<h2>Subjudul</h2>

<h3>Sub-subjudul</h3>

4. Tag Paragraf <p>

Untuk membuat paragraf, gunakan tag <p>.

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

<p>Ini paragraf kedua.</p>

5. Tag Tautan <a>

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

Keterangan: target="_blank" membuka link di tab baru.

6. Tag Gambar <img>

<img src="https://example.com/gambar.jpg" alt="Deskripsi gambar" width="300">

Pastikan menggunakan atribut alt untuk SEO dan aksesibilitas.

7. Tag Daftar (ul, ol, li)

<ul>

  <li>Item 1</li>

  <li>Item 2</li>

</ul>

<ol>

  <li>Langkah 1</li>

  <li>Langkah 2</li>

</ol>

8. Tag Format Teks (b, i, u, br)

<p>Teks ini <b>tebal</b>, <i>miring</i>, dan <u>garis bawah</u>.</p>

<p>Baris pertama<br>Baris kedua</p>

9. Tag Formulir HTML

<form action="#" method="post">

  Nama: <input type="text" name="nama"><br>

  Email: <input type="email" name="email"><br>

  Pesan:<br>

  <textarea name="pesan" rows="4" cols="30"></textarea><br>

  <input type="submit" value="Kirim">

</form>

10. Tips HTML untuk SEO

Gunakan <h1> hanya sekali per halaman
Selalu isi alt untuk gambar
Gunakan struktur daftar & heading yang logis
Validasi kode dengan validator W3C

11. Penutup

Itulah panduan lengkap belajar tag dasar HTML. Dengan memahami tag-tag di atas, kamu sudah bisa mulai membuat halaman web sederhana dengan struktur yang benar. Latihan adalah kunci, jadi cobalah salin dan modifikasi contoh kode di atas sesuai kebutuhanmu. Selamat belajar dan terus bereksperimen!

Jangan lupa simpan artikel ini dan bagikan ke teman-temanmu yang juga ingin belajar HTML. Sampai jumpa di tutorial berikutnya! 🚀

Adi Prayitno