Ads by Yasya El Hakim
Tutorial Lengkap HTML: Head pada HTML - Bagian 24

Elemen <head> pada HTML merupakan sebuah kontainer (Tempat) bagi metadata dan terletak diantara tag <html> dan tag <body>.

Metadata pada HTML berupa data tentang dokumen HTML. Metadata tidak akan ditampilkan pada halaman HTML yang dirender oleh Browser.

Biasanya, Metadata berupa judul dokumen, set karakter, style, script, dan informasi meta lainnya.

Tag <title>, <style>, <meta>, <link>, <script>, dan <base> dapat digunakan sebagai metadata.

Elemen <title>

Elemen <title> dapat kalian gunakan untuk menentukan judul dokumen dan sangat dibutuhkan pada dokumen HTML.

Elemen <title> berfungsi untuk:
  • Menentukan judul dokumen.
  • Menampilkan judul dokumen pada Tab Browser.
  • Menyediakan judul untuk halaman.
  • Menampilkan judul halaman pada hasil pencarian Search Engine.

Contoh

Dokumen HTML singkat:
<!DOCTYPE html>
<html>

<head>
<title>Judul Halamn</title>
</head>

<body>
Isi Konten Dokumen......
</body>

</html> 

Elemen <style>

Elemen <style> pada HTML dapat digunakan untuk menentukan informasi berupa style pada dokumen HTML.

Contoh

<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style> 

Elemen <link>

Elemen <link> pada HTML dapat kalian gunakan untuk menentukan link external berupa file CSS.

Contoh

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

Tips: Kalian dapat mempelajari lebih banyak tentang CSS pada Tutorial Lengkap CSS.

Elemen <meta>

Elemen <meta> pada HTML dapat kalian gunakan untuk menentukan set karakter yang digunakan, deskripsi halaman, keyword, author, dan metadata lainnya.

Metadata digunakan oleh Browser, Search Engine, dan layanan Web Lainya.

Berikut adalah metadata untuk menentukan set karakter:
<meta charset="UTF-8">

Berikut adalah metadata untuk menentukan deskripsi halaman:
<meta name="description" content="Tutorial Lengkap HTML">

Berikut adalah metadata untuk menentukan keyword untuk Search Engine:
<meta name="keywords" content="HTML, CSS, XML, JavaScript">

Berikut adalah metadata untuk menentukan nama Author:
<meta name="author" content="Yasya El Hakim">

Berikut adalah metadata untuk me-refresh halaman setiap 30 detik:
<meta http-equiv="refresh" content="30">

Contoh

Berikut adalah contoh tag <meta>
<meta charset="UTF-8">
<meta name="description" content="Tutorial Lengkap HTML">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Yasya El Hakim">

Mengatur Viewport

HTML5 memiliki sebuah metode untuk memberikan kontrol bagi Web Designer melalui viewport melalui tag <meta>.

Viewport pada HTML merupakan area yang dapat dilihat oleh pengguna. Viewport dapat tampil berbeda-beda tergantung dengan perangkat yang digunakan.

Kalian harus memasukkan tag <meta> viewport kedalam semua elemen HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Sebuah elemen <meta> viewport dapat memberikan instruksi kepada Browser dalam mengontrol dimensi dan ukurun halaman.

width=device-width merupakan bagian untuk mengatur ukuran halaman agar dapat menyesuaikan ukuran layar.

initial-scale=1.0 merupakan bagian untuk mengatur level zoom ketika halaman dimuat pertamakali pada Browser.

Elemen <script>

Elemen <script> dapat kalian gunakan untuk menentukan Client-Side JavaScript.

Contoh

Berikut adalah contoh Script yang dapat menuliskan teks "Halo Semuanya" kedalam elemen HTML yang memiliki id="contoh".
<script>
function fungsiKu {
document.getElementById("contoh").innerHTML = "Halo Semuanya";
}
</script> 

Tips: Kalian dapat mempelajari JavaScript pada Tutorial Lengkap  JavaScript

Elemen <base>

Elemen <base> dapat kalian gunakan untuk menentukan URL dasar target bagi semua URL relatif.

Contoh

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

Menghilangkan tag <html>, <head>, dan <body>

Menurut standarisasi HTML5, tag <html>, <body>, dan <head> dapat kalian hilangkan.

Contoh

Berikut adalah contoh kode yang termasuk valid pada HTML5:
<!DOCTYPE html>
<title>Judul Halaman</title>

<h1>Heading</h1>
<p>Paragraf.</p> 

Catatan:
Kami tidak merekomendasikan contoh diatas. Menghilangkan tag tersebut dapat merusak DOM atau XML karena dapat menghasilkan error pada Browser lama seperti Internet Explorer 9.

Elemen Head pada HTML

  • <head> - Untuk menentukan informasi tentang dokumen.
  • <title> - Untuk menentukan judul dokumen.
  • <base> - Untuk menentukan alamat atau target default untuk semua link yang ada pada dokumen.
  • <link> - Untuk menentukan hubungan antara dokumen dan sumber eksternal.
  • <meta> - Untuk menentukan metadata tentang dokumen HTML.
  • <script> - Untuk menentukan Client-Side Script.
  • <style> - Untuk menentukan informasi berupa Style pada dokumen.

Sebelumnya: Tutorial Lengkap HTML: Path pada HTML - Bagian 23
Selanjutnya: Tutorial Lengkap HTML: Layout pada HTML - Bagian 25
Daftar isi: Tutorial Lengkap HTML

Sumber: https://www.w3schools.com/

0Komentar

Sebelumnya Selanjutnya