HTML Head

by

HTML adalah bahasa markup yang terstruktur. Salah satu strukturnya adalah <head>.

Supaya lebih jelas, berikut struktur paling dasar dari HTML:

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

</body>
</html>

Jadi <head> adalah element di html untuk menyimpan atau memanggil metadata (data tentang data). Letak <head> ada di antara <html> dan sebelum <body>.

Metadata yang umumnya ada di <head> adalah <title>, <link>, <style>, <script>, <meta> dan <base>.

Head <title>

<title> adalah tag html untuk membuat judul di website. Nanti, data yang ada di <title> akan ditampilkan di tab atau windows web browser. Contoh penggunaan <title>.

<!DOCTYPE html>
<html>
<head>
    <title>Ini Judul Halaman</title>
</head>
<body>
    <h1>ini ditampilkan di jendela browser</h1>
</body>
</html>

Hasilnya akan menjadi:

Element <link> digunakan untuk memanggil css eksternal. Ada tiga cara penulisan css, yaitu internal, eksternal dan inline.

<link rel="stylesheet" type="text/css" href="style.css">

HTML <style>

Sama seperti <link>, <style> digunakan untuk menulis kode internal css.

<style type="text/css">
	h1 {color:red;}
</style>

HTML <script>

<script> digunakan untuk menulis javascript. 

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <script>
  function myFunction() {
    document.getElementById("demo").innerHTML = "Halo, ini lo JavaScript!";
  }
  </script>
</head>
<body>
<p id="demo">Teks ini akan ganti lo</p>
<button type="button" onclick="myFunction()">Klik disini</button>
</body>
</html>

Hasilnya:

Teks ini akan ganti lo

HTML <meta>

<meta> ini digunakan untuk memberikan data tentang data web yang digunakan.

Data-data tersebut misal: deskripsi halaman, keyword (kata kunci), penulis, nama web, dll.

Metadata digunakan oleh web browser, mesin pencari, sosial media, dll. Jadi, tidak salah jika SEO Onpage itu salah satunya mengatur metadata <meta>.

Contoh meta untuk judul website:

<meta name="title" content="Ini Title Website">

HTML <base>

<base> digunakan untuk mendefinisikan url utama.

<base href="https://www.w3schools.com/images/" target="_blank">

Sekian tutorial tentang yang head html, intinya dibagian ini berisi data-data web yang tidak ditampilkan di halaman jendela web browser. Alias diolah dibalik layar (backend).

Leave a Comment