HTML - Elemen Kepala
Elemen HTML <head>adalah wadah untuk elemen berikut:
<title>, <style>,
<meta>, <link>, <script>, dan <base>.
Elemen HTML <head>
Elemen <head>adalah wadah untuk metadata (data tentang data) dan ditempatkan di antara <html>tag dan <body>tag.
Metadata HTML adalah data tentang dokumen HTML. Metadata tidak ditampilkan.
Metadata biasanya menentukan judul dokumen, kumpulan karakter, gaya, skrip, dan informasi meta lainnya.
Elemen <title> HTML
Elemen <title>mendefinisikan judul dokumen. Judul harus hanya teks, dan ditampilkan di bilah judul browser atau di tab halaman.
Elemen <title>ini diperlukan dalam dokumen HTML!
Isi judul halaman sangat penting untuk optimasi mesin pencari (SEO)! Judul halaman digunakan oleh algoritme mesin pencari untuk menentukan urutan saat mencantumkan halaman dalam hasil pencarian.
<title>elemen :
- mendefinisikan judul di bilah alat browser
- memberikan judul untuk halaman ketika ditambahkan ke favorit
- menampilkan judul halaman di hasil mesin telusur
Jadi, usahakan untuk membuat judul seakurat dan semenarik mungkin!
Sebuah dokumen HTML sederhana:
Contoh
<!DOCTYPE html>
<html>
<head>
<title>A Meaningful Page
Title</title>
</head>
<body>
The content of the document......
</body>
</html>
Elemen <style> HTML
Elemen <style>ini digunakan untuk menentukan informasi gaya untuk satu halaman HTML:
Contoh
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
Elemen <link> HTML
Elemen <link>mendefinisikan hubungan antara dokumen saat ini dan sumber daya eksternal.
Tag <link>
paling sering digunakan untuk menautkan ke lembar gaya eksternal:
Contoh
<link rel="stylesheet" href="mystyle.css">
Tip: Untuk mempelajari semua tentang CSS, kunjungi Tutorial CSS kami .
Elemen HTML <meta>
Elemen <meta>ini biasanya digunakan untuk menentukan set karakter, deskripsi halaman, kata kunci, penulis dokumen, dan pengaturan viewport.
Metadata tidak akan ditampilkan di halaman, tetapi digunakan oleh browser (cara menampilkan konten atau memuat ulang halaman), oleh mesin pencari (kata kunci), dan layanan web lainnya.
Contoh
Tentukan set karakter yang digunakan:
<meta charset="UTF-8">
Tentukan kata kunci untuk mesin pencari:
<meta name="keywords" content="HTML, CSS, JavaScript">
Tentukan deskripsi halaman web Anda:
<meta name="description" content="Free Web tutorials">
Tentukan penulis halaman:
<meta name="author" content="John Doe">
Refresh dokumen setiap 30 detik:
<meta http-equiv="refresh" content="30">
Mengatur viewport agar situs web Anda terlihat bagus di semua perangkat:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Contoh <meta>tag:
Contoh
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John
Doe">
Mengatur Viewport
Area pandang adalah area halaman web yang terlihat oleh pengguna. Ini bervariasi dengan perangkat - itu akan lebih kecil di ponsel daripada di layar komputer.
Anda harus menyertakan <meta>elemen berikut di semua halaman web Anda:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Ini memberikan petunjuk kepada browser tentang cara mengontrol dimensi dan penskalaan halaman.
Bagian width=device-widthmengatur lebar halaman untuk mengikuti lebar layar perangkat (yang akan bervariasi tergantung pada perangkat).
Bagian initial-scale=1.0ini mengatur tingkat zoom awal saat halaman pertama kali dimuat oleh browser.
Berikut adalah contoh halaman web tanpa tag meta viewport, dan halaman web yang sama dengan tag meta viewport:
Tip: Jika Anda menjelajahi halaman ini dengan ponsel atau tablet, Anda dapat mengklik dua tautan di bawah untuk melihat perbedaannya.
Elemen HTML <script>
Elemen <script>ini digunakan untuk mendefinisikan JavaScript sisi klien.
JavaScript berikut menulis "Halo JavaScript!" menjadi elemen HTML dengan id="demo":
Contoh
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
Tip: Untuk mempelajari semua tentang JavaScript, kunjungi Tutorial JavaScript kami .
Elemen <base> HTML
Elemen <base>menentukan URL dasar dan/atau target untuk semua URL relatif di halaman.
Tag <base>harus memiliki salah satu href atau atribut target, atau keduanya.
Hanya ada satu <base>
elemen tunggal dalam sebuah dokumen!
Contoh
Tentukan URL default dan target default untuk semua link di halaman:
<head>
<base href="https://www.w3schools.com/" target="_blank">
</head>
<body>
<img src="images/stickman.gif" width="24" height="39"
alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>
Ringkasan Bab
- Elemen
<head>adalah wadah untuk metadata (data tentang data) - Elemen
<head>ditempatkan di antara<html>tag dan<body>tag - Elemen
<title>diperlukan dan menentukan judul dokumen - Elemen
<style>ini digunakan untuk mendefinisikan informasi gaya untuk satu dokumen - Tag
<link>paling sering digunakan untuk menautkan ke lembar gaya eksternal - Elemen
<meta>ini biasanya digunakan untuk menentukan set karakter, deskripsi halaman, kata kunci, penulis dokumen, dan pengaturan viewport - Elemen
<script>ini digunakan untuk mendefinisikan JavaScript sisi klien - Elemen
<base>menentukan URL dasar dan/atau target untuk semua URL relatif di halaman
Elemen kepala HTML
| Tag | Description |
|---|---|
| <head> | Defines information about the document |
| <title> | Defines the title of a document |
| <base> | Defines a default address or a default target for all links on a page |
| <link> | Defines the relationship between a document and an external resource |
| <meta> | Defines metadata about an HTML document |
| <script> | Defines a client-side script |
| <style> | Defines style information for a document |
Untuk daftar lengkap semua tag HTML yang tersedia, kunjungi Referensi Tag HTML kami .