⌘K

Command Palette

Search for a command to run...

Daftar

Tag <head>

Ada apa aja sih di dalam <head> selain <title>? Yuk, kita intip 'mesin' di balik layar halaman webmu yang ngatur banyak hal penting!

Oke, kita lanjut "ngoprek" bagian <head> dari dokumen HTML. Selama ini kita mungkin cuma fokus sama <title>, tapi ternyata ada banyak "harta karun" lain di dalem <head> yang punya peran penting buat halaman web kita, meskipun gak keliatan langsung sama pengunjung.

Bongkar Isi <head>: Gak Cuma <title> Aja Isinya!

Kita udah sering banget nyebutin tag <head> pas ngebahas struktur dasar dokumen HTML. Kamu pasti inget kan, <head> itu bagian yang isinya informasi tentang dokumen HTML kita, bukan konten yang tampil langsung di browser (kecuali <title> yang nongol di tab).

Nah, <head> ini kayak ruang kontrol di belakang panggung pertunjukan. Gak diliat penonton, tapi semua persiapan penting, skrip, dan koneksi ke kru lain (kayak tim tata cahaya atau suara) diatur di sini.

Mari kita jelajahi lebih dalem lagi, elemen-elemen apa aja sih yang biasanya nongkrong di dalem <head> dan apa fungsinya.

Review Singkat: <title> Si Penampil di Tab Browser

Elemen yang satu ini udah gak asing lagi:

  • <title>Judul Halaman Web Anda</title>:
    • Nentuin judul dokumen HTML yang bakal tampil di title bar atau tab browser.
    • Penting banget buat SEO (mesin pencari pake ini sebagai salah satu faktor utama buat nampilin judul di hasil pencarian) dan buat bookmark pengguna.
    • Setiap halaman HTML wajib punya satu elemen <title>.
    • Bikin judul yang singkat, deskriptif, dan relevan sama isi halamanmu.

<meta>: Si Pemberi Informasi Serbaguna (Metadata)

Tag <meta> ini bener-bener "bunglon"-nya <head>. Dia dipake buat nyediain berbagai macam metadata (data tentang data) soal dokumen HTML-mu. Metadata ini gak tampil di halaman, tapi dibaca sama browser, mesin pencari, atau layanan web lain.

Ada beberapa atribut penting yang sering dipake bareng <meta>:

  1. charset (Character Set / Set Karakter):

    • WAJIB ADA! Nentuin pengkodean karakter yang dipake di dokumenmu.
    • Nilai yang hampir selalu dipake sekarang adalah UTF-8. UTF-8 itu universal, ngedukung hampir semua karakter dan simbol dari berbagai bahasa di dunia. Tanpa ini, teks di halamanmu bisa jadi "kotak-kotak" atau simbol aneh kalau ada karakter non-ASCII.
    • Cara nulisnya: <meta charset="UTF-8">
    • Biasanya ditaruh sebagai elemen <meta> pertama di dalem <head> biar browser langsung tau cara ngebaca karakter-karakternya.

  2. name dan content (Informasi Bernama):

    • Kombinasi atribut name dan content dipake buat nyediain metadata dalam bentuk pasangan nama-nilai.
    • Beberapa name yang umum:
      • viewport: SANGAT PENTING buat desain responsif (biar website tampil bagus di HP, tablet, dan desktop).
        • Nilai content yang paling umum: "width=device-width, initial-scale=1.0"
          • width=device-width: Nyuruh browser buat ngeset lebar viewport sama dengan lebar layar perangkat.
          • initial-scale=1.0: Ngeset tingkat zoom awal jadi 100% (gak di-zoom in atau zoom out).
        • Contoh: <meta name="viewport" content="width=device-width, initial-scale=1.0">
        • Tanpa meta viewport ini, website-mu bakal keliatan kecil banget pas dibuka di HP (kayak versi desktop yang di-zoom out).
      • description: Deskripsi singkat tentang isi halamanmu (biasanya sekitar 150-160 karakter).
        • Ini penting buat SEO. Mesin pencari sering nampilin deskripsi ini sebagai cuplikan (snippet) di bawah judul di hasil pencarian. Bikin yang menarik biar orang mau ngeklik!
        • Contoh: <meta name="description" content="Belajar dasar-dasar HTML, bahasa markup fundamental untuk web, dengan gaya santai dan mudah dipahami untuk pemula.">
      • keywords: (Udah kurang relevan buat SEO modern, Google udah gak terlalu merhatiin ini karena sering disalahgunain).
        • Dulu dipake buat nyantumin kata kunci yang relevan sama halaman.
        • Contoh: <meta name="keywords" content="html, belajar html, tutorial html, html dasar">
      • author: Nama pembuat atau penulis halaman/website.
        • Contoh: <meta name="author" content="Tim Koding Santai">
      • robots: Ngasih instruksi ke web crawler (robot mesin pencari) soal gimana cara nanganin halamanmu (misal, boleh diindeks atau enggak, boleh ngikutin link atau enggak).
        • Contoh: <meta name="robots" content="index, follow"> (defaultnya gini sih) atau <meta name="robots" content="noindex, nofollow"> (jangan indeks halaman ini dan jangan ikuti link di halaman ini).
      • Dan masih banyak lagi name lain, termasuk yang spesifik buat platform tertentu (kayak Open Graph buat Facebook, Twitter Cards).

  3. http-equiv dan content (Ekivalen HTTP Header):

    • Kombinasi ini bisa dipake buat nyimulasi beberapa HTTP header.
    • Contoh yang dulu sering dipake (tapi sekarang ada cara yang lebih baik):
      • refresh: Buat nge-refresh halaman otomatis setelah sekian detik, atau nge-redirect ke URL lain.
        • Contoh: <meta http-equiv="refresh" content="5;url=https://www.halamanbaru.com/"> (refresh setelah 5 detik dan pindah ke halamanbaru.com).
        • Hindari ini sebisa mungkin! Nge-refresh atau nge-redirect tiba-tiba itu pengalaman pengguna yang buruk dan bisa bikin bingung. Ada cara yang lebih baik di sisi server atau pake JavaScript.
    • Penggunaan http-equiv udah makin jarang karena banyak fungsinya bisa ditangani lebih baik di level server atau dengan tag lain.

