Pengertian Atribut HTML dan Fungsinya Yang Tidak Banyak Diketahui

Cover image

Mau tahu apa yang dimaksud dengan atribut html? Berikut adalah penjelasan lengkap dan contoh beserta fungsi dalam penggunaannya..

Advertisement

Jika sebelumnya kita telah belajar apa itu tag html dan elemen seperti <h1>, <p>, dan <div>. Maka kali ini kita akan memahami apa yang dimaksud dengan atribut html.

Nah atribut sendiri maksudnya adalah informasi tambahan yang diberikan kepada tag. Informasi ini bisa berupa instruksi untuk warna dari text, besar huruf dari text.

Cara penulisannya pun cukup menambahkan name dan value:

<!DOCTYPE html>
<html>

   <head>
      <title>Tata Letak Tulisan</title>
   </head>

   <body>
      <p align="left">Tulisan dengan format rata kiri</p>
      <p align="center">Tulisan dengan format rata tengah</p>
      <p align="right">Tulisan dengan format rata kanan</p>
   </body>

</html>

Dalam contoh diatas, kita mendeklarasikan name align dan value left, center, atau right.

Penulisan atribut berada dalam tag pembuka.

Advertisement

Table Of Contents

#1 Atribut Inti

Ada empat atribut penting yang sering digunakan dalam tag HTML:

  • Id
  • Class
  • Title
  • Style

Pertama - Atribut Id berfungsi untuk mengidentifikasi keunikan dari setiap elemen yang ada dalam satu halaman web. Artinya dalam sebuah halaman hanya akan ada satu nama Id.

Nah nantinya atribut Id akan kita gunakan saat bermain dengan css.

Berikut adalah contoh penulisan atribut Id:

<!DOCTYPE html>
<html>

   <head>
      <title>Tulisan</title>
   </head>

   <body>
      <p id="pertama">Ini adalah tulisan pertama</p>
      <p id="kedua">Ini adalah tulisan kedua</p>
   </body>

</html>

Kedua - Atribut title ini biasanya digunakan untuk tooltips dari judul ataupun gambar dari sebuah elemen website. Berfungsi untuk menjelaskan lebih detail.

Berikut adalah contoh penggunaan atribut title:

<!DOCTYPE html>
<html>

   <head>
      <title>Selamat Datang di Kodedasar.com</title>
   </head>

   <body>
      <h3 title="Hai nama saya Damas Amirul Karim">Damas Amirul Karim</h3>
   </body>

</html>

Untuk percobaan, silahkan sorotkan kursor tepat diatas judul Damas Amirul Karim.

Ketiga - Atribut style banyak digunakan untuk mengubah tampilan dasar dari elemen html.

Jadi disini kita bisa menambahkan kode css didalam atribut style.

Perhatikan contoh penggunaan atribut style berikut:

<!DOCTYPE html>
<html>

   <head>
      <title>Atribut Style</title>
   </head>

   <body>
      <p style="font-family:arial; color:#FF0000;">Contoh tulisan...</p>
   </body>

</html>

Keempat - Atribut class hampir sama dengan atribut Id namun yang membedakannya adalah:

Atribut Id bersifat unik sedangkan class tidak demikian.

Anda bisa menambahkan banyak class di dalam sebuah elemen html.

Nantinya akan sangat berguna saat kita mempelajari css.

<!DOCTYPE html>
<html>

   <head>
      <title>Atribut Class</title>
   </head>

   <body>
      <p class="satu dua tiga">Contoh tulisan dengan class...</p>
   </body>

</html>

Pada contoh diatas saya menambahkan tiga buah class dalam sebuah tag html.

#2 Atribut Internasional

Ada dua atribut Internasional khusus untuk tag HTML antara lain:

  • dir
  • lang

Atribut Dir digunakan untuk mengindikasikan kepada browser bagaimana urutan penulisannya.

ValuePenjelasan
ltrLeft to Right (Dibaca dari kiri ke kanan)
rtlRight to Left (untuk tulisan arab - mulai dari kanan ke kiri)

Berikut contoh penggunaan tag dir:

<!DOCTYPE html>
<html dir="rtl">

   <head>
      <title>Arah Membaca</title>
   </head>

   <body>
      Inilah cara IE 5 membaca tulisan dari kanan ke kiri.
   </body>

</html>

Atribut Lang digunakan untuk mengidikasikan bahasa utama dari halaman website.

Berikut cara penulisan tag lang:

<!DOCTYPE html>
<html lang="id">

   <head>
      <title>Halaman Bahasa Indonesia</title>
   </head>

   <body>
      Halaman ini menggunakan bahasa indonesia.
   </body>

</html>

#3 Tambahan: Atribut Bawaan

Berikut adalah beberapa atribut yang secara umum bisa anda gunakan:

AtributPilihanFungsinya
alignright, left, centerRata secara horizontal
valigntop, middle, bottomRata secara vertikal
bgcolornumeric, hexidecimal, RGB valuesMemberi warna latar elemen
backgroundURLMemberikan background gambar elemen.
idUser DefinedNama khusus sebuah elemen untuk CSS
classUser DefinedNama untuk pengklasifikasian CSS
widthNumeric ValueBiasanya untuk lebar table dan img
heightNumeric ValueBiasanya digunakan untuk tinggi table dan img.
titleUser DefinedJudul dari elemen "Pop-up"

Demikianlah penjelasan mengenai atribut pada HTML. Jangan lewatkan seri belajar html kami.

Advertisement

Mulai Diskusi

Media Partner

Kami bekerjasama dengan situs-situs yang mempunyai tujuan sama yaitu menyebarkan manfaat keseluruh masyarakat indonesia di bidang pemrogramman dan teknologi.