Tutorial HTML / Mengatur judul, deskripsi, bahasa, dan pengodean karakter halaman

head dari sebuah dokumen HTML berisi informasi seperti title tab browser-nya, pengkodean karakter, dan deskripsi halaman. Bahasa standar dokumen sebaiknya diatur di html lang. Pengaturan ini membantu browser dan alat lainnya untuk menafsirkan dan mendeskripsikan halaman, tetapi tidak menggantikan konten yang dapat dibaca di body.

Mulailah dengan dokumen lengkap

<!doctype html>
<html lang="id-ID">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Taman Kecil | Panduan Perawatan Tanaman</title>
  <meta name="description"
        content="Temukan tanaman yang ramah bagi pemula dan perawatan pentingnya dengan panduan Taman Kecil.">
</head>
<body>
  <h1>Taman Kecil</h1>
  <p>Pelajari cara merawat tanaman.</p>
</body>
</html>

Simpan kode di bawah index.html dan buka di browser. title muncul di tab browser, sementara h1 terlihat di halaman. Mereka memiliki fungsi yang berbeda, tetapi harus secara konsisten mendeskripsikan halaman yang sama. h1 dalam contoh berada di dalam dokumen contoh dan bukan sebagai judul kedua dalam posting tutorial ini. Mulailah dengan membedakan antara head dan body dalam Struktur Dasar Dokumen HTML.

Sebagian besar konten dari head tidak ditampilkan sebagai teks biasa di halaman. Sediakan instruksi dan penjelasan yang harus dilihat pembaca di body. Pada situs web yang memiliki banyak halaman, buat judul dan deskripsi yang unik dan akurat untuk setiap halaman, daripada menyalin nama situs yang sama di mana-mana.

Tetapkan bahasa dan pengkodean karakter

lang="id-ID" menunjukkan bahwa bahasa utama dokumen adalah bahasa Indonesia. Ini dapat membantu teknologi bantu untuk mengucapkan dan memproses konten. Gunakan bahasa sebenarnya dari halaman; satu kalimat sesekali dalam bahasa lain tidak mengharuskan seluruh dokumen lang diubah. Bagian yang lebih panjang dalam bahasa lain dapat memiliki atribut bahasa sendiri. Bahasa dan struktur juga mendukung pemeriksaan membaca dan interaksi di Aksesibilitas Dasar: Judul, Tautan, Gambar, dan Keyboard.

meta charset="utf-8" menunjukkan pengkodean karakter. Simpan juga file itu sendiri dalam UTF-8. Jika karakter ditampilkan dengan salah, periksa baik pengkodean yang dipilih saat menyimpan di editor maupun, jika disediakan secara online, header respons server. Mengubah tag saja tidak dapat memperbaiki file yang disimpan dengan pengkodean lain.

Memahami deskripsi dan jendela tampilan

Metadata description harus merangkum apa yang akan ditemukan pembaca di halaman khusus ini, dan tidak boleh mencantumkan kata kunci. Mesin pencari dapat membuat cuplikan hasil dari teks atau metadata halaman, sehingga deskripsi yang ditulis tidak selalu akan muncul secara harfiah. Lihat dokumentasi tentang cuplikan di Google Penelusuran .

Parameter viewport memengaruhi jendela tampilan untuk tata letak dan skala awal pada perangkat seluler. Ini berguna bersama dengan CSS responsif, tetapi tag itu sendiri tidak memastikan bahwa setiap elemen sesuai dengan layar ponsel. Jangan hanya membatasi zoom karena teks terlihat kecil; sebaiknya perbaiki CSS dan ukuran font. Lihat referensi meta MDN dan referensi judul.

Periksa pengaturan di tempat yang tepat

lang bukan tag terpisah di dalam head. Tetapkan ke elemen dokumen, seperti <html lang="id-ID">, dan gunakan atribut bahasa pada elemen tertentu untuk bagian dalam bahasa lain.

1. Jika karakter tidak dapat dibaca, buka dokumen asli yang benar dan periksa pengkodean sebenarnya saat menyimpannya. Simpan salinan sebelum menyimpan teks yang mungkin sudah salah dikodekan.
2. Simpan file yang diketahui benar dan tersimpan dalam UTF-8, pertahankan deklarasi charset dekat bagian awal, dan buka kembali. Mengubah deklarasi tidak akan memperbaiki teks yang sudah rusak.
3. Jika file lokal benar, tetapi halaman yang disediakan server tidak, periksa Content-Type dan charset dari respons dokumen di jaringan. Sesuaikan deklarasi server dengan pengkodean sebenarnya dari file.

Atribut global lang MDN

Periksa halaman sebelum Anda membagikannya

Pastikan setiap judul tab membedakan halamannya, bahwa judul yang terlihat menggambarkan topik yang sama dan karakter ditampilkan dengan benar. Jika Anda telah menulis deskripsi, bandingkan dengan isi teks saat ini dan bukan dengan versi lama. Buka halaman pada lebar ponsel yang umum dan uji zoom serta gulir horizontal; metadata dan tata letak harus berfungsi bersama.