MulaiCode
HTML

HTML Head

Pelajari elemen <head> dalam HTML yang berisi metadata, link CSS, dan informasi penting lainnya tentang dokumen.

Elemen <head> di HTML

Elemen <head> berisi metadata dan informasi penting tentang dokumen HTML. Bagian ini tidak ditampilkan secara langsung di halaman web, namun sangat penting untuk pengaturan tampilan, SEO, dan fungsionalitas.

Apa Saja yang Bisa Ada di <head>?

Berikut adalah elemen-elemen umum yang berada di dalam <head>:

  • <title>: Menentukan judul halaman (muncul di tab browser).
  • <meta>: Menyediakan metadata seperti deskripsi, charset, dan viewport.
  • <link>: Untuk menghubungkan file eksternal seperti CSS.
  • <style>: CSS internal.
  • <script>: JavaScript internal atau link ke file eksternal.

Contoh Penggunaan Elemen <head>

<!DOCTYPE html>
<html>
<head>
  <title>Contoh Judul</title>
  <meta charset="UTF-8" />
  <meta name="description" content="Belajar HTML Head Element" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="styles.css" />
  <style>
    body { background-color: #f0f0f0; }
  </style>
</head>
<body>
  <h1>Halo Dunia</h1>
</body>
</html>

Penjelasan Setiap Tag:

TagFungsi
<title>Judul halaman di tab browser
<meta charset="UTF-8">Mendefinisikan encoding karakter
<meta name="viewport">Mengatur tampilan agar responsif di perangkat mobile
<meta name="description">Deskripsi halaman (berguna untuk SEO)
<link>Menghubungkan ke file eksternal, seperti CSS
<style>CSS internal
<script>Menyisipkan atau menghubungkan JavaScript

Tips

  • Selalu sertakan <meta charset="UTF-8"> untuk mendukung karakter internasional.
  • Gunakan <meta name="viewport"> agar halaman tampil baik di perangkat mobile.
  • Optimalkan <meta name="description"> untuk meningkatkan hasil pencarian di Google.

On this page