Elemen <head> HTML
Elemen <head> adalah wadah untuk metadata (data tentang data) dan ditempatkan di antara tag <html> dan tag <body>.
Metadata HTML adalah data tentang dokumen HTML. Metadata tidak ditampilkan.
Metadata biasanya menentukan judul dokumen, kumpulan karakter, styles, links, skrip, dan informasi meta lainnya.
Tag berikut menjelaskan metadata: <title>, <style>, <meta>, <link>, <script>, dan <base>.
Elemen <HTML> HTML
Elemen <title> mendefinisikan judul dokumen, dan diperlukan di semua dokumen HTML / XHTML.
Elemen <title>:
- mendefinisikan judul di tab browser
- memberikan judul untuk halaman saat ditambahkan ke favorit
- menampilkan judul untuk halaman di hasil mesin pencari
Contoh sebuah dokumen HTML sederhana:
<!DOCTYPE html>
<html>
<head>
<title>Page
Title</title>
</head>
<body>
Conten dari dokumen......
</body>
</html>
Elemen <style> HTML
Elemen <style> digunakan untuk menentukan informasi style untuk satu halaman HTML:
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
Contoh Code:
<!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 HTML <link>
Elemen <link> digunakan untuk menghubungkan ke style sheet eksternal:
<link rel="stylesheet" href="mystyle.css">
Contoh Code:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="mystyle.css">
</head><body>
<h1>Ini adalah Heading</h1>
<p>Ini adalah Paragraf</p>
</body>
</html>
Tip: Untuk mempelajari semua tentang CSS, kunjungi Tutorial CSS kami.
Elemen HTML <meta>
Elemen <meta> digunakan untuk menentukan kumpulan karakter yang digunakan, deskripsi halaman, kata kunci, penulis, dan metadata lainnya.
Metadata digunakan oleh browser (bagaimana cara menampilkan konten), oleh search engine (kata kunci), dan layanan web lainnya.
Tentukan set karakter yang digunakan:
<meta charset="UTF-8">
Tentukan deskripsi halaman web Anda:
<meta name="description" content="Free Web tutorials">
Tentukan kata kunci untuk mesin telusur:
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
Tentukan penulis halaman:
<meta name="author" content="John Doe">
Segarkan dokumen setiap 30 detik:
<meta http-equiv="refresh" content="30">
Contoh tag <meta>:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe"></head>
<body>
<h1>Ini adalah Heading</h1>
<p>Ini adalah Paragraf</p>
</body>
</html>
Mengatur Viewport
HTML5 memperkenalkan metode untuk membiarkan perancang web menguasai wilayah pandang, melalui tag <meta>.
Area pandang adalah area tampilan pengguna dari halaman web. Ini berbeda dengan perangkat, dan akan lebih kecil di ponsel daripada di layar komputer.
Anda harus menyertakan elemen viewport <meta> berikut di semua halaman web Anda:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Elemen viewport <meta> memberi instruksi pada browser tentang cara mengontrol dimensi dan penskalaan halaman.
Bagian width = device-width mengatur lebar halaman untuk mengikuti lebar layar perangkat (yang akan bervariasi tergantung pada perangkat).
Bagian initial-scale=1.0 menetapkan tingkat pembesaran awal saat halaman pertama kali dimuat oleh browser.
Berikut adalah contoh halaman web tanpa tag meteran viewport, dan halaman web yang sama dengan tag meteran viewport:
Tip: Jika Anda melihat-lihat halaman ini dengan telepon atau tablet, Anda dapat mengklik dua link di bawah ini untuk melihat perbedaannya.
Elemen <script> HTML
Elemen <script> digunakan untuk menentukan JavaScripts sisi klien.
JavaScript ini menulis "Halo JavaScript!" menjadi elemen HTML dengan id = "demo":
<script>
function myFunction {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
Contoh Code:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
Tip: Untuk mempelajari semua tentang JavaScript, kunjungi Tutorial JavaScript kami.
Elemen HTML <base>
Elemen <base> menentukan basis URL dan target dasar untuk semua URL relatif di halaman:
<base href="https://www.w3schools.com/images/" target="_blank">
Contoh Code:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<base href="https://www.w3schools.com/images/" target="_blank">
</head>
<body>
<img src="html5.gif">
<p>Karena kami telah menentukan URL dasar, browser akan mencari gambar "html5.gif" di "https://www.w3schools.com/images/html5.gif"</p>
<p><a href="https://www.w3schools.com">W3Schools</a></p>
<p>Tautan di atas terbuka di jendela baru. Ini karena target dasarnya diatur ke "_blank".</p>
</body>
</html>
Menghilangkan <html>, <head> dan <body>?
Menurut standar HTML5; tag <html>, <body>, dan <head> dapat diabaikan.
Kode berikut akan memvalidasi sebagai HTML5:
<!DOCTYPE html>
<title>Page Title</title>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
catatan:
Nusantara Coding tidak menyarankan untuk menghapus tag <html> dan <body>. Mengabaikan tag ini dapat merusak perangkat lunak DOM atau XML dan menghasilkan kesalahan pada browser lawas (IE9).
Namun, menghilangkan tag <head> telah menjadi praktik umum untuk beberapa waktu sekarang.
HTML head Elements
| Tag | Description |
|---|---|
| <head> | Mendefinisikan informasi tentang dokumen |
| <title> | Mendefinisikan judul sebuah dokumen |
| <base> | Mendefinisikan alamat default atau target default untuk semua tautan pada halaman |
| <link> | Mendefinisikan hubungan antara dokumen dan sumber eksternal |
| <meta> | Mendefinisikan metadata tentang dokumen HTML |
| <script> | Mendefenisikan client-side script |
| <style> | Mendefinisikan informasi style untuk sebuah dokumen |
Belajar HTML Secara Lengkap Disini:
1. Tutorial HTML Bagian 1
2. Tutorial HTML Bagian 2