Langsung ke konten

Head Section di HTML: Elemen Penting dalam Tag `<head>`

Pelajari elemen-elemen penting di head section HTML seperti title, meta charset, meta viewport, meta description, link favicon, dan stylesheet.

Tutorial
Belajar HTML untuk Pemula
Belajar HTML untuk Pemula
Advertisement

Artikel ini merupakan bagian dari seri Belajar HTML untuk Pemula di hanifmu.com. Setelah memahami character encoding, kita bahas elemen-elemen di dalam <head>. Bagian ini tidak terlihat oleh pengguna tapi penting untuk browser, SEO, dan media sosial.

Apa itu Head Section?

Head section adalah bagian di dalam tag <head> yang berisi metadata tentang halaman web. Metadata adalah informasi tentang halaman, bukan konten yang terlihat.

<!DOCTYPE html>
<html lang="id">
  <head>
    <!-- Metadata di sini -->
  </head>
  <body>
    <!-- Konten terlihat di sini -->
  </body>
</html>

<title>

Tag <title> menentukan judul halaman yang muncul di tab browser dan hasil pencarian Google.

<title>Cara Belajar HTML untuk Pemula - Hanifmu</title>

Best Practice Title

  • Panjang: 50-60 karakter
  • Masukkan kata kunci utama di awal
  • Tambahkan nama website di akhir
  • Buat unik untuk setiap halaman
<!-- ❌ Kurang baik -->
<title>Halaman</title>

<!-- ✅ Baik -->
<title>Belajar HTML untuk Pemula: Panduan Lengkap - Hanifmu</title>

<meta charset>

Deklarasi karakter encoding:

<meta charset="UTF-8" />

Letakkan di baris pertama di dalam <head>.

<meta name="viewport">

Membuat halaman responsif di berbagai ukuran layar:

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

Penjelasan

  • width=device-width — Lebar viewport sesuai lebar perangkat
  • initial-scale=1.0 — Skala awal 100% (tidak di-zoom)

Tanpa ini, website akan terlihat kecil di HP.

<meta name="description">

Deskripsi halaman yang muncul di hasil pencarian Google:

<meta name="description" content="Pelajari HTML dari nol. Panduan lengkap untuk pemula dengan contoh kode dan praktik terbaik." />

Best Practice Description

  • Panjang: 150-160 karakter
  • Masukkan kata kunci
  • Buat menarik dan informatif
  • Unik untuk setiap halaman

<meta name="robots">

Mengontrol bagaimana search engine mengindex halaman:

<!-- Izinkan index dan follow -->
<meta name="robots" content="index, follow" />

<!-- Larang index -->
<meta name="robots" content="noindex" />

<!-- Larang follow link -->
<meta name="robots" content="nofollow" />

Favicon adalah ikon kecil yang muncul di tab browser:

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

Ukuran Favicon

UkuranKegunaan
16x16Tab browser
32x32Tab browser
180x180Apple touch icon
192x192Android Chrome
512x512PWA splash screen

Menghubungkan file CSS eksternal:

<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />

<script> untuk JavaScript

Menambahkan file JavaScript:

<!-- Di head (defer untuk load setelah HTML) -->
<script src="script.js" defer></script>

<!-- Di akhir body -->
<script src="script.js"></script>

Gunakan defer agar JavaScript tidak memblokir rendering HTML.

<meta> untuk Open Graph

Open Graph mempengaruhi tampilan saat halaman dibagikan di media sosial:

<!-- Open Graph (Facebook, LinkedIn) -->
<meta property="og:title" content="Judul Halaman" />
<meta property="og:description" content="Deskripsi halaman" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com/halaman" />
<meta property="og:type" content="website" />

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Judul Halaman" />
<meta name="twitter:description" content="Deskripsi halaman" />
<meta name="twitter:image" content="https://example.com/image.jpg" />

<meta> untuk Tema Warna

Warna tema browser di mobile:

<meta name="theme-color" content="#4caf50" />

Contoh Head Section Lengkap

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Belajar HTML untuk Pemula - Hanifmu</title>
    <meta name="description" content="Panduan belajar HTML lengkap untuk pemula. Mulai dari tag dasar hingga semantic HTML." />
    <meta name="robots" content="index, follow" />
    <meta name="author" content="Muhammad Hanif" />

    <link rel="icon" href="favicon.ico" />
    <link rel="stylesheet" href="styles.css" />

    <meta property="og:title" content="Belajar HTML untuk Pemula" />
    <meta property="og:description" content="Panduan belajar HTML lengkap untuk pemula." />
    <meta property="og:image" content="https://hanifmu.com/og-image.jpg" />
    <meta property="og:url" content="https://hanifmu.com/belajar-html" />

    <meta name="theme-color" content="#4caf50" />

    <script src="script.js" defer></script>
  </head>
  <body>
    <!-- Konten -->
  </body>
</html>

Urutan Head Section

Urutan yang disarankan:

  1. <meta charset> — Paling pertama
  2. <title>
  3. <meta name="viewport">
  4. <meta name="description">
  5. <link> untuk favicon
  6. <link> untuk stylesheet
  7. <meta> untuk Open Graph
  8. <script> dengan defer

Ringkasan

  • <head> berisi metadata yang tidak terlihat oleh pengguna
  • <title> untuk judul halaman di tab browser
  • <meta charset> untuk encoding
  • <meta name="viewport"> untuk responsif
  • <meta name="description"> untuk SEO
  • <link> untuk favicon dan stylesheet
  • <script defer> untuk JavaScript
  • <meta> Open Graph untuk media sosial

Langkah Selanjutnya

Kamu sudah memahami head section. Artikel selanjutnya membahas SEO basics, cara mengoptimasi HTML untuk mesin pencari.