Atribut Pada HTML


Oleh: Aguzrybudy,

Tanggal: 19 September 2019

Atribut digunakan untuk mendefinisikan karakteristik elemen HTML dan ditempatkan di dalam tag pembuka elemen. Semua atribut terdiri dari dua bagian - nama dan nilai

Nama adalah properti yang ingin Anda atur. Sebagai contoh, elemen paragraf <p> dalam contoh membawa atribut yang namanya selaras, yang dapat Anda gunakan untuk menunjukkan perataan paragraf pada halaman.

Nilai adalah apa yang Anda inginkan agar nilai properti diatur dan selalu dimasukkan dalam kutipan. Contoh di bawah ini menunjukkan tiga nilai yang mungkin dari atribut align: kiri, tengah dan kanan.

Nama atribut dan nilai atribut tidak peka huruf besar-kecil. Namun, Konsorsium World Wide Web (W3C) merekomendasikan nilai atribut / huruf kecil dalam rekomendasi HTML 4 mereka.

Contoh

<!DOCTYPE html> 
<html>
 
   <head> 
      <title>Align Attribute  Example</title> 
   </head>
	
   <body> 
      <p align = "left">This is left aligned</p> 
      <p align = "center">This is center aligned</p> 
      <p align = "right">This is right aligned</p> 
   </body>
	
</html>

Atribut Inti
Empat atribut inti yang dapat digunakan pada sebagian besar elemen HTML (meskipun tidak semua) adalah -

  • Id
  • Title
  • Class
  • Style

Atribut Id
Atribut id dari tag HTML dapat digunakan untuk mengidentifikasi secara unik elemen apa pun dalam halaman HTML. Ada dua alasan utama mengapa Anda mungkin ingin menggunakan atribut id pada suatu elemen -

Jika suatu elemen membawa atribut id sebagai pengidentifikasi unik, dimungkinkan untuk mengidentifikasi elemen itu saja dan kontennya.

Jika Anda memiliki dua elemen dengan nama yang sama di dalam halaman Web (atau style sheet), Anda dapat menggunakan atribut id untuk membedakan antara elemen yang memiliki nama yang sama.

Kita akan membahas style sheet (css) dalam tutorial terpisah. Untuk saat ini, mari gunakan atribut id untuk membedakan antara dua elemen paragraf seperti yang ditunjukkan di bawah ini.

<p id = "html">This para explains what is HTML</p>
<p id = "css">This para explains what is Cascading Style Sheet</p>

 

Atribut Title
Atribut title memberikan judul yang disarankan untuk elemen. Mereka sintaks untuk atribut judul sama seperti yang dijelaskan untuk atribut id -

Perilaku atribut ini akan tergantung pada elemen yang membawanya, meskipun sering ditampilkan sebagai tooltip ketika kursor melewati elemen atau saat elemen memuat.

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>The title Attribute Example</title>
   </head>
	
   <body>
      <h3 title = "Hello HTML!">Titled Heading Tag Example</h3>
   </body>
	
</html>

Atribut Class
Atribut kelas digunakan untuk mengaitkan elemen dengan lembar gaya, dan menentukan kelas elemen. Anda akan belajar lebih banyak tentang penggunaan atribut kelas ketika Anda akan belajar Cascading Style Sheet (CSS).

Atribut Style
Atribut style memungkinkan Anda menentukan aturan Cascading Style Sheet (CSS) di dalam elemen.

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>The style Attribute</title>
   </head>
	
   <body>
      <p style = "font-family:arial; color:#FF0000;">Some text...</p>
   </body>
	
</html>

Pada turtorial ini, kita tidak belajar CSS, jadi mari kita lanjutkan tanpa banyak peduli tentang CSS. Di sini, Anda perlu memahami apa atribut HTML dan bagaimana atribut itu dapat digunakan saat memformat konten.

Atribut Internasionalisasi
Ada tiga atribut internasionalisasi, yang tersedia untuk sebagian besar (walaupun tidak semua) elemen XHTML.

  • dir
  • lang
  • xml:lang

Atribut Dir
Atribut dir memungkinkan Anda menunjukkan ke browser tentang arah mengalirnya teks. Atribut dir dapat mengambil salah satu dari dua nilai, seperti yang Anda lihat pada tabel berikut -

Value Artinya
ltr Kiri ke kanan (nilai default)
rtl Kanan ke kiri (untuk bahasa seperti bahasa Ibrani atau Arab yang dibaca kanan ke kiri)

 

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

   <head>
      <title>Display Directions</title>
   </head>
	
   <body>
      This is how IE 5 renders right-to-left directed text.
   </body>
	
</html>

Ketika atribut dir digunakan dalam tag <html>, itu menentukan bagaimana teks akan disajikan dalam seluruh dokumen. Saat digunakan dalam tag lain, tag ini mengontrol arah teks hanya untuk konten tag itu.

Atribut lang
Atribut lang memungkinkan Anda menunjukkan bahasa utama yang digunakan dalam dokumen, tetapi atribut ini disimpan dalam HTML hanya untuk kompatibilitas dengan versi HTML sebelumnya. Atribut ini telah digantikan oleh atribut xml: lang dalam dokumen XHTML baru.

Nilai-nilai atribut lang adalah kode bahasa dua karakter standar ISO-639. Periksa Kode Bahasa HTML: ISO 639 untuk daftar kode bahasa lengkap.

Contoh

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

   <head>
      <title>English Language Page</title>
   </head>

   <body>
      This page is using English Language
   </body>

</html>

Atribut xml: lang
Atribut xml: lang adalah pengganti XHTML untuk atribut lang. Nilai atribut xml: lang harus berupa kode negara ISO-639 seperti yang disebutkan di bagian sebelumnya.

Atribut Generic 
Berikut adalah tabel beberapa atribut lain yang siap digunakan dengan banyak tag HTML.

Attribute Pilihan Fungsi
align right, left, center Menyelaraskan tag secara horizontal
valign top, middle, bottom Luruskan tag secara vertikal dalam elemen HTML.
bgcolor numeric, hexidecimal, RGB values Tempatkan warna latar belakang di belakang elemen
background URL Tempatkan gambar latar belakang di belakang elemen
id User Defined Menamai elemen untuk digunakan dengan Cascading Style Sheets.
class User Defined Mengklasifikasikan elemen untuk digunakan dengan Cascading Style Sheets.
width Numeric Value Menentukan lebar tabel, gambar, atau sel tabel.
height Numeric Value Menentukan ketinggian tabel, gambar, atau sel tabel.
title User Defined Judul "Munculan" elemen.

Kami akan memberikan contoh terkait saat kami akan melanjutkan untuk mempelajari tag HTML lainnya. Untuk daftar lengkap Tag HTML dan atribut terkait silakan periksa referensi ke Daftar Tag HTML.

Sampai disini dulu tutorial dari kita, semoga tutorial ini bermanfaat bagi anda dan jika bermanfaat jangan lupa di share, atas segala kekuranganya mohon dimaafkan, jika ada yang ingin ditanyakan silahkan tinggalkan komentar.

Tags

Share Article