Elemen Head HTML


Elemen <head> HTML adalah container (wadah) untuk elemen-elemen berikut: <title>, <style>, <meta>, <link>, <script>, dan <base>.


Elemen <head> HTML

Elemen <head> adalah container (wadah) untuk metadata dan ditempatkan di antara tag <html> dan tag <body>.

Metadata HTML adalah data tentang dokumen HTML. Metadata tidak ditampilkan.

Metadata biasanya mendefinisikan judul dokumen, kumpulan karakter, style, script, dan informasi meta lainnya.


Elemen <title> HTML

Elemen <title> mendefinisikan judul dokumen. Judul harus hanya teks, dan ditampilkan di bar judul browser atau di tab halaman.

Elemen <title> diperlukan dalam dokumen HTML.

Isi judul halaman sangat penting untuk pengoptimalan mesin pencari (SEO). Judul halaman digunakan oleh algoritma mesin pencari untuk memutuskan urutan saat daftar halaman dalam hasil pencarian.

Elemen <title>:

  • Mendefinisikan judul di toolbar browser
  • Memberikan judul untuk halaman tersebut ketika ditambahkan ke favorit
  • Menampilkan judul halaman dalam hasil mesin pencari

Jadi, cobalah untuk membuat judul seakurat dan sebagus mungkin.


Berikut ini contoh dokumen HTML sederhana:

<!DOCTYPE html>
<html>
<head>
    <title>Sebuah Judul</title>
</head>
<body>
    Isi / konten dokumen...
</body>
</html>

Elemen <style> HTML

Elemen <style> digunakan untuk mendefinisikan informasi style untuk halaman HTML.


Contoh:

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

Elemen <link> HTML

Elemen <link> mendefinisikan hubungan antara dokumen saat ini dan sumber daya eksternal.

Tag <link> yang paling sering digunakan untuk nge-link ke style sheet eksternal.


Contoh:

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

Elemen <meta> HTML

Elemen <meta> biasanya digunakan untuk menentukan karakter set, deskripsi halaman, kata kunci, penulis dokumen, dan pengaturan viewport.

Metadata tidak akan ditampilkan di halaman, tetapi digunakan oleh browser (cara menampilkan konten atau memuat ulang halaman), oleh mesin pencari (kata kunci), dan layanan web lainnya.


Contoh:

Menentukan karakter set yang digunakan:

<meta charset="UTF-8">

Menentukan kata kunci untuk mesin pencari:

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

Menentukan deskripsi halaman web Anda:

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

Menentukan penulis halaman:

<meta name="author" content="Ian Zune">

Refresh dokumen setiap 30 detik:

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

Mengatur viewport (area pandang) agar situs web Anda terlihat bagus di semua perangkat: 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Contoh <meta> tag:

<meta charset="UTF-8">
<meta name="description" content="Tutorial Web Gratis">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="Ian Zune">

Mengatur Viewport

Viewport adalah area halaman web yang terlihat oleh pengguna. Ini bervariasi menurut perangkat - ini akan lebih kecil di ponsel daripada di layar komputer.

Anda harus memasukkan elemen <meta> berikut di semua halaman web Anda: 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Ini memberikan instruksi kepada 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 mengatur tingkat zoom awal saat halaman pertama kali dimuat oleh browser.


Elemen <script> HTML

Elemen <script> digunakan untuk mendefinisikan JavaScripts dari sisi klien.

JavaScript berikut menulis "Halo JavaScript!" menjadi elemen HTML dengan id = "demo":


Contoh:

<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "Halo JavaScript!";
}
</script>

Elemen <base> HTML

Elemen <base> menentukan URL dasar dan / atau target untuk semua URL relatif dalam halaman.

Tag <base> harus memiliki href atau atribut target, atau keduanya.

Hanya boleh ada satu <base> elemen dalam satu dokumen.


Contoh:

Tentukan URL default dan target default untuk semua link di halaman:

<head>
    <base href="https://www.ianzune.com/" target="_blank">
</head>
<body>
    <img src="images/stickman.gif" width="24" height="39" alt="Stickman">
    <a href="tags/tag_base.asp">Base Tag HTML</a>
</body>

Ringkasan

  • Elemen <head> adalah container (wadah) untuk metadata
  • Elemen <head> ditempatkan di antara tag <html> dan tag <body>
  • Elemen <title> diperlukan dan mendefinisikan judul dokumen
  • Elemen <style> digunakan untuk mendefinisikan informasi style untuk dokumen tunggal
  • Tag <link> yang paling sering digunakan untuk nge-link ke style sheet eksternal
  • Elemen <meta> biasanya digunakan untuk menentukan karakter set, deskripsi halaman, kata kunci, penulis dokumen, dan pengaturan viewport
  • Elemen <script> digunakan untuk mendefinisikan JavaScripts sisi klien
  • Elemen <base> menentukan URL dasar dan / atau target untuk semua URL relatif dalam halaman

Sumber referensi: w3schools

Komentar

Posting Komentar