Tutorial HTML Lanjutan: Pengertian Meta Tags dalam HTML
Pengertian meta tag
Meta tag tidak dimaksudkan untuk menambah atau mempengaruhi isi dari konten halaman web kita, namun lebih kepada keterangan tambahan tentang halaman itu sendiri.
Meta tag biasanya di tempatkan pada bagian head dari HTML, dan biasanya terdiri dari beberapa meta tag dengan atribut yang berbeda-beda. Beberapa atribut yang biasanya di tampilkan adalah charset, name, http-equiv, dan content.
Penulisan meta tag adalah sebagai berikut: <meta … />. Meta tag merupakan tag yang berdiri sendiri, atau disebut juga self-closing tag.
Mengenal atribut charset pada meta tag
Atribut charset pada meta tag digunakan untuk memberi tahu web browser dengan karakter set apa halaman web akan ditampilkan. Biasanya atribut charset ini akan berisi nilai seperti utf-8, atau ISO-8859-1.
Jika kita tidak memasukkan charset ke dalam meta tag, tampilan halaman seakan tidak berubah, namun akan menjadi masalah jika halaman web kita dibuka oleh browser dari negara yang tidak menggunakan huruf latin seperti jepang, cina dan arab. Mendeklarasikan utf-8 sebagai atribut charset pada meta tag merupakan langkah untuk mengantisipasinya.
Contoh code:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Meta Tag HTML</title>
<meta charset="utf-8" />
</head>
<body>
<p>
Dengan mengunakan atribut charset pada meta tag, kita akan membantu web broser untuk menterjemahkan setiap karakter dalam halaman web kedalam berbagai karekter bahasa, terutama bahasa yang tidak mengunakan huruf latin.
</p>
</body>
</html>
Mengenal atribut name pada meta tag
Kita bisa menamakan isi dari atribut name ini dengan apa saja. Biasanya tag ini dipakai sebagai keterangan tentang kode HTML di dalamnya, seperti pembuat kode, tanggal, dan keterangan tentang isi halaman tersebut.
Untuk web asing biasanya atribut name akan berisi author, description, dan keywords. Author dimaksudkan untuk menambahkan nama pembuat kode kedalam HTML, description untuk keterangan tentang kode yang ada di dalam halaman itu, dan keyword berfungsi untuk kata kunci yang mewakili isi keseluruhan halaman.
Khusus untuk atribut keyword, beberapa tahun yang lalu, atribut ini sering digunakan sebagai kata kunci bagi mesin pencari dalam meng-index halaman website. Namun karena seringnya meta tag keyword ini di manipulasi supaya mempengaruhi hasil pencarian, belakangan ini mesin pencari seperti google tidak lagi menggunakannya.
Contoh code:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Meta Tag HTML</title>
<meta name="author" content="Deni Sury" />
<meta name="keywords" content="belajar meta tag html,
meta tag, belajar html dasar" />
<meta name="description" content="dahulu
google akan menampilkan kalimat ini,
biasa berisi pesan tentang isi dari konten web tersebut" />
</head>
<body>
<p>
Author untuk nama pembuat kode <br/>
Keyword berisi kata kunci untuk membantu robot web broser mengidentifikasi isi halaman html <br/>
Description biasanya berisi ringkasan isi dari halaman html
</p>
</body>
</html>
Atribut keyword dan description lebih ditujukan kepada mesin pencari seperti google, walaupun efektifitasnya sudah jauh berkurang saat ini.
Mengenal atribut HTTP equivalents pada meta tag
Atribut HTTP Equivalents berkaitan dengan HTTP header. Dimana ini merupakan mekanisme web browser mengirimkan halaman ke browser kita. Nilai dari atribut HTTP Equivalents ini dapat berupa content-type, default-style dan refresh. Yang cukup menarik adalah jika nilai HTTP Equivalents kita isi dengan refresh, maka kita dapat mengontrol secara otomatis seberapa sering halaman akan di refresh.
Contoh code:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Meta Tag HTML</title>
<meta http-equiv="refresh" content="3" />
</head>
<body>
<p>
Halaman ini akan otomatis di refresh setiap <em>3 detik</em>
</p>
</body>
</html>
Dari contoh meta.html diatas, halaman tersebut akan direfresh secara otomatis setiap 3 detik, hal ini kita cantumkan pada <meta http-equiv=”refresh” content=”3″ /> dimana konten adalah penentu berapa detik halaman tersebut harus menunggu diantara tiap refresh.
Berikut Kode Lengkap Meta Tag HTML
<!DOCTYPE html>
<html>
<head>
<title>Belajar Meta Tag HTML</title>
<meta charset="utf-8" />
<meta http-equiv="refresh" content="3" />
<meta name="author" content="Deni Sury" />
<meta name="keywords" content="belajar meta tag html,
meta tag, belajar html dasar" />
<meta name="description" content="dahulu
google akan menampilkan kalimat ini,
biasa berisi pesan tentang isi dari konten web tersebut" />
</head>
<body>
<p><b>Fugsi Atriut charset</b><br/>
Dengan mengunakan atribut charset pada meta tag, kita akan membantu web broser untuk menterjemahkan setiap karakter dalam halaman web kedalam berbagai karekter bahasa, terutama bahasa yang tidak mengunakan huruf latin.
</p>
<p><b>Fungsi Atribut http-equiv</b><br/>
Halaman ini akan otomatis di refresh setiap <em>3 detik</em>
</p>
<p><b>Fungsi Atribut name</b><br/>
Author untuk nama pembuat kode <br/>
Keyword berisi kata kunci untuk membantu robot web broser mengidentifikasi isi halaman html <br/>
Description biasanya berisi ringkasan isi dari halaman html
</p>
</body>
</html>
Belajar HTML Secara Lengkap Disini:
1. Tutorial HTML Bagian 1
2. Tutorial HTML Bagian 2