Struktur Dasar Elemen HTML Head

Oleh Unknown

Wednesday, April 29, 2015

Struktur Dasar Elemen HTML Head - Tag <head> alias bagian kepala halaman web, berisi beberapa elemen html. Mencakup elemen title / judul, script, style, meta information, dan masih banyak lagi. Tapi yang paling penting dari semua itu dan wajib dicantumkan pada elemen html <head> adalah beberapa elemen html berikut.

1. Elemen HTML title

Elemen <Title> berfungsi untuk mendefinisikan judul dokumen. Elemen <Title> ini mutlak diperlukan dalam semua dokumen HTML / XHTML. Elemen <Title> akan menampilkan judul halaman web di toolbar browser, memberikan judul untuk halaman ketika ditambahkan ke favorit, dan juga menampilkan judul untuk halaman dalam hasil mesin pencari.

Misal :


<title>Sinahu Coding</title>

2. Elemen HTML Style

Elemen <Style> pada <head> digunakan untuk menetapkan style seperti apa yang akan tampil pada browser dari suatu dokumen html.

Misal :


<style>
body {background-color:yellow;}
h1 {color:red;}
p {color:blue;}
</style>

3. Elemen HTML Link

Elemen <Link> menentukan hubungan suatu page dengan link eksternal. Elemen <Link> yang paling sering digunakan adalah untuk menghubungkan ke style sheet, digunakan untuk mengatur gaya web
page melalui style css yang tersimpan di external link tempat style css itu berada.

Misal :


<link rel="stylesheet" href="styleku.css">

4. Elemen HTML Meta

Elemen <meta> digunakan untuk menentukan deskripsi halaman web, kata kunci, penulis atau author, dan metadata lainnya. Ada beberapa meta data yang wajib dipasang pada halaman web, yaitu; meta description (Deskripsi halaman web), keywords (Kata kunci untuk mesin pencari), author (Pemilik web), dan charset (Character set yang digunakan).

Misal :


<meta name="description" content="Personal blog tentang belajar coding dan tutorial blog">
<meta name="keywords" content="tutorial, blog, web, html, css">
<meta name="author" content="Mr.F">
<meta charset="UTF-8">

Kalau semuanya itu ditempatkan secara sempurna maka akan tersusun seperti ini. Untuk mengetahui hasilnya silahkan copy paste kode di bawah ini ke dalam notepad. Kemudian beri nama berekstensi .html dan buka melalui web browser.


<!DOCTYPE html>
<html>

<title>Sinahu Coding</title>

<style>
body {background-color:black;}
h1 {color:red;}
p {color:blue;}
</style>

<link rel="stylesheet" href="styleku.css">

<meta name="description" content="Personal blog tentang belajar 

coding dan tutorial blog">
<meta name="keywords" content="tutorial, blog, web, html, css">
<meta name="author" content="Mr.F">
<meta charset="UTF-8">

<body>
<h1>Elemen-elemen HTML pada Head</h1>
<p>Ini contoh sederhana dokumen html beserta penempatan elemen-elemen html pada tag head. Semuanya itu harus diletakkan sebelum tag body.</p>
</body>

</html>

Demikian pembahasan tentang komponen elemen-elemen html head yang terdapat pada tag <head>. Semoga bermanfaat, khususnya untuk memahami struktur dasar template pada <head>.

Struktur Dasar Elemen HTML Head

1. Elemen HTML title

2. Elemen HTML Style

3. Elemen HTML Link

4. Elemen HTML Meta

2 Komentar untuk "Struktur Dasar Elemen HTML Head"