Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / html

Atribut Populer HTML dan Fungsinya

Dipublikasikan Oleh: elfanmauludi 6 komentar
Pada artikel ini akan dijelaskan materi tentang Atribut Populer HTML beserta penjelasan fungsi-fungsinya.


Sebelum lebih lanjut mempelajari materi tentang Atribut Populer HTML dan Fungsinya, terlebih dahulu pelajari materi tentang: Komponen HTML dan Fungsinya, Editor HTML Terbaik yang Dapat Digunakan oleh Pengembang Website, dan Bagian Dasar HTML Fungsi dan Contohnya.

Atribut HTML digunakan untuk menyediakan ekstra atau tambahan informasi terhadap sebuah elemen.
  1. Semua elemen HTML dapat memiliki atribut. Atribut menyediakan tambahan informasi mengenai sebuah elemen.
  2. Atribut melibatkan dua parameter: nama dan nilai. Parameter tersebut mendefinisikan properti dari elemen dan ditempatkan di dalam pembukaan tag pada elemen. Parameter nama menjelaskan nama dari properti yang akan ditambahkan pada elemen dan parameter nilai menjelaskan nilai atau tambahan dari properti nama yang akan ditempatkan pada elemen.
  3. Setiap nama memiliki beberapa nilai yang harus ditulis dapat tanda kutip.

Sintak:
<element attribute_name="attribute_value">

Ada banyak atribut yang populer dalam HTML yang digunakan untuk mengontrol perilaku dan tampilan elemen-elemen pada halaman web. Berikut adalah beberapa atribut populer yang sering digunakan dalam HTML:

Berikut ini adalah beberapa atribut yang sering digunakan pada HTML:
satu, Atribut src (Source): Digunakan dalam tag <img>, <script>, dan <audio>, atribut ini menunjukkan lokasi file untuk gambar, skrip JavaScript, atau file audio. Jika ingin menambahkan gambar pada laman web, maka dibutuhkan tag <img> dan atribut src untuk menambahkan gambar tersebut. Dibutuhkan alamat spesifik dari gambar sebagai nilai atribut di dalam tanda kutip.

Contoh:

<!DOCTYPE html>

<html>

<!-- Atribut HTML --> 

 

<head>

<title>

src Attribute

</title>

</head>

 

<body>

 

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3KqWQ9W-NsuYhRTmKpacJOMA3rH8dKb24OrXjgrKssUmp7ixW7XCr4kPYPIkdyvXu84vCD-t4x6Mgo2v3LbfioNeAXtUNy05rsmC3MrcWsWydigMaayLlNZ4Cdl8p3hNgQtsmJqzR2xE/s113/IMG-20190205-WA0015.jpg">

 

</body>

</html>


dua, Atribut alt (Alternate Text): Berfungsi untuk menampilkan atau memperlihatkan tampilan alternatif dari atribut utama seperti <img> yang gagal dimuat ketika ingin ditampilkan. Atribut <img> yang memberikan teks alternatif untuk gambar jika gambar gagal dimuat atau untuk membantu aksesibilitas bagi pengguna yang menggunakan pembaca layar. Atribut ini juga bisa digunakan untuk mendeskripsikan gambar kepada developer yang biasanya diletakkan dibagian akhir dari kode program.

Contoh:

<!DOCTYPE html>

<html>

<!-- Atribut HTML -->

  

<head>

<title>

alt Attribute

</title>

</head>

 

<body>

<!-- Jika gambar yang terdapat pada link tidak ditemukan

atau field gambar blank maka nilai alt akan ditampilkan -->

 

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3KqWQ9W-NsuYhRTmKpacJOMA3rH8dKb24OrXjgrKssUmp7ixW7XCr4kPYPIkdyvXu84vCD-t4x6Mgo2v3LbfioNeAXtUNy05rsmC3MrcWsWydigMaayLlNZ4Cdl8p3hNgQtsmJqzR2xE/s113/IMG-20190205-WA0015.jpg" alt="The Logo">

 

<br>

 

<!-- sumber gambar = https://upload.wikimedia.org/wikipedia/id/1/13/Jumanji_Welcome_to_the_Jungle_Poster.jpg-->

 

<img src="" alt="Karena gambar tidak ditemukan, maka yang anda lihat sekarang adalah tulisan ini">

</body>

</html>


Baca Juga:
tiga, Atribut height dan width: atribut ini digunakan untuk menyesuaikan lebar dan panjang dari sebuah gambar.

