Kalau ngomongin HTML, biasanya kita fokus ke bagian <body>, padahal ada satu bagian penting yang sering diremehin, yaitu <head> element. Nah, di artikel ini, kita bakal bahas semua yang perlu lo tahu tentang elemen ini. Yuk, langsung gas!
1. The HTML <head> Element
Bagian <head> ini fungsinya buat nyimpen meta-informasi tentang halaman web. Isinya bisa macem-macem, dari judul halaman, stylesheet, script, sampai metadata lainnya. Walaupun nggak kelihatan langsung di halaman web, tapi ini penting banget buat SEO dan performa situs.
Contoh simpel <head>:
<head>
<title>Belajar HTML Head</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>2. The HTML <title> Element
<title> adalah elemen buat ngasih judul ke halaman web. Ini yang muncul di tab browser dan juga dipake sama mesin pencari buat nentuin judul halaman di hasil pencarian (SERP).
Contoh:
<title>Belajar HTML Head - Lengkap!</title>3. The HTML <style> Element
Kalau lo mau nambahin CSS langsung di dalam HTML, lo bisa pakai <style> di <head>. Tapi ingat, ini cuma buat styling simpel, kalau lebih kompleks mending pake file CSS terpisah.
Contoh:
<style>
body {
background-color: #f4f4f4;
font-family: Arial, sans-serif;
}
</style>4. The HTML <link> Element
Buat ngehubungin file eksternal ke HTML, kayak CSS atau favicon, lo bisa pakai <link>.
Contoh buat nyambungin CSS:
<link rel="stylesheet" href="styles.css">Contoh buat favicon:
<link rel="icon" href="favicon.png" type="image/png">5. The HTML <meta> Element
Meta tag ini super penting buat SEO dan tampilan halaman di berbagai device. Beberapa meta tag yang sering dipakai:
• Charset buat encoding:
<meta charset="UTF-8">• Description buat SEO:
<meta name="description" content="Belajar HTML head secara lengkap dan mudah dipahami!">• Keywords (udah nggak begitu dipakai sih):
<meta name="keywords" content="HTML, head, tutorial">6. Setting The Viewport
Viewport ini penting biar halaman web responsive dan enak diliat di HP atau tablet. Tanpa ini, tampilan bisa jadi ancur di device kecil.
Contoh:
<meta name="viewport" content="width=device-width, initial-scale=1.0">7. The HTML <script> Element
Buat nambahin JavaScript ke halaman, lo bisa pakai <script>. Bisa langsung di dalam HTML atau dipisah ke file eksternal.
Contoh inline script:
<script>
alert("Halo, selamat datang di website ini!");
</script>Contoh external script:
<script src="script.js"></script>8. The HTML <base> Element
Kalau lo sering pake link relatif di halaman web, <base> bisa dipake buat nentuin URL dasar. Jadi semua link yang nggak punya domain bakal otomatis pake URL ini sebagai dasar.
Contoh:
<base href="https://www.sovyan.com/">Dengan <base>, link seperti <a href="about.html"> bakal otomatis jadi https://www.sovyan.com/about.html.
9. Chapter Summary
Biar gampang diingat, ini rangkuman elemen yang udah kita bahas:
<head>: Nampung meta-informasi halaman<title>: Nentuin judul halaman<style>: Buat styling langsung di HTML<link>: Buat ngehubungin file eksternal<meta>: Buat nambahin metadata (SEO, charset, viewport, dll.)<script>: Buat nambahin JavaScript<base>: Nentuin URL dasar buat link relatif
10. HTML Head Elements
Berikut contoh daftar lengkap elemen yang bisa dipake di <head>:
<head>
<title>Judul Halaman</title>
<meta charset="UTF-8">
<meta name="description" content="Penjelasan tentang HTML head elements">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.png" type="image/png">
<script src="script.js"></script>
<base href="https://www.sovyan.com/">
</head>Itu dia penjelasan lengkap tentang HTML Head Element. Semoga makin paham dan bisa langsung dipraktekin di project lo! Kalau ada pertanyaan, langsung komentar aja! Happy coding!
Komentar