Tutorial HTML / Struktur dasar dokumen HTML

Sebuah dokumen HTML dimulai dengan deklarasi <!doctype html>, diikuti oleh elemen root html. Di dalam html, head berisi metadata dokumen, sementara body berisi konten utama halaman. Anda dapat menyimpan contoh berikut sebagai file HTML dan membukanya di browser.

Bentuk dasar dari sebuah dokumen HTML

Mulailah dengan melihat contoh lengkap. Elemen luar html berisi baik head maupun body.

<!doctype html>
<html lang="id-ID">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Dokumen HTML Pertama Saya</title>
  </head>
  <body>
    <h1>Halo</h1>
    <p>Ini adalah isi dokumen.</p>
  </body>
</html>

Indentasi memudahkan pengenalan elemen yang bersarang di dalam elemen lain. Peramban menafsirkan tag untuk membuat struktur dokumen; judul dan paragraf di dalam body membentuk konten yang terutama Anda lihat di halaman.

Apa yang dilakukan setiap bagian?

• <!doctype html>: Menyatakan dokumen sebagai HTML. Ini bukan elemen HTML. Menempatkannya di awal membantu peramban menggunakan mode standar.
• <html lang="id-ID">: Elemen akar dari dokumen. lang="id-ID" menandai bahasa Indonesia sebagai bahasa utama, yang membantu alat bantu seperti pembaca layar memilih pengucapan yang benar.
• <head>: Berisi metadata seperti judul dokumen, pengkodean karakter, dan pengaturan tampilan. Isinya tidak muncul sepenuhnya di badan halaman.
• <body>: Berisi konten utama halaman, termasuk judul, paragraf, gambar, dan tautan.

Standar HTML memungkinkan untuk menghilangkan tag awal dan akhir tertentu, tetapi menulis secara eksplisit html, head, dan body membuat struktur lebih mudah dipahami saat belajar. Deskripsi elemen dokumen dari standar WHATWG HTML memberikan definisi yang rinci. Aturan untuk tag dan atribut dijelaskan dalam Sintaks HTML.

Tiga pengaturan dalam head

Area head dari contoh tersebut berisi tiga pengaturan berguna yang harus dikenali dalam dokumen HTML pertama. Bandingkan posisi dan pemeriksaan untuk setiap elemen metadata dalam Menentukan judul halaman, deskripsi, bahasa, dan pengkodean.

• meta charset="utf-8": Menentukan UTF-8 sebagai pengkodean karakter dokumen. Simpan file juga dalam UTF-8 agar karakternya ditampilkan dengan benar. Tempatkan deklarasi pengkodean dekat awal dokumen.
• meta name="viewport": Menetapkan lebar jendela tampilan ke lebar perangkat untuk browser seluler. Tag ini sendiri tidak membuat desain menjadi responsif.
• title: Menetapkan judul dokumen, yang ditampilkan di tempat-tempat seperti tab browser. Ini memiliki tujuan yang berbeda dari h1, yang ditampilkan dalam isi halaman.

Perhatikan perbedaan antara title dan h1 dalam contoh: Tab browser menampilkan "Dokumen HTML Pertama Saya", sementara judul yang terlihat di halaman adalah "Halo".

Simpan file HTML dan buka di browser.

Gunakan blok kode pertama untuk membuat file nyata dan periksa hasilnya. Anda hanya memerlukan editor teks sederhana dan browser web; simpan kode sebagai teks biasa, bukan sebagai dokumen yang diformat.

1. Buat folder kerja, buka file baru di editor teks, dan tempel seluruh blok kode pertama.
2. Simpan file ini di folder ini dengan nama index.html. Pilih UTF-8 jika editor menanyakan tentang pengkodean. index.html adalah nama yang umum untuk halaman pertama sebuah situs web, tetapi nama file lain yang berakhiran .html juga berfungsi untuk latihan ini.
3. Klik ganda pada index.html di pengelola file Anda. Jika aplikasi lain terbuka, gunakan "Buka dengan" untuk memilih peramban web, atau seret file ke jendela peramban.
4. Periksa apakah tab peramban menampilkan "Dokumen HTML Pertama Saya" dan halaman menampilkan "Halo" di atas "Ini adalah isi dokumen." Bar alamat menampilkan URL file:// untuk file lokal.
5. Ubah teks di dalam title dan h1 di editor, simpan file, dan perbarui browser. Bandingkan judul tab yang diperbarui dengan judul di halaman.

Membuka URL file:// membaca file di komputer Anda sendiri. Mengirim URL ini kepada orang lain tidak memberi mereka akses ke salinan Anda; untuk membagikan halaman di web, Anda harus mengunggah filenya ke server web atau layanan hosting.

Jika hasilnya tidak seperti yang Anda harapkan

• Browser menampilkan tag sebagai teks: Periksa apakah nama file yang sebenarnya diakhiri dengan .txt, misalnya index.html.txt. Beberapa editor menambahkan ekstensi ini saat menyimpan dokumen teks. Jika perlu, pilih "Semua File" atau setara dengannya di dialog Simpan dan simpan sebagai index.html. Menampilkan ekstensi file di pengelola file membantu Anda memeriksa nama.
• Perubahan Anda tidak terlihat: Simpan file di editor dan perbarui browser. Jika beberapa folder memiliki file dengan nama yang sama, bandingkan jalur file di browser dengan folder tempat Anda menyimpan perubahan Anda.
• Karakter ditampilkan secara keliru: Pastikan berkas disimpan dengan pengodean UTF-8 dan deklarasi <meta charset="utf-8"> tetap ada di dalam dokumen.
• Halaman kosong: Pastikan Anda telah membuka file yang diinginkan dan bahwa judul serta paragraf masih berada di dalam body.

Untuk mempelajari lebih lanjut tentang membuka dan mengatur file HTML lokal, lihat panduan manajemen file MDN.