Docs/HTML/Head & Meta

HTML Head & Meta Tags

Elemen <head> berisi metadata — informasi tentang halaman yang tidak ditampilkan langsung.

Elemen di Dalam Head

  • <title> — judul halaman (ditampilkan di tab browser)
  • <meta> — metadata (charset, viewport, description, dll)
  • <link> — menghubungkan file eksternal (CSS, favicon)
  • <style> — CSS internal
  • <script> — JavaScript

Meta Tags Penting

  • charset — encoding karakter (selalu gunakan UTF-8)
  • viewport — untuk responsif di mobile
  • description — deskripsi halaman untuk SEO
  • keywords — kata kunci SEO
  • author — penulis halaman
index.html
Try It →
<!DOCTYPE html>
<html lang="id">
<head>
  <!-- Encoding -->
  <meta charset="UTF-8">
  
  <!-- Responsive viewport -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <!-- SEO -->
  <title>Judul Halaman Saya</title>
  <meta name="description" content="Deskripsi halaman untuk mesin pencari">
  <meta name="keywords" content="html, css, javascript, belajar">
  <meta name="author" content="Nama Developer">
  
  <!-- Social Media (Open Graph) -->
  <meta property="og:title" content="Judul untuk Share">
  <meta property="og:description" content="Deskripsi saat di-share">
  <meta property="og:image" content="https://example.com/image.jpg">
  
  <!-- Favicon -->
  <link rel="icon" type="image/x-icon" href="/favicon.ico">
  
  <!-- External CSS -->
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Konten halaman</h1>
</body>
</html>