Panduan Lengkap Kode Tag HTML untuk Pemula

Adam Muiz

Diperbarui: 26 Jun, 2025 • 0 • menit membaca

Daftar Isi

HTML atau HyperText Markup Language adalah bahasa dasar yang digunakan untuk membangun struktur halaman web. Dalam HTML, elemen atau tag digunakan untuk menandai dan menyusun isi halaman seperti teks, gambar, link, form, dan elemen lainnya.

Panduan Lengkap Kode Tag HTML untuk Pemula

Tag HTML bekerja dalam bentuk pasangan, seperti <p> untuk paragraf, yang biasanya memiliki tag pembuka dan penutup: <p>Ini paragraf</p>. Jadi paragraf yang aku tulis sekarang ini dan bisa kamu lihat merupakan dari penggunaan Tag HTML <p>tulisan</p>.

Struktur Dasar HTML

Struktur halaman HTML minimal biasanya seperti ini:

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

Kategori Tag HTML Berdasarkan Fungsinya

Tag HTML memiliki kategori atau kelompok berdasarkan tujuan penggunaannya. Berikut penjelasan tiap kelompok tag utama.

1. Struktur Dokumen

<!DOCTYPE> – Mendefinisikan versi HTML
<html> – Elemen utama seluruh dokumen
<head> – Berisi metadata dan skrip
<body> – Konten utama yang tampil di browser

2. Heading dan Teks

<h1> sampai <h6> – Judul dengan hierarki
<p> – Paragraf
<br> – Baris baru
<hr> – Garis horizontal

3. Formatting Inline

<strong>, <b> – Teks tebal
<em>, <i> – Teks miring
<mark> – Menyoroti teks
<span> – Pembungkus tanpa makna khusus

4. Gambar dan Media

<img> – Menampilkan gambar
<audio> dan <video> – Menyisipkan media
<source> – Sumber alternatif media

5. Hyperlink dan Navigasi

<a> – Membuat tautan
<nav> – Kontainer navigasi

6. List (Daftar)

<ul> – Daftar tak berurutan
<ol> – Daftar bernomor
<li> – Item daftar

7. Table (Tabel)

<table> – Tabel utama
<tr> – Baris
<td> – Sel data
<th> – Sel judul

8. Formulir

<form> – Form utama
<input>, <textarea>, <select>, <button> – Elemen input

9. Tag Semantik HTML5

<header>, <footer>, <main>, <section>, <article>, <aside>
Membantu struktur dan SEO

Tabel Ringkasan Tag HTML Populer

Tag	Fungsi	Wajib Tutup?
<p>	Paragraf	Ya
<br>	Baris baru	Tidak
<img>	Menampilkan gambar	Tidak
<a>	Tautan	Ya
<table>	Tabel data	Ya

Tag-Tag yang Sering Digunakan Sehari-Hari

Bagi pemula atau bahkan developer berpengalaman, berikut adalah daftar tag yang sering digunakan dalam proyek nyata:

<div> – pembungkus layout
<span> – styling inline
<a> – navigasi/link
<img> – konten visual
<h1>-<h3> – penanda struktur konten
<form>, <input> – untuk formulir kontak, login, dsb

Mengenal Atribut dan Value dalam Tag HTML

Selain struktur tag seperti <p> atau <h1>, elemen HTML juga dapat dilengkapi dengan atribut. Atribut ini memberikan informasi tambahan atau pengaturan tertentu pada elemen.

Apa Itu Atribut?

Atribut adalah bagian dari HTML yang ditulis dalam tag pembuka dan berfungsi untuk memberi properti atau konfigurasi pada tag tersebut.

Bentuknya:

<tag atribut="nilai">Konten</tag>

Apa Itu Value (Nilai)?

Value adalah isi dari atribut tersebut, yang menentukan nilai atau konfigurasi tertentu. Biasanya ditulis di dalam tanda kutip ganda "...".

Contoh lengkap:

<a href="https://www.adammuiz.com" target="_blank">Kunjungi Situs</a>

