Tanda <meta> HTML

Definisi dan penggunaan

<meta> Elemen tag menentukan metadata tentang dokumen HTML. Metadata adalah data tentang data (informasi).

<meta> Elemen tag selalu berada Elemen <head> Dalam, biasanya digunakan untuk menentukan kumpulan karakter, deskripsi halaman, kata kunci, penulis dokumen dan pengaturan viewport:

Meta data tidak akan ditampilkan di halaman, tetapi dapat diurai oleh mesin.

Meta data digunakan oleh peramban (bagaimana menampilkan konten atau memuat ulang halaman), mesin pencari (kata kunci) dan layanan jaringan lainnya.

Petunjuk:Elemen meta memiliki berbagai penggunaan yang berbeda, dan dapat terdapat beberapa elemen meta di dalam dokumen HTML.

Petunjuk:Dengan <meta> Terdapat metode untuk penataan viewport (yaitu area yang dapat dilihat pengguna di halaman web) (lihat contoh di bawah "Setelan viewport").

Perhatian:Setiap elemen meta hanya dapat digunakan untuk tujuan satu. Jika ada kebutuhan untuk menggunakan fitur lebih dari satu, maka beberapa elemen meta harus ditambahkan ke dalam elemen head.

Lihat pula:

Panduan HTML:Kepala HTML

Panduan HTML DOM:Objek Meta

Contoh

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Tutorial Web gratis">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="Bill Gates">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Coba sendiri

Atribut

Atribut Nilai Deskripsi
charset Kumpulan karakter Tentukan pengodean karakter dokumen HTML.
content Teks Tentukan nilai yang berhubungan dengan atribut http-equiv atau name.
http-equiv
  • content-security-policy
  • content-type
  • default-style
  • refresh
 Menyediakan informasi/nilai untuk properti content dengan header HTTP.
name
  • application-name
  • author
  • description
  • generator
  • keywords
  • viewport
 atur nama metadata.

properti global

<meta> Tag ini mendukung Properti global di HTML.

Elemen meta memiliki tiga penggunaan tipikal:

  1. Tentukan pasangan metadata nama/nilai
  2. Deklarasikan enkoding karakter
  3. Simulasi field header HTTP

1: Tentukan pasangan metadata nama/nilai berbagai macam

Elemen meta dapat digunakan untuk mendefinikan metadata dengan pasangan nama/nilai, untuk hal ini perlu menggunakan properti name dan content.

Definisi kata kunci untuk mesin pencari:

<meta name="keywords" content="HTML, CSS, JavaScript">

Definisi deskripsi halaman:

<meta name="description" content="Free Web tutorials for HTML and CSS">

Definisi penulis halaman:

<meta name="author" content="John Doe">

Atur viewport untuk memperbaiki penampilan situs di berbagai perangkat:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2: Deklarasikan enkoding karakter

Deklarasikan bahwa halaman ini menggunakan enkoding karakter UTF-8 dengan properti charset:

<meta charset="UTF-8">

3: Simulasi field header HTTP

Gunakan properti http-equiv dan content untuk meng refresh dokumen setiap 30 detik:

<meta http-equiv="refresh" content="30">

Perubahan di HTML5

Properti charset ditambahkan di HTML5.

Properti http-equiv di HTML4 dapat memiliki banyak nilai yang berbeda. Dalam HTML5, hanya dapat digunakan nilai yang disebutkan di halaman ini.

Properti scheme di HTML4 sekarang sudah tidak digunakan di HTML5.

Selain itu, elemen meta untuk menentukan bahasa halaman web sekarang sudah tidak digunakan lagi.

atur viewport

HTML5 memperkenalkan metode yang memungkinkan desainer web untuk <meta> untuk mengendalikan viewport.

Anda seharusnya menambahkan tanda berikut di semua halaman web Anda <meta> Elemen viewport:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Itu menyediakan instruksi bagi peramban tentang bagaimana mengendalikan ukuran halaman dan skala.

width=device-width Sebagian mengatur lebar halaman menjadi lebar layar perangkat (tergantung pada perangkat).

Ketika peramban pertama kali memuat halaman,initial-scale=1.0 Sebagian pengaturan tingkat pengukuran awal.

Berikut adalah contoh halaman web tanpa tag meta viewport, serta halaman web dengan tag meta viewport:

Petunjuk:Jika Anda menggunakan ponsel atau tablet untuk melihat halaman ini, Anda dapat mengklik dua tautan di bawah ini untuk melihat perbedaan.



Tidak ada tag meta viewport


Dengan tag meta viewport

Pengaturan CSS Default

Tidak ada.

Dukungan Peramban

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Dukungan Dukungan Dukungan Dukungan Dukungan