Apa saja atribut pada html?

Atribut elemen pada HTML merupakan informasi tambahan suatu elemen HTML. Atribut ini ditempatkan di dalam tag pembuka elemen tersebut, jika elemen tersebut memiliki tag pembuka dan tag penutup. Atribut memiliki dua buah bagian yaitu nama (name) dan nilai (value) yang dipisahkan dengan tanda "=".

Setiap elemen HTML memiliki atribut yang digunakan sebagai alat untuk proses identifikasi sifat dan karakteristik tersebut tersebut. Pemberian atribut ini kadang diperlukan saat kita ingin memodifikasi tampilan elemen yang masih bersifat default. Misalnya seperti ingin menambahkan lebar elemen dengan mengatur nilai width (lebar) elemen dengan nilai tertentu. Atau jika kita ingin mengatur tinggi elemen, maka atribut height (tinggi) diberikan nilai tertentu sehingga tinggi elemen tersebut sesuai dengan keinginan.

Atribut memberikan informasi tambahan tentang elemen HTML. Secara global setiap elemen HTML memiliki atribut id, class, style, width, height dan lainnya sesuai dengan kegunaannya masing-masing. Secara khusus terdapat elemen HTML yang hanya memiliki atribut untuk elemen itu sendiri dan tidak bisa diaplikasikan untuk elemen lainnya misalnya elemen

Atribut elemen HTML selalu diletakkan di dalam tag pembuka elemen HTML. Setiap atribut memiliki sebuah nama disertai dengan nilainya. Nama (name) atribut didefinisikan sebagai nama properti elemen sedangkan nilai (value) atribut merupakan nilai yang diberikan untuk mengatur tampilan elemen tersebut.

Misalnya terdapat sebuah elemen

Paragraf 1

. Elemen tersebut memiliki dua buah atribut yaitu id dan style. Inilah yang disebut sebagai nama atribut. Kedua atribut di atas memiliki nilai atribut yaitu id="par1" dan style="color:navy;". Penulisan nilai atribut dengan memberikan tanda kutip tunggal atapun ganda yang mengapit nilai dari atribut tersebut.

Atribut ID digunakan untuk menetapkan identitas unik suatu elemen HTML. Di dalam suatu badan HTML yang memiliki banyak elemen, nilai atribut id harus berbeda satu sama lainnya dan bersifat unik. Jika suatu elemen paragraf sudah menggunakan id="par1" maka elemen lainnya tidak boleh menggunakan nilai id yang sama (id="par1") tapi harus menggunakan nilai yang lain misalnya id="par2" .

Berikut ini contoh halaman yang mempunyai elemen dengan atributnya :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

   

Ini adalah paragraf ke-1
Ini adalah paragraf ke-2
Ini adalah paragraf ke-3
Ini adalah paragraf ke-4
Ini adalah paragraf ke-5

Berikut tabel daftar atribut dan nilainya yang sering disertakan di dalam elemen HTML :

Nama atributNilai atributKegunaaniduser definedMenetapkan id unik untuk elemen tunggalclassuser definedMenetapkan class untuk banyak elemenstyleuser definedMenetapkan gaya pada elemen dengan CSSwidthnilai angkaMenetapkan lebar elemenheightnilai angkaMenetapkan tinggi elemenalignleft, center, rightMenetapkan align horizontal suatu elemenvaligntop, middle, bottomMenetapkan align vertikal suatu elemencolordecimal, heksadesimal, rgbMenetapkan warnabgcolordecimal, heksadesimal, rgbMenetapkan warna latar dalam bentuk warna desimal, heksadesimalbackgroundURL gambarMenetapkan gambar latar (image png, gif, jpeg)titleuser definedMenetapkan pop-up title yang muncul saat elemen dilintasi mousesrcURL elemen, sumberMenetapkan referensi URLhrefURL elemen, sumberMenetapkan referensi URLnameuser definedMenetapkan nama elemenmethodpost, getMenetapkan metoda yang dipakai dalam mengirim formulir (post, get)actionURLMenetapkan halaman tujuan pengiriman formulirenctypeuser definedMenetapkan type enkripsi pengiriman formulirtypetext, password, submit, dllMenetapkan jenis elemenvalueuser definedMenetapkan nilai elemen (formulir)

Kita tidak bisa menyesuaikan perilaku setiap tag HTML, termasuk menyesuaikan gaya atau menambahkan CSS.

Tanpa atribut, tag HTML menjadi monoton, karena kita tidak bisa mengatur perilakunya.

Oleh karena itu, penting untuk memahami atribut secara detail agar kita dapat mengatur perilaku elemen HTML.

Mari kita bahas.

