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 set karakter, deskripsi halaman, kata kunci, penulis dokumen dan pengaturan viewport:

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

Peramban (bagaimana menampilkan konten atau mengeload halaman kembali), mesin pencari (kata kunci) dan layanan jaringan lain akan menggunakan metadata.

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

Petikan:Melalui <meta> Ada cara untuk pengecatan tampilan (yaitu area yang dapat dilihat pengguna di halaman web) (lihat contoh di bawah "Atur pengecatan")

Perhatian:Tiada meta elemen dapat digunakan untuk tujuan yang berbeza. Jika ingin digunakan fitur lebih dari satu, maka sebaiknya tambahkan beberapa elemen meta di dalam elemen head.

Lihat juga:

Panduan HTML:Kepala HTML

Panduan HTML DOM:Objek Meta

Contoh

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Tutorian Web percuma">
  <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 Set karakter Tetapkan kod pengodean aksara bagi dokumen HTML.
content Teks Tetapkan nilai yang berhubungan dengan atribut http-equiv atau name.
http-equiv
  • content-security-policy
  • content-type
  • default-style
  • refresh
 Menyediakan maklumat/nilai untuk properti content dengan tajuk HTTP.
name
  • application-name
  • author
  • description
  • generator
  • keywords
  • viewport
 menetapkan nama metadata.

properti global

<meta> Tag ini juga mendukung Properti global HTML.

Elemen meta mempunyai tiga penggunaan utama:

  1. Tentukan pasangan metadata nama/nilai
  2. Pernyatakan pengodean aksara
  3. Simulasi medan tajuk HTTP

1: Tentukan berbagai pasangan metadata nama/nilai

Elemen meta boleh digunakan untuk menentukan metadata melalui pasangan nama/nilai, untuk itu perlu menggunakan properti name dan content.

Tentukan kata kunci untuk mesin cari.

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

Tentukan deskripsi tentang halaman web.

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

Tentukan penulis halaman.

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

Pengaturan papar lihat untuk membaiki penampilan laman web di semua peranti:

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

2: Pernyatakan pengodean aksara

Penggunaan properti charset untuk menyatakan bahasa pengodean halaman ini adalah UTF-8:

<meta charset="UTF-8">

3: Simulasi medan tajuk HTTP

Gunakan properti http-equiv dan content untuk mengahwinkan dokumen setiap 30 saat:

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

Perubahan dalam HTML5

Properti charset adalah penambahan baru dalam HTML5.

Dalam HTML4, properti http-equiv boleh mempunyai beberapa nilai yang berbeza. Manakala dalam HTML5, hanya boleh digunakan nilai yang disebutkan di halaman ini.

Properti scheme dalam HTML4 tidak lagi digunakan dalam HTML5.

Sekarang, elemen meta tidak lagi digunakan untuk menentukan bahasa halaman web.

Pengaturan papar lihat

HTML5 memperkenalkan cara bagi pengatur web untuk mengesahkan papar lihat melalui pengaturan papar lihat. <meta> Elemen HTML5 memperkenalkan cara bagi pengatur web untuk mengesahkan papar lihat melalui pengaturan papar lihat.

Anda seharusnya menyertakan tag berikut di semua halaman web untuk mengawal papar lihat. <meta> Elemen papar lihat:

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

Ia menyediakan arahan kepada pelayar tentang bagaimana untuk mengawal saiz dan skala laman.

width=device-width Sebahagian daripada lebar laman diatur untuk berikutan lebar skrin peranti (berbeza daripada peranti).

Ketika pelayar pertama kali memuatkan laman:initial-scale=1.0 Sebahagian daripada tetapan skala awal.

Di bawah adalah contoh laman web tanpa meta tag viewport, serta laman web dengan meta tag viewport:

Petikan:Jika anda melawat laman ini melalui telefon atau tablet, anda boleh klik dua pautan di bawah untuk lihat perbezaan.



Tidak ada meta tag viewport


Dengan meta tag viewport

Tetapan CSS lalai

Tiada.

Pendukung pelayar

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