Penjelasan:

href adalah atribut yang menunjukkan alamat tautan
"https://www.adammuiz.com" adalah value dari atribut href
target="_blank" adalah atribut lain untuk membuka link di tab baru

Contoh Umum Atribut HTML dan Fungsinya

Tag	Atribut	Value	Fungsi
<a>	href	"https://..."	Menentukan tujuan link
<a>	target	"_blank"	Buka link di tab baru
<img>	src	"gambar.jpg"	Menentukan sumber gambar
<img>	alt	"deskripsi"	Deskripsi alternatif gambar
<input>	type	"text" / "email" / "password"	Jenis input yang diminta
<form>	action	"tujuan.php"	Alamat file yang memproses form
<table>	border	"1", "0"	Menentukan ketebalan garis (deprecated, sebaiknya pakai CSS)

Atribut Global: Bisa Digunakan di Banyak Tag

HTML memiliki sejumlah atribut yang bisa digunakan pada hampir semua elemen.

id – Memberikan identitas unik
class – Mengelompokkan elemen (berguna untuk CSS)
style – Memberi gaya langsung (inline CSS)
title – Teks yang muncul saat cursor diarahkan
hidden – Menyembunyikan elemen
data-* – Atribut khusus untuk data custom (digunakan di JavaScript)

Contoh Kombinasi Atribut dalam HTML

<img 
  src="dewa.png" 
  alt="Potret Dewa Web" 
  width="200" 
  height="200" 
  style="border: 2px solid gold;" 
/>

Penjelasan:

src: sumber file gambar
alt: deskripsi gambar jika gagal dimuat
width dan height: ukuran gambar
style: menambahkan CSS langsung

Catatan Tentang Atribut Lama (Deprecated)

Beberapa atribut seperti border, bgcolor, dan align masih bisa digunakan, tapi sudah dianggap usang dan sebaiknya diganti dengan CSS modern.

<table border="1" bgcolor="#eee">...</table>  <!-- deprecated -->
<table style="border:1px solid #000; background-color:#eee;">...</table> <!-- disarankan -->

Atribut Adalah Senjata Penting dalam HTML

Memahami tag HTML saja tidak cukup tanpa memahami atribut dan value-nya. Dengan atribut, kamu bisa:

Mengarahkan link ke tujuan tertentu
Memuat gambar dari sumber luar
Mengontrol tampilan dasar dan struktur
Membuat form yang dinamis dan responsif

Atribut adalah jembatan antara struktur dan interaktivitas. Bahkan dengan WordPress dan Elementor, banyak elemen memiliki atribut di baliknya yang bisa kamu kontrol untuk hasil lebih maksimal.

Tips Menghafal dan Menggunakan Tag HTML

Gunakan Visual Studio Code + Live Server

Editor ini sangat membantu menampilkan perubahan real-time, dan memberi saran tag saat mengetik.

Latihan dengan Mini Proyek

Buat halaman CV sederhana
Bangun galeri gambar
Formulir kontak sederhana

Gunakan Cheat Sheet

Cetak atau bookmark cheat sheet HTML agar kamu cepat mengingat dan menemukan tag yang dibutuhkan.

Apakah Harus Hafal Semua Tag HTML?

Jawabannya: tidak. Bahkan developer profesional tidak menghafal semuanya. Yang penting adalah:

Memahami logika struktur HTML
Mengetahui tag utama dan kapan digunakan
Mampu mencari tag atau syntax yang dibutuhkan dengan cepat (Google, MDN)

Penutup

HTML adalah bahasa paling dasar namun paling penting dalam dunia web. Tanpa tag, tidak akan ada struktur. Dan tanpa struktur, tidak akan ada web yang bisa digunakan.

Meski kamu bisa membangun web dengan WordPress dan Elementor, memahami HTML tetap memperkuat fondasi pemahamanmu dan membuka jalan ke level lebih tinggi seperti CSS, JavaScript, dan React.

Adam Blog