Belajar elemen head pada html

belajar elemen head pada html

Pada pembelajaran kali ini kita akan membahas lebih dalam elemen <head> pada HTML yang sering dijumpai pada struktur dasar penulisan html pada umumnya. Elemen <head> adalah wadah untuk metadata atau data tentang data yang ditempatkan di antara <html> dan <body>.

Metadata html adalah data tentang dokumen html. Metadata tidak ditampilkan, tetapi meta data berguna untuk informasi halaman dokumen. Biasanya meta data mendefinisikan sebuah <title>, <style>, <script>, <meta> dan informasi meta lainnya.

Elemen <title>

Elemen <title> mendefinisikan sebuah judul dokumen dan diperlukan dalam setiap halaman dokumen html. Kegunaan Elemen <title> lainnya:

  • mendefinisikan judul di tab browser
  • memberikan judul untuk halaman saat ditambahkan ke favorit
  • menampilkan judul untuk halaman dalam hasil mesin pencari

Contoh:

<!DOCTYPE html>
<html>
    <head>
        <title>Judul Halaman</title>
    </head>
    <body>

    <p>Hello world</p>

    </body>
</html>

Hasilnya:

Hasil dari elemen title

Elemen <style>

Elemen <style> digunakan untuk mendefinisikan informasi style untuk halaman HTML.

Contoh:

<!DOCTYPE html>
<html>
    <head>
        <title>Judul Halaman</title>

    <style>
    p {
        color: green;
    }
    <style>

    </head>
    <body>

    <p>Paragraf pertama</p>
    <strong>Teks tebal</strong>
    <p>Hello world</p>

    </body>
</html>

Hasilnya:

Paragraf pertama

Teks tebal

Hello world

Elemen <script>

Elemen <script> digunakan untuk mendefinisikan informasi code atau script untuk javascript.

Contoh:

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>

    <script>

    function getJavascript() {
        document.getElementById("teks-penutup").innerHTML = "Good Bye!!";
    }
    </script>

    </head>
    <body>

    <p id="teks-penutup">Sampai jumpa!</p>
    <button onclick="getJavascript()">Merubah teks</button>

    </body>
</html>

Hasilnya:

Sampai jumpa!

Elemen <meta>

Elemen <meta> digunakan untuk menentukan informasi metadata. Metadata tidak ditampilkan, tetapi meta data berguna untuk informasi halaman dokumen. Metadata digunakan oleh browser, oleh mesin pencari (kata kunci), dan layanan web lainnya.

Berikut beberapa meta data yang biasanya digunakan:

Meta charset

Menentukan set karakter yang akan digunakan.

<meta charset="UTF-8">

Meta description

Menentukan deskripsi halaman web.

<meta name="description" content="Belajar html untuk pemula">

Meta keywords

Menentukan kata kunci untuk mesin pencari.

<meta name="keywords" content="Pengertian dan sejarah HTML">

Meta author

Menentukan si pembuat halaman atau artikel

<meta name="author" content="Mas Hendky">

Meta refresh

Perbarui dokumen setiap 50 detik:

<meta http-equiv="refresh" content="50">

Contoh Lengkapnya:

<!DOCTYPE html>
<html>
    <head>
        <title>Judul Halaman</title>

        <meta charset="UTF-8">
        <meta name="description" content="Belajar html untuk pemula">
        <meta name="keywords" content="Pengertian dan sejarah HTML">
        <meta name="author" content="Mas Hendky">
        <meta http-equiv="refresh" content="50">

    </head>
    <body>

    <p>Paragraf pertama</p>
    <strong>Teks tebal</strong>
    <p>Hello world</p>

    </body>
</html>

Sebenarnya masih ada lagi meta data yang lainnya. Hanya saja contoh diatas yang umum digunakan.

ElemenKegunaanya
<head>Mendefinisikan informasi tentang dokumen
<title>Mendefinisikan sebuah title atau judul dokumen
<style>Mendefinisikan style atau css untuk dokumen
<script>Mendefinisikan sebuah javascript
<meta>Mendefinisikan metadata tentang dokumen html

Leave a Reply

Your email address will not be published. Required fields are marked *