Di postingan sebelumnya, kita sudah bahas perbedaan span dan div. Sekarang kita lanjutkan bahas pengertian meta tag di HTML. Simak pembahasan AneIqbal selengkapnya berikut ini.
Kita review sedikit. Tag <div> merupakan tag block-line yang mana akan membuat baris baru di browser, seperti tag <h1>. Tag <span> adalah tag in-line yang mana tidak membuat baris baru di browser, seperti tag <b>.
Postingan kali ini, kita akan membahas pengertian meta tag. Pernah dengar belum?
Kalo yang sering blogging pasti nggak asing. Karena meta tag ini berguna untuk membantu mesin pencari meng-indeks blog. Jadi, blognya bisa muncul di page one hasil pencarian Google.
Tapi, itu kurang efektif sekarang. Google sudah memperbarui algoritma pencariannya. Dan sekarang, konten yang bagus lah yang akan nangkring di page one.
Kembali ke topik.
Pengertian Meta Tag
Meta tag adalah tag yang digunakan untuk memberikan keterangan tentang halaman web yang kita buat. Meta tag ini juga berfungsi untuk memberitahu web browser mekanisme seperti apa yang harus diterapkan ke halaman web.
Semua yang tertulis di meta tag tidak ditampilkan oleh web browser. Karena, meta tag berisi informasi yang ditujukan untuk web browser.
Meta tag ini biasa ditempatkan pada bagian head dari HTML dan biasanya nggak cuma satu meta tag saja, karena meta tag punya beberapa atribut yang punya fungsi tersendiri.
Ada atribut name, charset, http-equiv, dan content.
Sama halnya dengan tag <img>, meta tag juga merupakan tag yang berdiri sendiri atau yang disebut dengan self-closing tag. Seperti ini penulisan tagnya: <meta />.
Sudah paham kan? Kita lanjut ke atributnya.
Atribut name pada meta tag
Atribut name ini digunakan untuk memberi keterangan tentang pembuat kode (author), keterangan isi halaman web (description), dan kata kunci yang menyangkut halaman web tersebut (keyword).
Misalnya, kita ingin menambahkan keterangan siapa pembuat kodenya. Seperti ini kodenya:
<meta name="author" content="AneIqbal" />
Kalau kita ingin menambahkan keterangan isi halaman webnya, seperti ini:
<meta name="description" content="Blog AneIqbal memuat banyak artikel yang menarik dan informatif" />
Lalu, kalau kita ingin menambahkan kata kunci yang berhubungan dengan halaman webnya, seperti ini:
<meta name="keyword" content="blog AneIqbal, belajar HTML, belajar CSS, belajar PHP, artokel menarik, artikel informatif" />
Atribut name selalu ditemani dengan atribut content. Atribut name sebagai jenis keterangannya, atribut content sebagai isi dari jenis keterangannya.
Catatan: Atribut content ini tak hanya menemani atribut name, dia juga menemani atribut meta tag lainnya.
Atribut charset pada tag meta
Atribut charset berfungsi untuk memberi tahu web browser dengan karakter set apa halaman web akan ditampilkan.
Pernah lihat kode seperti ini?
<meta charset="utf-8" />
Seperti itulah penulisan atribut charset. Atribut charset biasanya berisi nilai utf-8 atau ISO-8859-1.
Kalau kita tidak memasukkan meta charset ini ke halaman web yang kita buat, tidak akan ada perubahan apa-apa. Semua terlihat normal.
Tapi, halaman web yang kita buat akan bermasalah jika dibuka oleh web browser dari negara yang tidak menggunakan huruf latin, seperti negara Jepang, Cina, dan Arab.
Nah cara mengantisipasinya adalah dengan memasukkan atribut charset utf-8 ini. Supaya halaman web kita terlihat normat walaupun diakses dari negara-negara tersebut.
Atribut HTTP equivalents
Atribut HTTP equivalents ini berhubungan dengan HTTP header. Apa itu HTTP header?
HTTP header adalah informasi kecil yang ditujukan ke web browser setiap kali menampilkan halaman web.
Nilai dari atribut HTTP equivalents ini ada 3, seperti content-type, default-style, dan refresh.
Pernah nggak, suatu waktu mengunjung web, lalu web itu me-reload/me-refresh sendiri secara otomatis? Itulah kerjaannya si HTTP equivalents ini.
Dengan mengisi atribut HTTP equivalents menjadi refresh, halaman web akan secara otomatis me-refresh sendiri selang beberapa waktu.
Contohnya, kita ingin halaman webnya me-refresh otomatis setiap 5 detik. Seperti ini kodenya:
<meta http-equiv="refresh" content="5" />
Finishing
Kita sudah bahas semua tentang tag di atas. Sebagai tahap akhirnya, yuk kita coba buat satu file HTML dengan nama meta-tag.html yang memuat meta tag. Seperti ini kodenya:
<!DOCTPYE html>
<html>
<head>
<title>Belajar meta tag HTML</title>
<meta charset="utf-8" />
<meta name="author" content="AneIqbal" />
<meta name="description" content="Blog AneIqbal memuat banyak artikel yang menarik dan informatif" />
<meta name="keyword" content"blog AneIqbal, belajar HTML, belajar CSS, belajar PHP, artokel menarik, artikel informatif" />
<meta http-equiv="refresh" content="5" />
</head>
<body>
<p>Halaman ini akan me-refresh otomatis setiap 5 detik.</p>
</body>
</html>
Hasilnya akan seperti ini dan me-refresh tiap 5 detik.
Nah, begitulah meta tag ini.
Sampai sini, selesai sudah pembahasan kita kali ini tentang meta tag. Walaupun tidak tidak tampak pada web browser, meta tag ini tidak boleh diabaikan begitu saja.
Sekian pembahasan pengertian meta tag HTML kali ini dan semoga bisa membantu Anda dalam mempelajari HTML.
Selanjutnya, kita akan bermain-main dengan gambar, yakni cara mengatur posisi gambar di HTML.
