Atribut elemen HTML

Pengertian - Apa itu Atribut HTML?

Di halaman ini

1. Apa itu HTML ?

Pengertian Atribut HTML

º Atribut adalah teks yang berada setelah nama tag.

<namatag atribut='nilai' />
<!-- dalam bahasa Inggris -->
<tagname attribute='value' />

FUNGSI ATRIBUT :

º Atribut pada elemen HTML berfungsi untuk menjelaskan cirikhas / karakteristik pada suatu elemen.
º Setiap elemen HTML bisa menggunakan 1 atribut atau lebih.

Catatan :

º Setiap atribut membutuhkan nilai (value) untuk menegaskan tujuan atribut itu disematkan.
º Maka setiap 1 atribut terdiri dari 2 bagian yaitu nama atribut dan nilai atribut.
º Nama atribut dan nilai atribut dipisahkan oleh karakter sama dengan (=).
º Nilai atribut selalu ditandai dengan tanda kutip ('nilai').
º Setiap elemen memiliki cirikhas / karakteristik masing-masing.
º Sehingga setiap elemen bisa menggunakan Atributnya masing-masing.

Atribut inti

id

class

title

style

Seperti telah dijelaskan bahwa setiap elemen bisa menggunakan atributnya masing-masing. Artinya setiap elemen memiliki atribut inti dan atribut khusus.

Atribut inti (core attribute) bisa disematkan disemua elemen.
Atribut khusus hanya bisa disematkan pada elemen tertentu atau hanya dimiliki oleh elemen tersebut.

Daftar atribut inti elemen HTML :

Nama atribut	Penulisan	Nilai (value)
Identifier	id='nilai'	identitas elemen
Class	class='nilai'	kelas elemen
Title	title='nilai'	title elemen
Style	style='nilai'	gaya elemen

Contoh penggunaan atribut pada elemen HTML:

Misal dalam satu halaman terdiri dari 4 elemen paragraf dan masing-masing paragraf memiliki judul.
1. Tampilan paragraf sebelum dijadikan elemen HTML :

Judul Pertama Ini adalah paragraf pertama. ini adalah kalimat kedua pada paragraf pertama. ini adalah kalimat ketiga pada paragraf pertama. Judul Kedua Ini adalah paragraf kedua. ini adalah kalimat kedua pada paragraf kedua. ini adalah kalimat ketiga pada paragraf pertama. Judul Ketiga Ini adalah paragraf ketiga. ini adalah kalimat kedua pada paragraf ketiga. ini adalah kalimat ketiga pada paragraf pertama. Judul Keempat Ini adalah paragraf keempat. ini adalah kalimat kedua pada paragraf keempat. ini adalah kalimat ketiga pada paragraf pertama.

2. Penambahan tag dan atribut untuk dijadikan elemen HTML :

<h2>Judul Pertama</h2>
<p align='left'>Ini adalah paragraf pertama
ini adalah kalimat kedua pada paragraf pertama.
ini adalah kalimat ketiga pada paragraf pertama.</p>
<h2 style='text-align:center'>Judul Kedua</h2>
<p align='center'>Ini adalah paragraf kedua.
ini adalah kalimat kedua pada paragraf kedua.
ini adalah kalimat ketiga pada paragraf kedua.</p>
<h2 style='text-align:right'>Judul Ketiga</h2>
<p align='right'>Ini adalah paragraf ketiga.
ini adalah kalimat kedua pada paragraf ketiga.
ini adalah kalimat ketiga pada paragraf ketiga.</p>
<h2 style='text-align:justify'>Judul Keempat</h2>
<p align='justify'>Ini adalah paragraf keempat.
ini adalah kalimat kedua pada paragraf keempat.
ini adalah kalimat ketiga pada paragraf keempat.</p>

3. Tampilan setelah dijadikan elemen HTML dan pemberian atribut:

Judul Pertama
Ini adalah paragraf pertama. ini adalah kalimat kedua pada paragraf pertama. ini adalah kalimat ketiga pada paragraf pertama.

Judul Kedua
Ini adalah paragraf kedua. ini adalah kalimat kedua pada paragraf kedua. ini adalah kalimat ketiga pada paragraf pertama.

Judul Ketiga
Ini adalah paragraf ketiga. ini adalah kalimat kedua pada paragraf ketiga. ini adalah kalimat ketiga pada paragraf pertama.

Judul Keempat
Ini adalah paragraf keempat. ini adalah kalimat kedua pada paragraf keempat. ini adalah kalimat ketiga pada paragraf pertama.

Menentukan nilai atribut

Nilai atribut (Attribute Value) untuk atribut inti.

Khusus untuk atribut id, class, title tidak memiliki nilai khusus.
Sehingga nilai pada ke-3 atribut itu bebas ditentukan sendiri.

Aturan penulisan untuk nilai atribut id dan class adalah sbb:

1. Harus diawali dengan karakter huruf / abjad.
2. Karakter yang dapat digunakan adalah abjad a sampai z dan angka 1 hingga 0
3. Setiap suku kata harus dipisahkan menggunakan karakter minus (-) atau underscore ( _ )
4. Peka / sensitif terhadap perbedaan karakter (huruf besar dan huruf kecil)

Contoh penulisan nilai atribut id dan class :

<p class='paragraf-1' id='paragraf_1'>Isi paragraf</p>
<p class='paragraf2' id='paragrafDua'>Isi paragraf</p>

Berdasarkan penjelasan diatas, secara khusus fungsi atribut id adalah :

Untuk mengidentifikasi elemen apa pun secara unik dalam halaman HTML.
Terutama apabila dalam satu halaman terdapat beberapa elemen yang sama, maka atribut id akan menjadi identitas khusus yang membedakan elemen yang sama tersebut.

Untuk atribut class

Fungsinya adalah:
Untuk menyeleksi elemen berdasakan nama kelasnya.
Klasifikasi elemen ini nantinya akan digunakan untuk pemberian gaya melalui CSS (Cascading Style Sheet) atau lembar gaya.
Pembahasan tentang lembar gaya (CSS akan dibahas lebih jelas setelah pembahasan HTML).

Lihat contoh penggunaan atribut id dan class

Nilai atribut Title

Atribut title berfungsi untuk menegaskan informasi elemen dalam bentuk teks.
Atau dapat juga diartikan sebagai judul elemen sehingga nilai atribut title bisa diisi dengan deskripsi ringkas dari judul elemen tersebut.

Contoh penggunaan atribut title:

<p title='Kataku memberitahu Paman'>Saya masih belajar kode HTML</p>
<p title='Pulpen bertinta biru'>Ini pulpen siapa ?</p>
<p title='Jawabannya Hyper Text Markup Language'>Apa kepanjangan HTML ?</p>

Hasil nya, arahkan kursor pada kalimat dibawah ini untuk melihat efek dari atribut title.

Hasil nya, tap pada kalimat dibawah ini untuk melihat efek dari atribut title.

Saya masih belajar kode HTML

Ini pulpen siapa ?

Apa kepanjangan HTML ?