Tag <link> ini dipake buat ngehubungin dokumen HTML-mu dengan resource eksternal. Dia juga elemen kosong. Atribut utamanya adalah rel (relationship) dan href (hypertext reference).

Beberapa penggunaan <link> yang paling umum di <head>:

  1. Menghubungkan ke File CSS Eksternal:

    • Ini cara yang paling umum dan disarankan buat nambahin style ke halaman web-mu.
    • rel="stylesheet": Ngasih tau browser kalau file yang di-link itu adalah stylesheet (CSS).
    • href="path/ke/file-style.css": Path ke file CSS-mu.
    • Contoh: <link rel="stylesheet" href="css/gaya.css">
    • Kamu bisa punya beberapa tag <link rel="stylesheet"> kalau punya banyak file CSS.

  2. Menambahkan Favicon (Ikon Situs):

    • Favicon itu ikon kecil yang tampil di tab browser, di daftar bookmark, atau di sebelah nama website di hasil pencarian tertentu.
    • rel="icon" (atau shortcut icon buat kompatibilitas lama).
    • href="path/ke/favicon.ico" (atau .png, .svg).
    • type="image/x-icon" (atau image/png, image/svg+xml sesuai formatnya).
    • Contoh paling simpel: <link rel="icon" href="favicon.ico" type="image/x-icon">
    • Untuk dukungan favicon yang lebih luas (berbagai ukuran buat berbagai perangkat), ada generator favicon online yang bisa ngasih kamu set tag <link> yang lebih lengkap.

  3. Preloading, Prefetching, Preconnecting (Optimasi Performa):

    • Ini lebih advanced, tapi <link> juga bisa dipake buat ngasih "hint" ke browser soal resource yang mungkin bakal dibutuhin nanti, jadi browser bisa mulai nyiapin lebih awal.
    • rel="preload": Ngasih tau browser buat nge-load resource tertentu (misal, font, skrip, gambar penting) sesegera mungkin karena bakal dibutuhin di halaman saat ini.
      • Contoh: <link rel="preload" href="font-utama.woff2" as="font" type="font/woff2" crossorigin>
    • rel="prefetch": Mirip preload, tapi buat resource yang mungkin bakal dibutuhin di navigasi berikutnya (misal, halaman lain yang sering dikunjungi dari halaman ini). Prioritasnya lebih rendah.
    • rel="preconnect": Minta browser buat bikin koneksi awal (DNS lookup, TCP handshake, TLS negotiation) ke domain tertentu yang resource-nya bakal segera diambil. Ini bisa hemat waktu pas resource-nya beneran diminta.

  4. Canonical URL:

    • rel="canonical": Kalau kamu punya beberapa halaman dengan konten yang mirip atau sama persis (misal, versi cetak, versi dengan parameter URL beda), tag ini ngasih tau mesin pencari mana versi URL yang "utama" atau "kanonikal" yang harus diindeks. Ini penting buat ngindarin masalah duplikat konten di SEO.
    • Contoh: <link rel="canonical" href="https://www.contoh.com/artikel-asli/">

