Atribut HTML - Purwana.Net
  Media Belajar membuat Software Aplikasi, Website, & Game untuk Pemula...

Post Top Ad

Minggu, 01 Januari 2017

Atribut HTML

Atribut pada elemen HTML memberikan informasi tambahan yang diperlukan.

Atribut HTML

  • Semua elemen HTML dapat memiliki atribut
  • Atribut menyediakan informasi tambahan tentang elemennya.
  • Atribut selalu dispesifikasikan pada tag awal.
  • Atribut biasanya memiliki struktur yang terdiri dari nama/nilai berkorespondensi seperti nama="nilai"

Atribut href

link HTML didefnisikan sebagai tag <a>. Alamat link tersebut dispesifikasikan di dalam atribut href.

contoh :

<a href="http://www.purwana.net">Ini adalah link</a>

info lebih lanjut tentang link dan tag <a> dapat dipelajari nanti pada tutorial ini.

Atribut src

gambar HTML didefinisikan sebagai tag <img>
nama file dari sumber gambar dispesifikasikan pada atribut src
contoh:

<img src="gambar_si_cantik.jpg"/>

Atribut width dan height

Gambar pada HTML memiliki kumpulan berbagai jenis atribut, dimana diantaranya menspesifikasikan lebar dan tinggi dari sebuah gambar:
contoh

<img src="gambar_si_cantik.jpg" width="500" height="600"/>

Ukuran gambar pada contoh diatas dispesifikasikan dalam piksel: width="500" berarti memiliki lebar 500 piksel.

Pelajari lebih lanjut tentang gambar di bab Gambar HTML.

Atribut alt

Atribut alt menspesifikasikan sebuah teks alternatif untuk digunakan, saat gambar tidak dapat ditampilkan.

nilai dari atribut ini dapat dibaca oleh screen reader. Dengan cara ini, seseorang "mendengar" halaman web, contoh : seorang tunanetra, dapat mendengar elemen tersebut.

contoh:

<img src="gambar_si_cantik.jpg" alt="si cantik berkaos pink"/>

Atribut alt akan sangat berguna jika gambar tidak ada.

contoh :
Apa yang akan terjadi pada kode berikut bila file gambar tidak ada?

<img src="gambar_salah_ketik.jpg" alt="si cantik berkaos pink"/>

Atribut style

Atribut style digunakan untuk menspesifikasikan styling dari sebuah elemen, seperti warna, font, ukuran, dan lain - lian.

cobtoh:

<p style="color:red">Saya seorang paragraf</a>

pelajari lebih lanjut tentang styling kemudian di bagian Tutorial CSS.

Atribut lang

Bahasa pada sebuah dokumen dapat dideklarasikan pada tag <html>.
Bahasa didekralarasikan dengan atribut lang.
Mendeklarasikan bahasa sangat penting untuk aksesibilitas aplikasi(screen reader) dan mesin pencari:


<!DOCTYPE html>
<html lang="id-ID">
<body>

...

</body>
</html>

Kata pertama pada id-ID menunjukkan bahasa (id). Jika terdapat dialek, gunakan kata kedua (ID)

Atribut title

Disini, atribut judul ditambahkan pada elemen <p>. Nilai dari atribut title akan ditampilkan sebagai tooltip saat tetikus diarahkan ke paragraf:

contoh :

<p title="Saya adalah tooltip">
Ini adalah paragraf
</p>

Saran : Gunakan Lowercase pada Atribut


Standar HTML5 tidak membutuhkan nama atribut dengan lowercase

Atribut title dapat dituli dengan uppercase maupun lowercase seperti title atau TITLE.

W3C merekomendasikan lowercase di HTML, dan lowercase dibutuhkan untuk jenis dokumen yang ketat seperti XHTML.

Saran : Kutip Nilai Atribut


Standar HTML5 tidak membutuhkan tanda kutip pada nilai atribut

sebagai contoh pada atribut href dapat ditulis sbb:

<a href=http://www.purwana.net>

W3C merekomendasikan tanda kutip pada HTML, dan menuntut penggunaan tanda kutip untuk jenis dokumen yang ketat seperti XHTML. Terkadang tanda kutip diperlukan seperti contoh berikut, atribut judul tidak ditampilkan dengan baik, karena mengandung karakter spasi.

<p title=Tentang kami>

Kutip Satu atau Dua?

Penggunaan kutip dua adalah yang paling sering digunakan di HTML, namun kutip satu juga dapat digunakan. Pada situasi tertentu, ketika nilai atribut terdapat tanda kutip dua di dalamnya, kita perlu menggunakan tanda kutip satu:

<p title='Yayan "Mad Dog" Ruhian'>

atau bisa sebaliknya:

<p title="Yayan 'Mad Dog' Ruhian">

Rangkuman:

  • Semua elemen HTML dapat memiliki atribut
  • atribut title menyediakan tambahan fitur informasi "tool-tip"
  • atribut href menyediakan informasi alamat untuk link
  • atribut width dan height menyediakan informasi ukuran untuk gambar
  • atribut alt menyediakan teks alternatif untuk screen reader
  • disini kita akan selalu menggunakan lowercase pada nama attribut
  • disini kita akan selalu menggunakan tanda kutip pada nilai atribut

Berikut ini beberapa atribut yang sering digunakan di HTML
Atribut Deskripsi
alt Teks alternatif saat gambar tidak bisa ditampilkan
disabled Menspesifikasikan input element yang disabled
href Menspesifikasikan URL (alamat web) untuk link
id Menspesifikasikan id untuk elemen yang unik
src Menspesifikasikan URL (alamat web) untuk image/gambar
style Menspesifikasikan style inline CSS untuk sebuah element
title Menspesifikasikan informasi ekstra tentang elemen (ditampilkan sebagai tool tip)

Post Top Ad