Metadata dalam HTML

By | 31 October 2017

Elemen head berisi metadata yang diletakan diantara tag <html> dan tag <body>. Metadata adalah data tentang dokumen html yang tidak ditampilkan pada browser. Tag-tag yang terdapat dalam elemen head diantaranya, <title> menetapkan judul pada tab browser, pada halaman web favorit dan pada hasil pencarian mesin pencari. <style> digunakan untuk mengatur tampilan dengan CSS.  <link> digunakan untuk memanggil misalnya file css eksternal. <script> digunakan untuk menyisipkan script javascript atau memanggil file javascript eksternal. <base> digunakan untuk menetapkan url dasar dan target dasar untuk semua url relatif dalam halaman web.

Elemen meta digunakan untuk menetapkan character yang digunakan, deskripsi halaman, keyword atau kata kunci halaman, author dan informasi metadata lainnya. Set character <meta charset=”UTF-8″>, meta deskripsi <meta name=”description” content=”Free Web tutorials”>, meta keyword <meta name=”keywords” content=”HTML, CSS, XML, JavaScript”>, author <meta name=”author” content=”John Doe”>, merefresh halaman setiap 30 detik <meta http-equiv=”refresh” content=”30″>.

HTML5 memperkenalkan metode untuk membiarkan perancang web mengontrol area pandang, melalui tag <meta>. Area pandang adalah area tampilan pengguna dari halaman web. Ini berbeda dengan perangkat, dan akan lebih kecil di ponsel daripada di layar komputer. Anda harus menyertakan elemen viewport <meta> berikut di semua halaman web Anda: <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>. Elemen meta viewport memberi instruksi pada browser tentang cara mengontrol dimensi dan penskalaan halaman. Bagian width = device-width mengatur lebar halaman untuk mengikuti lebar layar perangkat (yang akan bervariasi tergantung pada perangkat). Bagian initial-scale = 1.0 menetapkan tingkat pembesaran awal saat halaman pertama kali dimuat oleh browser.

Contoh:

<!DOCTYPE html>
<html>
<head>
  <title>Metadata</title>
  <meta charset="UTF-8">
  <meta name="description" content="Free Web tutorials">
  <meta name="keywords" content="HTML,CSS,XML,JavaScript">
  <meta name="author" content="John Doe">
  <meta http-equiv="refresh" content="30">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="mystyle.css">
  <style>
    body {background-color: powderblue;}
    h1 {color: red;}    
    p {color: blue;}
  </style>
  <base href="https://www.w3schools.com/images/" target="_blank">
  <script>
  function myFunction() {
    document.getElementById("demo").innerHTML = "Hello JavaScript!";
  }
  </script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<h1>My Web Page</h1>
<img src="html5.gif">
<p>All meta information goes before the body.</p>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>