Belajar HTML Part 19 - Elemen Head dan Bagian-Bagiannya

Elemen <head> HTML

Elemen <head> merupakan wadah atau tempat untuk metadata. Elemen <head> dan ditempatkan di antara tag <html> dan tag <body>.

Metadata HTML adalah data tentang dokumen HTML. Metadata tidak ditampilkan di browser. Metadata biasanya menentukan judul dokumen, charset, style, link, script, dan informasi meta lainnya.

Tag berikut menggambarkan metadata:

Bagian-bagian elemen <head>

Elemen <title> HTML

Elemen <title> digunakan untuk menentukan judul dokumen HTML, dan elemen ini diperlukan dalam semua dokumen HTML.

Elemen <title>:

Menentukan judul di tab browser
Menyediakan judul untuk halaman ketika ditambahkan ke favorit
Menampilkan judul untuk halaman dalam hasil search engine

Sebuah dokumen HTML sederhana:

Contoh

<!DOCTYPE html>
<html>
    <head>
       <title>Title Halaman</title>
    </head>
<body>
......Konten......
</body>
</html>

Elemen <style> HTML

Elemen <style> digunakan untuk menyisipkan kode CSS ke dalam dokumen HTML.

Contoh

<!DOCTYPE html>
<html>
<head>
    <title>Title Halaman</title>
    <style>
      h1 {color: red;}
      p {color: blue;}
    </style>
</head>  
<body>

<h1>Ini adalah Heading</h1>
<p>Ini adalah Paragraf</p>
  
</body>
</html>

Elemen <link> HTML

Elemen <link> digunakan untuk menghubungkan (hyperlink) dokumen HTML ke CSS eksternal:

Contoh

<link rel="stylesheet" href="style.css">

Elemen <meta> HTML

Elemen <meta> digunakan untuk menentukan charset yang digunakan, deskripsi halaman, kata kunci, penulis, dan metadata lainnya.

Metadata digunakan oleh browser (untuk menampilkan konten), oleh mesin pencari (kata kunci), dan layanan web lainnya.

Berdasarkan charset yang digunakan:

<meta charset="UTF-8">

Berdasarkan deskripsi dari halaman web Anda:

<meta name="description" content="Tutorial Belajar Web">

Menentukan kata kunci untuk mesin pencari:

<meta name="keywords" content="HTML, CSS, XML, JavaScript">

Tentukan penulis halaman:

<meta name="author" content="king-octahasan">

Refresh dokumen setiap 30 detik:

<meta http-equiv="refresh" content="30">

Contoh penggunaan tag <meta> sebagai berikut:

<!DOCTYPE html>
<html>
<title>Title Halaman</title>
<head>
  <meta charset="UTF-8">
  <meta name="description" content="Tutorial Belajar Web">
  <meta name="keywords" content="HTML,CSS,XML,JavaScript">
  <meta name="author" content="king-octahasan">
</head>
<body>

<p>Semua informasi meta ditempatkan sebelum body</p>

</body>
</html>

Elemen <script> HTML

Elemen <script> digunakan untuk menulis script, dengan kata lain adalah untuk menyisipkan script (seperti JavaScript) pada sisi client (clien-side).

Dalam penulisan script, bisa ditulis secara langsung di dalam elemen <script>, atau merujuk pada sumber file eksternal dengan atribut src.

Contoh

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Title Halaman</title>
  </head>
  <body>
    <p>Kalimat dibawah ini, ditulis dengan javascript:</p>
    <div id="latihan"></div>

    <script>
      document.getElementById('latihan').innerHTML = "<h3>Selamat Datang</h3>";
      document.write("di king-octahasan.blogspot.com");
    </script>
  </body>
</html>

Tips: Untuk mempelajari semua tentang JavaScript, belajar Tutorial JavaScript.

Elemen <base> HTML

Elemen <base> digunakan untuk menentukkan URL dasar sebuah dokumen, maksudnya kita membuat sebuah alamat URL sebagai sandaran untuk semua relative URL.

Dalam sebuah dokumen tidak boleh menuliskan lebih dari satu element base
Di dalam element base harus menyertakan attribute href, target ataupun keduanya.

Contoh

<!DOCTYPE html>
<html>
  <head>
  <base href="https://king-octahasan.blogspot.co.id/media/images/" target="_blank">
  </head>
  <body>
    <p>
    <img src="nama_gambar.png" alt="nama_alternatif_gambar" />
    </p>

    <p>
    <a href="https://king-octahasan.blogspot.co.id">Kunjungi king-octahasan.blogspot.co.id</a>.
    </p>
  </body>
</html>

Demikian pembahasan mengenai elemen head dan bagian-bagian elemen head.
Semoga bermanfaat!

Sumber: https://www.w3schools.com