Struktur Dokumen: DOCTYPE html head body
Tuliskan dokumen HTML5 yang valid dari awal: deklarasi DOCTYPE, akar html, head untuk metadata, dan body untuk konten.
Struktur Dokumen: DOCTYPE html head body adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 1 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 Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.
Setiap Dokumen HTML Memiliki Kerangka yang Sama
Dokumen HTML5 yang valid selalu diawali deklarasi DOCTYPE, memiliki elemen akar html, dan di dalamnya terdapat bagian head untuk metadata serta bagian body untuk konten yang terlihat. Memahami struktur ini adalah langkah nol.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Page</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>Deklarasi DOCTYPE
<!DOCTYPE html> bukan tag HTML — ini adalah instruksi kepada peramban untuk merender halaman dalam mode standar. Tanpanya, peramban beralih ke "mode quirks", yang merender halaman secara tidak konsisten. Selalu letakkan deklarasi ini di baris 1.
Elemen <html> dan Atribut lang
Elemen <html> adalah akar dokumen. Tambahkan atribut lang untuk menyatakan bahasa halaman. Pembaca layar menggunakannya untuk memilih mesin pelafalan yang tepat, dan mesin telusur menggunakannya untuk menampilkan hasil yang dilokalkan.
<html lang="en">
<!-- or -->
<html lang="fr">
<html lang="de">Elemen <head>
Tag Meta charset dan viewport
<meta charset="UTF-8"> memberi tahu peramban untuk mendekode berkas sebagai UTF-8 sehingga semua karakter internasional dapat didukung. <meta name="viewport"> membuat desain responsif berfungsi di perangkat seluler.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">Elemen <title>
Teks <title> muncul di tab peramban, marka buku, dan hasil mesin telusur. Buatlah teks yang singkat (50–60 karakter), deskriptif, dan sertakan nama merek di bagian akhir.
<title>Getting Started with HTML | CoddyKit</title>Menghubungkan CSS dan Font
Hubungkan lembar gaya eksternal dengan <link> di dalam head. Gunakan rel="stylesheet" dan href yang tepat. Google Fonts dan layanan font lainnya juga dihubungkan dengan cara ini.
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">Elemen <body>
Segala sesuatu yang terlihat di halaman berada di dalam <body>: judul, paragraf, gambar, tombol, formulir, dan skrip. Body adalah bagian yang dilihat dan digunakan pengguna.
Tag Skrip: Tempat Menempatkannya
Tempatkan <script src="app.js" defer></script> di dalam <head>. Atribut defer mengunduh skrip secara paralel dan mengeksekusinya setelah HTML selesai diuraikan sepenuhnya, sehingga menjadi pilihan bawaan yang paling aman.
<head>
<script src="app.js" defer></script>
</head>Komentar dalam HTML
Gunakan <!-- comment --> untuk menambahkan catatan ke HTML Anda. Komentar tidak ditampilkan kepada pengguna, tetapi terlihat dalam tampilan sumber. Gunakan komentar untuk menjelaskan maksud, menandai bagian, atau menonaktifkan kode sementara selama penelusuran kesalahan.
<!-- Navigation section -->
<nav>
...
</nav>
<!-- End navigation -->Validasi: Validator W3C
Tempelkan HTML Anda ke validator.w3.org untuk memeriksa kesalahan. HTML yang valid mengurangi ketidakkonsistenan lintas peramban, membantu pembaca layar menguraikan halaman dengan benar, dan menunjukkan ketelitian profesional.
Pemeriksaan Singkat
Di mana tag <meta charset="UTF-8"> harus ditempatkan?
Rangkuman: Kerangka Dokumen HTML
Setiap berkas HTML memerlukan: → →
(charset, viewport, title, tautan CSS) → (semua konten yang terlihat). Kerangka ini memastikan konsistensi lintas peramban, aksesibilitas, dan pengindeksan mesin telusur yang tepat.
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 41
- Pelajaran
- 163
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Struktur Dokumen: DOCTYPE html head body” gratis?
Ya — teks lengkap “Struktur Dokumen: DOCTYPE html head body” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Struktur Dokumen: DOCTYPE html head body”?
Tuliskan dokumen HTML5 yang valid dari awal: deklarasi DOCTYPE, akar html, head untuk metadata, dan body untuk konten. Kamu berlatih Frontend Academy 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 Frontend Academy?
Tidak diperlukan pengalaman sebelumnya. Frontend Academy 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 1 dari 4.
Berapa lama pelajaran “Struktur Dokumen: DOCTYPE html head body” 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 Frontend Academy ini?
Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Struktur Dokumen: DOCTYPE html head body
- Tag Semantik: header nav main article footer
- Teks, Gambar, Tautan, dan Daftar
- Formulir: input label button