Tag Head Pada HTML – Belajar Pemrograman Web

Tag Head (<head>) pada HTML digunakan untuk menyediakan informasi mengenai dokumen HTML tersebut. Ini adalah bagian dari struktur dasar sebuah halaman web dan tidak ditampilkan secara langsung di browser, tetapi berisi metadata dan informasi lainnya yang penting untuk browser dan mesin pencari.

Berikut adalah beberapa elemen umum yang dapat kamu temui di dalam tag <head>:

Title pada Head

Elemen <title> digunakan untuk menentukan judul halaman web. Judul ini akan ditampilkan di tab browser ketika halaman web tersebut dibuka. Contoh: <title>Facebook</title>.

Metadata pada Head

Metadata memberikan informasi tambahan tentang halaman web, seperti deskripsi, kata kunci, dan instruksi untuk mesin pencari (SEO). Metadata ini dapat ditentukan menggunakan elemen <meta> Misalnya:

<meta charset="UTF-8">
<meta name="description" content="Ini adalah contoh halaman web">
<meta name="keywords" content="HTML, contoh, tutorial">

Link ke CSS atau JavaScript

Elemen <link> digunakan untuk menautkan halaman web dengan file CSS eksternal atau berkas JavaScript. Ini memungkinkan kamu untuk memisahkan struktur dan styling/gaya dalam pengembangan web.

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

Inline CSS atau JavaScript

Kamu juga dapat menempatkan kode CSS atau JavaScript langsung di dalam tag <head>, meskipun ini kurang disarankan untuk kode yang lebih besar. Contoh:

<style>
    /* Kode CSS*/
</style>
<script>
    // Kode JavaScript
</script>

Icon Situs (Favicon)

Elemen <link> juga dapat digunakan untuk menautkan favicon, yang merupakan ikon kecil yang ditampilkan di bilah judul atau tab browser.

<link rel="icon" href="favicon.ico" type="image/x-icon">

Informasi lainnya

Selain elemen-elemen di atas, tag <head> juga dapat berisi informasi tambahan seperti pengaturan viewport untuk responsifitas, tag <base> untuk menentukan URL dasar, dan lainnya.

Dengan menggunakan tag <head> secara efektif, kamu dapat memberikan informasi yang penting bagi browser dan mesin pencari (SEO), serta mengelola aspek-aspek tertentu dari tampilan dan perilaku halaman web Anda.

Baca tentang pentingnya SEO disini: https://apanih.com/mengapa-seo-penting-untuk-website-belajar-pemrograman-web/

Contoh Penerapan Tag Head Lengkap

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="Ini adalah contoh halaman web dengan tag head yang lengkap">
    <meta name="keywords" content="HTML, CSS, JavaScript, contoh">
    <meta name="author" content="Nama Kamu">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Contoh Halaman</title>
    
    <link rel="stylesheet" type="text/css" href="style.css">
    
    <script src="script.js"></script>
    
    <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
    <!-- Konten halaman web kamu akan berada di sini -->
</body>
</html>