Memahami Tag HTML: Sintaks Dasar yang Membentuk Struktur Halaman Web
Kalau HTML adalah fondasi web, maka tag HTML adalah batu batanya. Semua halaman web dibangun dari tag. Judul, paragraf, gambar, link, daftar, tabel — semuanya dibungkus dan didefinisikan menggunakan tag. Di tahap ini kamu tidak lagi sekadar menjalankan file HTML, tapi mulai benar-benar memahami bagaimana struktur halaman dibentuk dari dalam.
Di artikel ini kita akan membahas apa itu tag HTML, bagaimana cara membacanya, bagaimana cara menulisnya dengan benar, dan bagaimana tag membentuk struktur yang bisa dipahami browser. Fokusnya tetap praktik — setiap konsep langsung diikuti contoh kode.
Apa Itu Tag HTML?
Tag HTML adalah penanda yang memberi arti pada sebuah bagian konten. Browser tidak hanya menampilkan teks — browser membaca tag untuk memahami peran teks tersebut.
Contoh sederhana:
<p>Ini paragraf.</p>
Tag <p> memberi tahu browser bahwa teks di dalamnya adalah paragraf. Tanpa tag, teks hanya dianggap konten polos tanpa struktur.
Sebagian besar tag HTML punya pasangan:
- tag pembuka
- tag penutup
Strukturnya:
<tag>isi</tag>
Contoh:
<h1>Judul Utama</h1>
Struktur Dasar Tag: Pembuka dan Penutup
Mari lihat contoh lebih jelas.
<h2>Belajar Tag HTML</h2>
Bagian-bagiannya:
<h2>= tag pembukaBelajar Tag HTML= isi</h2>= tag penutup
Tanda garis miring di tag penutup itu wajib. Kalau hilang, struktur bisa rusak.
Contoh salah:
<h2>Judul <p>Paragraf</p>
Browser kadang masih menampilkan, tapi strukturnya tidak valid. Biasakan selalu menutup tag.
Tag Bersarang (Nested Tags)
Tag HTML bisa berada di dalam tag lain. Ini disebut nested.
Contoh:
<p>Ini <strong>teks penting</strong> di dalam paragraf.</p>
Di sini:
<p>adalah tag luar<strong>adalah tag di dalamnya
Aturan penting: penutup harus berurutan terbalik.
Benar:
<p><strong>Teks</strong></p>
Salah:
<p><strong>Teks</p></strong>
Editor modern biasanya langsung menandai kesalahan ini.
Tag Tanpa Penutup (Self-Closing)
Tidak semua tag punya pasangan penutup. Beberapa tag berdiri sendiri.
Contoh paling umum:
<br> <hr> <img>
Contoh pemakaian:
<p>Baris satu<br>Baris dua</p>
<hr>
Garis horizontal akan muncul tanpa perlu tag penutup.
Mengenal Atribut pada Tag
Tag HTML bisa memiliki atribut. Atribut memberi informasi tambahan.
Struktur:
<tag nama="nilai">
Contoh:
<a href="https://example.com">Kunjungi Situs</a>
Di sini:
hrefadalah atribut- nilainya adalah alamat tujuan link
Contoh lain:
<img src="gambar.jpg" alt="contoh gambar">
Atribut sangat penting dan akan sering dipakai di hampir semua elemen HTML.
Contoh Struktur HTML dengan Banyak Tag
Mari lihat contoh halaman kecil dengan berbagai tag sekaligus.
<!DOCTYPE html>
<html>
<head>
<title>Latihan Tag HTML</title>
</head>
<body>
<h1>Belajar Tag HTML</h1>
<p>HTML menggunakan <strong>tag</strong> untuk memberi struktur.</p>
<h2>Contoh List</h2>
<ul>
<li>Heading</li>
<li>Paragraf</li>
<li>List</li>
</ul>
<p>Kunjungi <a href="https://example.com">website ini</a></p>
<hr>
<p>Selesai.</p>
</body>
</html>
Coba ketik ulang di editor, jalankan dengan Live Server, lalu perhatikan bagaimana setiap tag memengaruhi tampilan.
Tag Bukan untuk Tampilan, Tapi Makna
Kesalahan umum pemula adalah menganggap tag hanya mengubah tampilan. Padahal fungsi utamanya memberi makna struktur. Tampilan visual nanti diatur oleh CSS. HTML bertugas memberi arti: ini judul, ini paragraf, ini daftar, ini tautan.
Memahami peran ini sejak awal akan membuat langkah ke CSS dan SEO jauh lebih mudah.
Latihan Mandiri yang Disarankan
Supaya pemahaman tag HTML benar-benar masuk, coba latihan berikut:
- buat 1 file HTML
- isi dengan minimal 5 jenis tag berbeda
- buat nested tag
- pakai minimal 2 atribut
- jalankan di browser
- ubah dan lihat hasilnya
Belajar HTML paling cepat lewat eksperimen langsung.
Langkah Berikutnya
Sekarang kamu sudah memahami apa itu tag, cara membuka–menutupnya, cara menyusun nested tag, dan cara memakai atribut dasar. Di artikel berikutnya kita akan fokus ke elemen teks paling sering dipakai: paragraf dan pengaturan teks di HTML. Dari sana struktur konten mulai terasa lebih nyata dan terkontrol