<style>: Nulis CSS Langsung di HTML (Internal CSS)

Selain nge-link ke file CSS eksternal, kamu juga bisa nulis aturan CSS langsung di dalem <head> pake tag <style>. Ini disebut Internal CSS atau Embedded CSS.

html
<head>
    <title>Halaman dengan Internal CSS</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }
        h1 {
            color: navy;
            text-align: center;
        }
    </style>
</head>

Kapan dipake?

  • Buat style yang spesifik cuma buat satu halaman itu aja.
  • Buat ngetes atau prototyping cepet. Kapan dihindari?
  • Kalau style-nya mau dipake di banyak halaman (lebih baik file CSS eksternal biar gak ngulang-ngulang kode dan gampang di-manage).
  • Kalau kode CSS-nya udah banyak banget (bikin file HTML jadi "gendut").

Secara umum, file CSS eksternal (<link rel="stylesheet">) adalah praktik terbaik buat proyek yang lebih besar.

Meskipun tag <script> bisa ditaruh di <head>, seringkali praktik terbaiknya adalah naruh <script> tepat sebelum tag penutup </body>. Kenapa? Biar konten HTML dan CSS-nya di-render dulu sama browser sebelum ngejalanin JavaScript, jadi halaman keliatan lebih cepet sama pengguna.

Tapi, kalau emang harus di <head> (misal, skrip tertentu yang harus jalan duluan, atau library yang ngasih rekomendasi gitu), ada atribut async dan defer yang bisa bantu ngatur perilakunya:

  • <script src="path/ke/skrip.js"></script>: Nge-link ke file JavaScript eksternal.
  • <script> // Kode JavaScript langsung di sini </script>: Nulis JavaScript internal.
  • <script src="skrip.js" async></script>: Browser bakal nge-download skrip sambil tetep nge-parsing HTML, terus ngejalanin skripnya begitu selesai di-download (bisa ngejeda parsing HTML pas eksekusi). Urutan eksekusi skrip dengan async gak dijamin.
  • <script src="skrip.js" defer></script>: Browser bakal nge-download skrip sambil tetep nge-parsing HTML, tapi ngejalanin skripnya setelah HTML selesai di-parsing, dan sebelum event DOMContentLoaded. Urutan eksekusi skrip dengan defer bakal sesuai urutan kemunculannya di HTML. Ini sering jadi pilihan yang bagus kalau skrip ditaruh di <head>.
html
<head>
    <title>Halaman dengan Skrip</title>
    <link rel="stylesheet" href="style.css">
    <!-- Contoh skrip di head -->
    <script src="library-penting.js" defer></script>
    <script>
        console.log("Ini skrip internal di head, jalan setelah parsing HTML kalau pake defer di eksternal.");
    </script>
</head>
<body>
    <!-- Konten halaman -->
    <!-- Praktik umum: skrip ditaruh di sini -->
    <script src="skrip-utama.js"></script>
</body>

<base>: Nentuin Base URL Buat Semua URL Relatif (Jarang Dipake)

Tag <base> ini agak unik. Dia nentuin URL dasar (base URL) yang bakal dipake buat semua URL relatif (link, gambar, skrip, dll.) di dalem dokumen. Cuma boleh ada satu <base> per dokumen, dan harus punya atribut href atau target, atau keduanya.

Kalau ada <base href="https://www.websiteku.com/folder/">, terus kamu punya <img src="gambar.jpg">, browser bakal nyari gambar itu di https://www.websiteku.com/folder/gambar.jpg.

Penggunaannya sekarang udah cukup jarang karena bisa bikin bingung kalau gak hati-hati. Biasanya lebih aman nulis URL relatif atau root-relatif secara eksplisit.

Wih, ternyata <head> itu rame juga ya isinya! Elemen-elemen ini, meskipun "tersembunyi", punya peran vital buat ngasih tau browser cara nampilin halamanmu dengan bener, ngasih info ke mesin pencari, ngehubungin ke file-file penting, dan ngatur banyak hal teknis lainnya.

Memahami isi <head> ini nambahin satu lagi lapisan pemahamanmu soal gimana halaman web bekerja secara keseluruhan.

Selanjutnya, kita bakal bahas soal cara nampilin karakter-karakter khusus di HTML pake Entitas HTML.

Kuis Tag <head> HTML

Pertanyaan 1 dari 4

Elemen apa di dalam <head> yang WAJIB ada dan menentukan judul yang tampil di tab browser serta penting untuk SEO?