Tag HTML adalah elemen-elemen pembentuk halaman web yang dituliskan dalam tanda kurung sudut (<>). Setiap tag memiliki fungsi tertentu untuk menentukan bagaimana konten ditampilkan di browser.
📌 Fungsi Tag HTML
- Memberi struktur pada konten halaman web
- Menentukan jenis elemen seperti judul, paragraf, gambar, tautan, dan lainnya
- Membantu browser memahami dan menampilkan konten dengan benar
🧱 Contoh Tag HTML Dasar
Berikut adalah beberapa tag HTML dasar yang sering digunakan:
<h1>sampai<h6>- Untuk judul<p>- Untuk paragraf<a>- Untuk tautan<img>- Untuk menampilkan gambar<ul>dan<ol>- Untuk daftar<table>- Untuk membuat tabel
📄 Contoh Kode HTML dengan Tag Dasar
Perhatikan kode berikut yang menggunakan berbagai tag dasar HTML:
<!DOCTYPE html>
<html>
<head>
<title>Contoh Tag Dasar</title>
</head>
<body>
<h1>Selamat Datang</h1>
<p>Ini adalah paragraf pertama.</p>
<a href="https://www.google.com">Kunjungi Google</a>
<br>
<img src="https://via.placeholder.com/150" alt="Contoh Gambar">
</body>
</html>
🔄 Coba Jalankan:
🎯 Inti Pembelajaran
- Tag HTML selalu ditulis dalam tanda kurung sudut seperti
<p>dan</p> - Beberapa tag memiliki pasangan pembuka dan penutup, contoh:
<h1>...</h1> - Beberapa tag bersifat tunggal, seperti
<br>dan<img>
🧪 Latihan Interaktif
Silakan ubah teks di bawah ini dan klik "Jalankan" untuk melihat hasilnya:
📝 Tugas Praktik Mandiri
- Buka teks editor di komputer kamu (Notepad, VSCode, dll)
- Buat file baru dan beri nama
tag-dasar.html - Salin dan modifikasi kode HTML yang telah dipelajari
- Simpan file lalu buka di browser
- Tambahkan tag baru seperti
<ul>,<img>, dan<a>
Bonus: Buat daftar hobi kamu dalam bentuk daftar HTML!
📄 Daftar Struktur HTML dan Fungsinya
| Tag HTML | Fungsi | Contoh Penggunaan |
|---|---|---|
<!DOCTYPE html> |
Menentukan jenis dokumen HTML (HTML5). | <!DOCTYPE html> |
<html> |
Elemen root yang membungkus seluruh halaman HTML. | <html lang="id"> ... </html> |
<head> |
Menyimpan metadata, judul halaman, dan link CSS/JS. | <head><title>Judul</title></head> |
<title> |
Menentukan judul halaman di tab browser. | <title>Belajar HTML</title> |
<meta> |
Informasi tambahan (charset, viewport, SEO). | <meta charset="UTF-8"> |
<body> |
Menyimpan semua konten yang ditampilkan di halaman. | <body>...</body> |
<h1> - <h6> |
Menandai judul dari besar ke kecil. | <h1>Judul Utama</h1> |
<p> |
Menampilkan teks dalam paragraf. | <p>Ini paragraf</p> |
<a> |
Membuat hyperlink. | <a href="https://example.com">Klik</a> |
<img> |
Menampilkan gambar. | <img src="foto.jpg" alt="Deskripsi"> |
<ul><li> |
Membuat daftar tidak berurutan (bullet list). | <ul><li>Item</li></ul> |
<ol><li> |
Membuat daftar berurutan (angka). | <ol><li>Langkah 1</li></ol> |
<table> |
Menyusun data dalam tabel. | <table><tr><td>Data</td></tr></table> |
<form> |
Membuat formulir input pengguna. | <form action="proses.php">...</form> |
<input> |
Membuat kolom input (teks, tombol, dll). | <input type="text" name="nama"> |
<div> |
Membuat blok kontainer. | <div>Konten</div> |
<span> |
Mengelompokkan teks dalam satu baris. | <span>Highlight</span> |
<header> |
Bagian kepala halaman (logo/judul). | <header>Judul Website</header> |
<nav> |
Bagian navigasi/menu link. | <nav><a href="#">Home</a></nav> |
<main> |
Konten utama halaman. | <main>Konten Utama</main> |
<section> |
Membagi konten menjadi bagian tertentu. | <section>Artikel Terbaru</section> |
<article> |
Mendefinisikan artikel/konten mandiri. | <article>Berita</article> |
<aside> |
Konten samping (sidebar/info tambahan). | <aside>Widget</aside> |
<footer> |
Bagian kaki halaman (hak cipta/kontak). | <footer>© 2025 Zero Computer</footer> |