Contoh:

<!DOCTYPE html>

<html>

<!-- Atribut HTML -->

 

<head>

<title>

Width dan Height

</title>

</head>

 

<body>

 

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3KqWQ9W-NsuYhRTmKpacJOMA3rH8dKb24OrXjgrKssUmp7ixW7XCr4kPYPIkdyvXu84vCD-t4x6Mgo2v3LbfioNeAXtUNy05rsmC3MrcWsWydigMaayLlNZ4Cdl8p3hNgQtsmJqzR2xE/s113/IMG-20190205-WA0015.jpg" width="300px" height="100px" >

 

</body>

</html>


empat, Atribut class dan id: Atribut ini digunakan untuk identifikasi identitas unik dari sebuah elemen. Situasi mungkin menjadi lebih sulit ketika ingin melakukan akses secara spesifik terhadap elemen yang memiliki nama yang sama terhadap elemen yang lain. Untuk hal tersebut, disediakan id dan class yang berbeda terhadap berbagai elemen sehingga dapat dilakukan akses secara spesifik terhadap elemen yang sama pada HTML.  Atribut class dan id digunakan untuk memberikan identifikasi pada elemen-elemen HTML, dimana Class dapat digunakan untuk mengelompokkan beberapa elemen dan menerapkan gaya CSS yang sama, sedangkan ID memberikan identifikasi unik untuk elemen tertentu. Atribut ini biasanya digunakan pada CSS, akan dipelajari pada materi selanjutnya. 

Contoh:

<!DOCTYPE html>

<html>

<!-- Atribut HTML -->

 

<head>

<title>

id Attribute

</title>

</head>

 

<body>

<p id = "ELF">

Hello bro,

<br>

 

<p id = "FAN">

Ini adalah paragraf unik

<br>

 

<p id = "head">

Ini juga paragraf unik

</body>

</html>

Output:

Hello bro,

Ini adalah paragraf unik

lima, Atribut title: Atribut title digunakan untuk menjelaskan elemen ketika menggeser (hover) menuju ke elemen tersebut. Setiap elemen memiliki kebiasaan yang berbeda tetapi secara umum nilai tersebut akan ditampilkan ketika proses loading atau hovering pointer mouse menuju ke elemen. Atribut ini menyediakan informasi tambahan tentang elemen saat digulir mouse diatasnya. Atribut title juga sering digunakan untuk memberikan tooltip.

Contoh:

<!DOCTYPE html>

<html>

<!-- Atribut HTML -->

 

<head>

<title>

title Attribute

</title>

</head>

 

<body>

 

<h3 title="Hello Mufasa, apa yang dimakan oleh kambing supaya rambutnya jadi pirang?">

geser kursor untuk melihat dampaknya!

</h3>

 

</body>

</html>


enam, Atribut href (Hyperlink Reference): Atribut href digunakan untuk menuju link spesifik dari sebuah alamat web. Atribut ini digunakan bersama dengan tag <a>. Link diletakkan di dalam atribut href yang akan dihubungkan terhadap alamat teks yang ditampilkan pada tag <a>. Atribut ini juga biasa digunakan dalam tag <a> untuk menentukan URL atau alamat tujuan dari tautan.

Ketika melakukan klik pada teks yang disisipi link maka akan langsung diarahkan ke laman web yang terdapat pada link tersebut. Secara otomatis, link akan dibuka pada tag yang sama tetapi dengan menggunakan atribut targer dan pengaturan nilai terhadap atribut tersebut, maka selanjutnya alamat link akan terbuka. Setelah link di klik maka akan diarahkan ke laman web sesuai link pada satu tab yang sama atapun berbeda sesuai dengan nilai atribut target.

Contoh:

<!DOCTYPE html>

<html>

<!-- Atribut HTML -->

 

<head>

<title>

link Attribute

</title>

</head>

 

<body>

 

<a href="https://www.penelitian.id/">

Tombol Klik digunakan untuk open satu tab yang sama

</a>

 

<br>

 

<a href="https://www.penelitian.id/" target="_blank">

Tombol Klik digunakan untuk open new tap berbeda

</a>

 

</body>

</html>

Output:
Klik link ini untuk membuka dalam satu tab yang sama
Klik link ini untuk membuka dalam tap lain yang berbeda

