Home › html › Pengertian atribut pada html

Pengertian atribut pada html

Diperbaharui: 18 October 2020

Atribut HTML adalah informasi tambahan yang disisipkan pada tag html, kegunaanya untuk memberikan informasi tambahan pada suatu elemen, seperti: tinggi, lebar, style, href dan lain lain.

Contoh: atribut href

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    </head>
    <body>
        <a href="https://www.hendky.com">Link Hendky</a>
    </body>
</html>

<a> salah satu elemen HTML.
Kegunaanya untuk menampilkan link atau tautan dengan menambahkan nilai pada atribut href.
href salah satu atribut HTML.
Kegunaanya untuk memberikan link atau alamat url.

Pada artikel berikutnya Anda akan belajar lebih dalam tentang elemen <a> atau link.

Contoh: atribut src

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    </head>
    <body>
        <img src="https://hendky.com/wp-content/uploads/2019/06/logo-hendky.png">
    </body>
</html>

<img> salah satu elemen HTML.
Kegunaanya untuk menampilkan gambar dengan menambahkan nilai atribut src.
src salah satu atribut HTML.
Kegunaanya untuk memberikan link atau url gambar.

Pada artikel berikutnya Anda akan belajar lebih dalam tentang elemen <img> atau gambar.

Contoh: atribut width dan height

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    </head>
    <body>
        <img src="https://hendky.com/wp-content/uploads/2019/06/logo-hendky.png" width="400" height="300">
    </body>
</html>

<img> salah satu elemen HTML.
width salah satu atribut HTML.
Kegunaanya untuk memberikan nilai lebar pada elemen.
height salah satu atribut HTML.
Kegunaanya untuk memberikan nilai tinggi pada elemen.

Contoh: atribut alt

<img> salah satu elemen HTML.
alt salah satu atribut HTML.
Kegunaanya untuk memberikan teks alternatif yang akan digunakan jika gambar gagal ditampilkan, atribut alt hanya digunakan untuk gambar saja.

Sebagai contoh saya menampilkan gambar yang salah:

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    </head>
    <body>
        <img src="hendky.com/gambar-kucing-lucu.jpg" alt="gambar kucing persia">
    </body>
</html>

Hasilnya:

Biasanya gambar yang gagal dimuat disebabkan:

memberikan nilai pada atribut src yang salah
koneksi yang lambat
tidak menggunakan format gambar yang didukung browser

Pada artikel berikutnya Anda akan belajar lebih dalam tentang elemen <img> atau gambar.

Contoh: atribut style

Atribut style digunakan untuk memberikan style pada elemen seperti: color, background, font-size dan lain lain.

Contoh:

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    </head>
    <body>
        <p style="color:red">Hallo dunia</p>
    </body>
</html>

Hasilnya:

Hallo dunia

Pada artikel berikutnya Anda akan belajar tentang css.

Contoh: atribut lang

<!DOCTYPE html>
<html lang="en-ID">
    <head>
        <title>Judul post</title>
    </head>
    <body>

        ...

    </body>
</html>

Atribut lang digunakan untuk mendeklarasikan jenis bahasa yang digunakan. Mendeklarasikan bahasa sangat penting untuk aplikasi aksesibilitas (pembaca layar) dan mesin pencari ( SEO ).

Contoh: atribut title

Atribut title digunakan untuk menambahkan title pada elemen yang akan ditampilkan sebagai tooltip ketika Anda mengarahkan mouse ke elemen yang diberi atribut title.

Contoh:

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    </head>
    <body>
        <p title="saya paragraf">Ini paragraf pertama.</p>
    </body>
</html>

Hasilnya

Ini paragraf pertama.

Arahkan mouse Anda atau kursor Anda pada paragraf diatas yang diberi atribut title maka Anda akan melihat tooltip seperti gambar dibawah ini:

Gunakan atribut huruf kecil

Standar HTML5 tidak memerlukan nama atribut huruf kecil.
W3C merekomendasikan huruf kecil dalam HTML, dan menuntut huruf kecil untuk tipe dokumen yang lebih ketat seperti XHTML.

Gunakan kutipan pada setiap atribut

Disarankan:

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    </head>
    <body>
        <a href="https://www.hendky.com">Link Hendky</a>
    </body>
</html>

Tidak disarankan ( Buruk ):

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    </head>
    <body>
        <a href=https://www.hendky.com>Link Hendky</a>
    </body>
</html>

Standar HTML5 tidak memerlukan tanda kutip di sekitar nilai atribut.
Tetapi menghilangkan tanda kutip dapat menghasilkan kesalahan.
Sangat disarankan menggunakan tanda kutip.

Kutipan tunggal atau ganda?

Kutipan ganda di sekitar nilai atribut adalah yang paling umum dalam HTML, tetapi tanda kutip tunggal juga dapat digunakan. Dalam beberapa situasi, ketika nilai atribut itu sendiri berisi tanda kutip ganda, perlu menggunakan tanda kutip tunggal:

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    </head>
    <body>
        <p title='belajar "HTML" dasar'>Paragraf pertama</p>
    </body>
</html>

Atau sebaliknya:

<!DOCTYPE html>
<html>
    <head>
        <title>Judul post</title>
    </head>
    <body>
        <p title="belajar 'HTML' dasar">Paragraf pertama</p>
    </body>
</html>

Ringkasan pembelajaran:

Atribut	Kegunaanya
href	Menambahkan alamat url untuk tautan atau link
src	Menambahkan alamat url untuk image
width	Memberikan nilai lebar
height	Memberikan nilai tinggi
alt	Memberikan teks alternatif untuk gambar jika gagal dimuat
style	Memberikan style pada elemen HTML
title	Memberikan informasi tambahan pada elemen
lang	Memberikan jenis bahasa pada akar dokumen HTML