Apa Itu Atribut?

Atribut HTML adalah teks khusus yang digunakan di dalam tag HTML pembuka untuk mengontrol perilaku elemen.

Atribut terdiri dari dua bagian, yaitu nama dan nilai.

Atribut ditulis mulai dari nama, diikuti dengan tanda sama dengan (

<p style="color: red" class="text" id="text">hello worldp>

3), kemudian nilai atribut dibungkus dengan tanda petik,

<p style="color: red" class="text" id="text">hello worldp>

4.

Contoh:

<p style="color: red">hello worldp>

• <p style="color: red" class="text" id="text">hello worldp>
  

  5 adalah nama atribut.

• <p style="color: red" class="text" id="text">hello worldp>
  

  6 adalah nilai atribut.

Kita dapat menulis lebih dari satu atribut di dalam tag pembuka HTML.

Contoh:

<p style="color: red" class="text" id="text">hello worldp>

Tidak semua atribut memiliki nilai, ada juga atribut yang tidak membutuhkan nilai alias teks kosong, diantaranya

<p style="color: red" class="text" id="text">hello worldp>

7,

<p style="color: red" class="text" id="text">hello worldp>

8 dan sebagainya.

Contoh:

<input required />

Kode di atas sama saja dengan:

<input required="" />

<input required="true" />

Ketika kita menggunakan atribut yang tidak membutuhkan nilai atau teks kosong, biasanya tanda sama dengan dan tanda petik tidak ditulis seperti contoh pertama karena lebih singkat.

Tapi, contoh pertama dan kedua sama saja, browser akan menangani atribut tersebut dengan cara yang sama.

Jenis Atribut HTML

Tidak semua atribut dapat ditulis di semua tag HTML, ada beberapa atribut yang hanya bisa digunakan pada tag-tag tertentu saja.

Ada juga yang bisa digunakan di semua tag.

Mari kita pelajari lebih lanjut beberapa macam atribut yang bisa kita gunakan.

1. Atribut Global

Atribut global adalah atribut yang bisa digunakan di semua tag HTML.

Berikut daftar beberapa atribut global dan fungsinya.

AtributKeterangan

<p style="color: red" class="text" id="text">hello worldp>

9id unik elemen

<input required />

0kelas memungkinkan CSS dan JavaScript mengakses elemen

<p style="color: red" class="text" id="text">hello worldp>

5untuk menambahkan gaya CSS

<input required />

2judul elemen terkait

<input required />

3bahasa elemen

<input required />

4urutan elemen ketika tombol tab keyboard ditekan

<input required />

5tombol pintas untuk mengakses elemen

<input required />

6elemen akan difokuskan setelah halaman dimuat

<input required />

7apakah ejaan konten elemen ingin diperiksa atau tidak

<input required />

8untuk menerjemahkan teks

<input required />

9konten yang dapat diedit

<input required="" />

<input required="true" />

0arah teks elemen

<input required="" />

<input required="true" />

1elemen dapat diseret

<input required="" />

<input required="true" />

2menyembunyikan elemen

<input required="" />

<input required="true" />

3untuk membuat atribut data khusus

<input required="" />

<input required="true" />

4untuk meningkatkan aksesibilitas

2. Atribut Event

Atribut event adalah atribut global yang bisa digunakan di semua tag HTML, tapi nilainya berupa kode JavaScript.

Mari kita lihat contoh berikut:

<button onclick="alert('Tombol di-klik!')">Submitbutton>

<input required="" />

<input required="true" />

5 adalah atribut event yang akan mengeksekusi kode JavaScript di dalam tanda petik ketika elemen di-klik.

Dalam hal ini, jika kita mengklik tombol

<input required="" />

<input required="true" />

6, maka pop-up

<input required="" />

<input required="true" />

7 berisi pesan

<input required="" />

<input required="true" />

8 akan muncul.

Ada banyak atribut event yang bisa kita gunakan, ada yang dipicu ketika elemen di klik, ada juga yang dipicu ketika tombol mouse di-klik, tergantung atribut event yang digunakan.

Berikut beberapa atribut event dan fungsinya:

AtributKeterangan (pemicu)

<input required="" />

<input required="true" />

5elemen diklik

<button onclick="alert('Tombol di-klik!')">Submitbutton>

0nilai elemen berubah

<button onclick="alert('Tombol di-klik!')">Submitbutton>

1tombol ditekan

<button onclick="alert('Tombol di-klik!')">Submitbutton>

2tombol dilepas setelah ditekan

<button onclick="alert('Tombol di-klik!')">Submitbutton>

3elemen dimuat

<button onclick="alert('Tombol di-klik!')">Submitbutton>

