Tag dan Elemen HTML
Pelajari apa itu tag dan elemen serta cara kerjanya.
Tag dan Elemen HTML adalah pelajaran HTML for Kids gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML for Kids, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML for Kids mencakup 4 pelajaran total.
Tag dan Elemen HTML
Selamat datang di pelajaran berikutnya! Hari ini, kita akan mempelajari tag dan elemen HTML. Keduanya merupakan blok penyusun setiap halaman web yang akan Anda buat.
Apa Itu Tag HTML?
Tag HTML adalah kata kunci khusus yang diapit tanda kurung sudut <>. Tag memberi tahu peramban apa yang harus dilakukan terhadap konten di dalamnya.
Contoh tag:<h1>
Tag biasanya hadir berpasangan: tag pembuka dan tag penutup.
Contoh:
<h1>Hello</h1>Apa Itu Elemen HTML?
Elemen HTML adalah gabungan tag pembuka, konten, dan tag penutup.
Contohnya:
<h1>Welcome to My Page</h1>Jenis-Jenis Tag
Ada dua jenis tag utama:
- Tag Berpasangan: Memiliki tag pembuka dan tag penutup. Contoh:
<p>Paragraph</p> - Tag Mandiri: Tidak memerlukan tag penutup. Contoh:
<img />
Tag yang Umum Digunakan
Berikut beberapa tag HTML dasar yang akan sering Anda gunakan:
<h1> to <h6>: Judul, dari terbesar hingga terkecil<p>: Paragraf<a>: Tautan<img>: Gambar<br>: Jeda baris
Mari kita lihat contohnya:
<h1>Welcome!</h1>
<p>This is a paragraph of text.</p>
<a href="https://example.com">Click here</a>
<img src="image.jpg" alt="An example image" />
<br />Atribut dalam Tag
Atribut memberikan informasi tambahan tentang sebuah elemen. Atribut diletakkan di dalam tag pembuka.
Contoh:
<a href="https://example.com"
target="_blank">Visit Example</a>
Penyusunan Tag Bersarang
Anda dapat menempatkan satu tag di dalam tag lainnya. Hal ini disebut penyusunan bersarang.
Contoh:
<p>This is a <strong>bold</strong> word.</p>
Urutan Penutupan Tag Bersarang
Ingat: Selalu tutup tag bagian dalam sebelum menutup tag bagian luar.
Contoh: Menggabungkan Semuanya
Berikut contoh yang menggabungkan semua hal yang telah kita pelajari:
<!DOCTYPE html>
<html>
<head>
<title>My HTML Example</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a <strong>simple</strong> paragraph of text.</p>
<a href="https://example.com" target="_blank">Click here to learn more</a>
<br />
<img src="image.jpg" alt="A beautiful view" />
</body>
</html>Kerja Bagus!
Selamat! Anda telah mempelajari tag, elemen, atribut, dan penyusunan bersarang dalam HTML. Semua ini merupakan blok penyusun setiap halaman web yang akan Anda buat. Pada pelajaran berikutnya, kita akan menulis halaman HTML pertama Anda dengan konten nyata!
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Tag dan Elemen HTML” gratis?
Ya — teks lengkap “Tag dan Elemen HTML” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML for Kids, upgrade ke CoddyKit PRO. Kursus HTML for Kids mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Tag dan Elemen HTML”?
Pelajari apa itu tag dan elemen serta cara kerjanya. Kamu berlatih HTML for Kids dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai HTML for Kids?
Tidak diperlukan pengalaman sebelumnya. HTML for Kids di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.
Berapa lama pelajaran “Tag dan Elemen HTML” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML for Kids ini?
Ya. Setiap pelajaran HTML for Kids menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.