Tutorial Belajar HTML 14 : Elemen pada Head di dalam HTML

Elemen pada Head di dalam HTML – Seharusnya materi ini di bahas pada pertemuan pertama yaitu tentang elemen yang ada pada tag <head> dalam dokumen HTML. Jika kalian melihat page source sebuah website, kalian akan menemukan beberapa baris kode yang dibungkus dalam tag <head>. Baiklah, kali ini kita akan membahas tentang

Elemen pada Head di dalam HTML

Tag <head> adalah wadah untuk metadata (data tentang data website) dan tag <head> ini ditempatkan di antara tag <html> dan tag <body>. Metadata HTML adalah data tentang dokumen HTML sebuah website dan metadata ini tidak akan ditampilkan. Metadata ini biasanya menentukan judul dokumen html, rangkaian karakter, gaya, tautan, skrip, dan informasi meta lainnya.

Elemen yang terdapat dalam tag <head> sendiri terdiri dari : <title>, <style>, <meta>, <link> dan <script>. Dan itu semua akan kita ulas satu persatu berikut ini.

Tag <title> pada HTML

Elemen yang dibungkus oleh tag ini adalah berupa judul dokumen html kita, dan juga efek dari tag <title> biasanya tampil di tab browser yang digunakan. Contohnya seperti di bawah ini

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Ini judul halaman</title>
</head>
<body>

</body>
</html>

Tag <style>

Pada tag ini biasanya digunakan untuk membungkus baris kode css bagi yang menggunakan css internal. Berikut ini contoh penggunaannya

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
    body {
      background-color: teal;
      border: 1px solid grey;
    }
  </style>
</head>
<body>

</body>
</html>

Tag <link>

Elemen tag yang ini hampir sama fungsinya dengan tag <style>, tapi untuk tag <link> ini digunakan jika kalian menggunaan metode css eksternal. Jadi kalian cukup memasukan link css kalian ke dalam tag <link>. Contohnya seperti berikut ini

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>
<body>

</body>
</html>

Tag <meta>

Tag <meta> digunakan untuk menentukan set karakter mana yang digunakan, deskripsi halaman, kata kunci, penulis, dan metadata lainnya. Metadata berfungsi sebagai metode menampilkan data oleh browser, atau mesin pencari (kata kunci), dan layanan web lainnya. Bagian ini sangat penting sekali saat kalian ingin menerapkan SEO pada website kalian. Perhatikan contoh penggunaannya berikut

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="description" content="Belajar Web Design dan Web Programming Bareng">
  <meta name="keywords" content="HTML,CSS,JavaScript,PHP">
  <meta name="author" content="Web Design Purbalingga">
</head>
<body>

</body>
</html>

Tag <script>

Elemen tag ini berfungsi sebagai pembungkus kode yang metode pemprosesannya melalui server seperti javascript. Dengan tag ini kalian bisa menyisipkan baris kode javascript di dalam dokumen html, baik itu dengan link atau langsung menuliskan kode scriptnya. Lihat contohnya berikut ini

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script>
  function myFunction() {
    document.getElementById("demo").innerHTML = "Selamat Datang di Forum Web Design";
  }
  </script>
</head>
<body>
  <h1>Ini halaman webku</h1>
<p id="demo"></p>
<button type="button" onclick="myFunction()">Klik Tombol Ini</button>
</body>
</html>

Hasil dari seluruh baris kode di atas akan seperti ini

Baiklah, sekian pembahasan kali ini mengenai elemen apa saja yang ada di dalam tag <head>. Jika ada yang belum jelas, silahkan tinggalkan pertanyaanmu di kolom komentar di bawah ini.

Web Design Purbalingga