4ketika scrolling

<button onclick="alert('Tombol di-klik!')">Submitbutton>

5klik kiri/tengah mouse ditekan

<button onclick="alert('Tombol di-klik!')">Submitbutton>

6mouse bergerak

<button onclick="alert('Tombol di-klik!')">Submitbutton>

7kursor mouse keluar elemen

<button onclick="alert('Tombol di-klik!')">Submitbutton>

8klik mouse dilepas

3. Atribut Khusus

Atribut khusus adalah atribut yang hanya bisa digunakan pada tag-tag tertentu saja.

Berikut beberapa atribut khusus dan tag yang dapat menggunakan atribut tersebut:

AtributTagKeterangan

<button onclick="alert('Tombol di-klik!')">Submitbutton>

9

<p style="color: red">Hello Worldp>

0,

<p style="color: red">Hello Worldp>

1,

<p style="color: red">Hello Worldp>

2,

<p style="color: red">Hello Worldp>

3,

<p style="color: red">Hello Worldp>

4URL media

<p style="color: red">Hello Worldp>

5

<p style="color: red">Hello Worldp>

6menentukan kemana data formulir dikirim

<p style="color: red">Hello Worldp>

7

<p style="color: red">Hello Worldp>

6,

<p style="color: red">Hello Worldp>

9jenis file yang dapat diterima

<p STYLE="COlor: red">Hello Worldp>

0

<p style="color: red">Hello Worldp>

1,

<p style="color: red">Hello Worldp>

9teks alternatif jika elemen gagal dimuat

<p STYLE="COlor: red">Hello Worldp>

3

<p style="color: red">Hello Worldp>

6,

<p style="color: red">Hello Worldp>

9,

<p STYLE="COlor: red">Hello Worldp>

6,

<p STYLE="COlor: red">Hello Worldp>

7pelengkap kata otomatis

<p STYLE="COlor: red">Hello Worldp>

8

<p STYLE="COlor: red">Hello Worldp>

9,

<button type="submit" class="btn-login">Loginbutton>

0jumlah kolom sel tabel yang harus diisi

<button type="submit" class="btn-login">Loginbutton>

1

<button type="submit" class="btn-login">Loginbutton>

2,

<button type="submit" class="btn-login">Loginbutton>

3URL halaman yang dituju

<button type="submit" class="btn-login">Loginbutton>

4

<button type="submit" class="btn-login">Loginbutton>

2,

<button type="submit" class="btn-login">Loginbutton>

3menentukan hubungan antar dokumen

<button type="submit" class="btn-login">Loginbutton>

7

<p style="color: red">Hello Worldp>

6HTTP method untu mengirim data formulir

Cara Menulis Atribut yang Benar

Atribut HTML dapat ditulis sesuai keinginan termasuk menggunakan huruf kecil/besar, menggunakan tanda petik ganda/tunggal dan sebagainya.

Tapi kita disarankan untuk mengikuti konvensi penulisan atau kebiasaan umum agar elemen HTML dianggap valid dan terlihat lebih rapi.

1. Gunakan Huruf Kecil

Kita dapat menulis atribut HTML menggunakan huruf besar maupun kecil, ini akan dianggap valid oleh W3C.

Tapi, disarankan untuk menulis nama atribut menggunakan huruf kecil semua.

Gunakan huruf kecil semua:

<p style="color: red">Hello Worldp>

Jangan gunakan huruf besar atau campuran:

<p STYLE="COlor: red">Hello Worldp>

2. Bungkus Nilai Atribut dengan Petik Ganda

Selalu gunakan tanda petik untuk membungkus nilai atribut.

Utamakan menggunakan tanda petik ganda, kecuali jika atribut mengandung petik ganda.

Selalu gunakan petik ganda:

<button type="submit" class="btn-login">Loginbutton>

Jangan menulis nilai atribut tanpa pembungkus tanda petik:

<button type=submit class=btn-login>Loginbutton>

Gunakan petik tunggal ketika nilai berisi petik ganda, atau sebaliknya:

<button onclick='alert("hello world")'>Loginbutton>
<button onclick="alert('hello world')">Loginbutton>

Jangan menggunakan petik ganda ketika nilai berisi petik ganda, begitupula petik tunggal:

<p style="color: red" class="text" id="text">hello worldp>

0

3. Gunakan Spasi untuk Memisahkan Atribut

Satu tag pembuka dapat menampung lebih dari satu atribut, agar lebih mudah dibaca pisahkan menggunakan spasi.

Apa yang dimaksud dengan atribut HTML dan contohnya?

Apa itu tag dan atribut dalam HTML?

Apa atribut kelas dalam HTML?