tujuh, Atribut style: Atribut ini digunakan untuk menyediakan berbagai variasi efek CSS (Cascading Style Sheets) terhadap elemen HTML seperti memperbesar ukuran font, mengubah jenis font, perngaturan warna, dan lain sebagainya. Secara lengkap akan dijelaskan pada bagian HTML Style. Program berikut ini akan menampilkan beberapa nama dan nilai yang digunakan bersamaan dengan atribut style. Atribut style memungkinkan penambahan gaya langsung ke elemen HTML menggunakan CSS dan juga memungkinkan untuk melakukan pengaturan style atau gaya tertentu secara langsung pada elemen tersebut.

Contoh:

<!DOCTYPE html>

<html>

<!-- Atribut HTML -->

 

<head>

<title>

style Attribute

</title>

</head>

 

<body>

<h2 style="font-family:Chaparral Pro Light;">

Hai Bambang.

</h2>

 

<h3 style="font-size:20px;">

Hai Farjo.

</h3>

 

<h2 style="color:#8CCEF9;">

Halo Sulaiman.

</h2>

 

<h2 style="text-align:center;">

Halo Adam.

</h2>

</body>

</html>

Output:

Hai Bambang.

Hai Farjo.

Halo Sulaiman.

Halo Adam.


delapan, Atribut lang: HTML dideklarasikan bersamaan dengan atribut lang. Pendeklarasian atribut ini sangat penting untuk mengakses aplikasi dan mesin pencari.

<!DOCTYPE html> 
<html lang="en-US"> 
<body> 
... 
</body> 
</html>

Beberapa atribut populer lainnya seperti:
  • target: Digunakan dalam tag <a> untuk menentukan dimana halaman yang ditautkan akan dibuka. Misalnya, _blank akan membuka tautan dalam tab atau jendela baru.
  • rel (Relationship): Digunakan dalam tag <a> untuk menunjukkan hubungan antara halaman saat ini dengan halaman yang ditautkan.
  • aria-* (Accessible Rich Internet Applications): Atribut ini digunakan untuk meningkatkan aksesibilitas elemen, memberikan informasi tambahan kepada pembaca layar dan teknologi bantu lainnya.
  • data-*: Atribut khusus yang memungkinkan pengguna untuk menambahkan informasi kustom ke elemen HTML tanpa mempengaruhi tampilan atau perilaku standar browser.

Sebenarnya masih ada banyak atribut lainnya yang juga sangat berguna tergantung pada jenis elemen HTML dan kebutuhan pengembangan halaman web, dimana atribut-atribut ini juga membantu dalam mengontrol perilaku, tampilan, dan fungsionalitas elemen-elemen HTML.

Referensi Tambahan:

Artikel ini didedikasikan kepada: Mauluda Muhammad Rizky, Muchamad Mukharom Arijal, Muhammad Irfan Pratama, Nadya Putri Al-Fath, dan Nena Mahaesti.
Location: Semarang, Kota Semarang, Jawa Tengah, Indonesia

6 komentar untuk "Atribut Populer HTML dan Fungsinya"

  1. AnonimSelasa, 18 Mei 2021 pukul 14.30.00 WIB

    Apakah semua elemen HTML dapat memiliki atribut?

    BalasHapus
    Balasan
    1. AnonimSelasa, 18 Mei 2021 pukul 14.30.00 WIB

      Semua elemen HTML dapat memiliki atribut. Atribut memberikan informasi tambahan tentang elemen HTML. Atribut juga selalu ditentukan pada awal tag.

      Hapus
  2. AnonimSelasa, 18 Mei 2021 pukul 14.33.00 WIB

    Ada berapa klasifikasi atribut pada HTML?

    BalasHapus
    Balasan
    1. AnonimSelasa, 18 Mei 2021 pukul 14.33.00 WIB

      Atribut HTML umumnya diklasifikasikan sebagai atribut wajib, atribut opsional, atribut standar, dan atribut event

      Hapus
  3. AnonimSelasa, 18 Mei 2021 pukul 14.34.00 WIB

    Apa peberdaan antara atribut wajib, atribut opsional, atribut standar, dan atribut event pada HTML?

    BalasHapus
    Balasan
    1. AnonimSelasa, 18 Mei 2021 pukul 14.34.00 WIB

      1. Biasanya atribut wajib dan opsional digunakan untuk memodifikasi element tertentu pada HTML.

      2. Sedangkan atribut standar dapat diterapkan pada sebagian besar elemen HTML.

      Hapus

Hubungi admin melalui Wa : +62-896-2414-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -
- Big things start from small things -