Elemen <head> yang ada pada HTML adalah wadah atau penampung untuk elemen HTML yang lain. Contohnya elemen berikut: , <style>, <meta>, <link>, <script>, dan <base>.</p>.
Elemen <head> adalah wadah untuk metadata pada HTML dan ditempatkan di antara tag <html> dan tag <body> .
Metadata HTML adalah data tentang dokumen HTML dan meetadata tidak akan ditampilkan ketika sebuah kode dijalankan.
Metadata biasanya menentukan judul dokumen, kumpulan karakter, style script, dan informasi meta lainnya.
Section Artikel
Elemen <title> pada HTML
Elemen <title> mendefinisikan judul dokumen. Judul harusnya hanya berupa teks, dan teks tersebut ditampilkan di bilah judul browser atau di tab halaman.
Tag <title> sangat diperlukan dalam dokumen HTML.
Isi judul halaman sangat penting untuk mengoptimalkan mesin pencari atau search engine optimization (SEO). Title pada halaman digunakan oleh algoritma mesin pencari untuk memutuskan urutan saat daftar halaman dalam hasil pencarian.
Elemen <title>
- mendefinisikan judul pada toolbar browser
- memberikan judul untuk halaman ketika ditambahkan ke favorit
- menampilkan judul halaman dalam hasil mesin pencari
Jadi, ketika mebuat sebuah judul cobalah membuatnya seakurat mungkin dan bermakna.
Contoh sederhana dokumen HTML :
<!DOCTYPE html> <html> <head> <title>Halaman judul yang bermakna</title> </head> <body> <p>Konten pada elemen body akan ditampilkan di jendela browser.</p> <p>Konten pada elemen title akan ditampilkan di tab browser, di favorit dan di hasil mesin pencari.</p> </body> </html>
Elemen <style> HTML
Elemen <style> pada HTML dapat digunakan untuk menentukan informasi style pada suatu halaman web.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
</head>
<body>
<h1>Ini adalah Heading</h1>
<p>Ini adalah paragraf.</p>
</body>
</html>
Elemen <link> HTML
Elemen <link> mendefinisikan hubungan antara dokumen saat ini dengan file eksternal.
Tag <link> paling sering digunakan untuk menautkan ke style sheet eksternal.
Contoh :
<!DOCTYPE html> <html> <head> <title>Judul Halaman</title> <link rel="stylesheet" href="mystyle.css"> </head> <body> <h1>Ini adalah Heading</h1> <p>Ini adalah paragraf.</p> </body> </html>
Elemen <meta> HTML
Elemen<meta> 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 untuk menunjukan cara menampilkan konten atau memuat ulang halaman, digunakan oleh mesin pencari untuk mencari kata kunci, dan layanan web lainnya.
Contoh :
Menentukan set karakter yang digunakan:
| <meta charset=”UTF-8″> |
Menentukan kata kunci untuk mesin pencari:
| <meta name=”keywords” content=”HTML, CSS, JavaScript”> |
Menentukan deskripsi halaman web Anda:
| <meta name=”description” content=”Free Web tutorials”> |
Menentukan penulis halaman:
| <meta name=”author” content=”John Doe”> |
Merefresh dokumen setiap 30 detik:
| <meta http-equiv=”refresh” content=”30″> |
Mengatur viewport agar situs web terlihat bagus di semua perangkat:
| <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> |
Contoh penggunaan tag <meta> :
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="description" content="Tutorial web gratis"> <meta name="keywords" content="HTML, CSS, JavaScript"> <meta name="author" content="John Doe"> </head> <body> <p>Semua informasi meta masuk ke dalam bagian Head.</p> </body> </html>
Mengatur Viewport
viewport adalah area halaman web yang dapat terlihat oleh pengguna. Viewport bervariasi pada setiap perangkat , viewport akan lebih kecil di ponsel dibandingkan di layar komputer.
Anda harus menyertakan elemen <meta> berikut di semua halaman web Anda:
| <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> |
Elemen <meta> diatas berfungsi untuk memberikan instruksi kepada browser tentang bagaimana cara mengontrol dimensi dan skala halaman.
width= bagian lebar perangkat menyetel lebar halaman agar mengikuti lebar layar perangkat (yang akan bervariasi tergantung pada perangkat).
Bagian initial-scale = 1.0 menyetel tingkat zoom awal saat halaman pertama kali dimuat oleh browser.
Elemen <script> HTML
Elemen <script> digunakan untuk mendefinisikan client-side JavaScript.
JavaScript berikut menulis “Halo JavaScript!” menjadi elemen HTML dengan id = “demo”.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Halo JavaScript!";
}
</script>
</head>
<body>
<h1>Halaman webku</h1>
<p id="demo">Sebuah Paragraf</p>
<button type="button" onclick="myFunction()">Cobalah</button>
</body>
</html>
Elemen <base> HTML
Elemen <base> digunakan untuk menentukan URL dasar dan / atau target untuk semua URL relative dalam sebuah halaman.
Elemen <base> harus memiliki salah satu dari href atau atribut target, atau keduanya.
Perhatikan bahwa hanya boleh ada satu elemen <base> dalam sebuah dokumen.
Contoh :
<!DOCTYPE html> <html> <head> <base href="http://clipart-library.com/stickman.html" target="_blank"> </head> <body> <h1>Elemen base</h1> <p><img src="http://clipart-library.com/images/zcXnAMqcB.jpg" width="50" height="39" alt="Stickman"> - Perhatikan bahwa kami hanya menentukan alamat relatif untuk gambar. Karena kami telah menentukan URL dasar di bagian head, browser akan mencari gambar di "http://clipart-library.com/stickman.html" .</p> <p><a href="tags/tag_base.asp">tag HTML base</a> - perhatikan bahwa tautan terbuka di jendela baru, meskipun tidak memiliki atribut target = "_ blank". Ini karena atribut target dari elemen dasar disetel ke "_blank".</p> </body> </html>
Ringkasan Bab
- Elemen <head> merupakan wadah untuk metadata pada HTML
- Elemen <head> ditempatkan di antara tag <html> dan tag <body>
- Elemen <title> diperlukan untuk menentukan judul dokumen
- Elemen <style> digunakan untuk menentukan informasi style untuk suatu dokumen
- Tag <link> paling sering digunakan untuk menautkan ke style sheet ke file eksternal
- Elemen <meta> biasanya digunakan untuk menentukan set karakter, deskripsi halaman, kata kunci, penulis dokumen, dan pengaturan viewport
- Elemen <script> digunakan untuk mendefinisikan JavaScripts
- Elemen <base> menentukan URL dasar dan / atau target untuk semua URL relative dalam sebuah halaman
Element head HTML
| Tag | Deskripsi |
| <head> | Mendefinisikan informasi tentang dokumen |
| <title> | Mendefinisikan judul dokumen |
| <style> | Mendefinisikan informasi style untuk dokumen |
| <link> | Mendefinisikan hubungan antara dokumen dan sumber daya eksternal |
| <meta> | Mendefinisikan metadata tentang dokumen HTML |
| <script> | Mendefinisikan JavaScript |
| <base> | Mendefinisikan alamat default atau target default untuk semua link di halaman |
Sekian pembahasan dari bab kali ini, semoga bermanfaat.
