Beranda
html

Mengenal tag, elemen, atribut html

Ngode Yuk Published by Ngode Yuk

Jika di tutorial sebelumnya kita membahas tentang apa itu html, sekarang kita akan membahas apa sih yang dimaksud dengan tag, elemen, atribut dalam html?

nah dari pada kelamaan yuk kita pembahasannya

Apa itu tag?

Tag adalah penanda awalan dan akhiran pada elemen html, biasanya tag dikelilingi oleh tanda kurung sudut < >

untuk penanda awalan tag menggunakan kurung sudut < >

sedangkan untuk penanda akhiran akan ditambahkan dengan / menjadi </ >

pada umumnya tag pada html dibuat secara berpasangan yaitu ketika ada tag awal pasti ada tag akhir seperti tag paragraf sebagai berikut
<p> ini paragraf </p>

namun ada juga tag yang tidak memerlukan tag penutup contohnya yaitu tag <br> dimana tag tersebut menghasilkan baris baru

selalu gunakan penutup tag

Selalu gunakan penutup tag pada tag yang terdapat tag penutup, untuk mencegah hal-hal yang tidak diinginkan seperti halnya tag <h1> dimana ketika tag tersebut, tidak diberikan penutup maka yang terjadi adalah tag tersebut tetap berfungsi namun akan memengaruhi tag dibawahnya, contoh:

<h1>ini adalah tag
<p>ini adalah paragraf</p>

Output :
ini adalah tag
ini adalah paragraf


dari contoh diatas dimana tag h1 mempengaruhi tag p yang membuat teks menjadi tebal, maka untuk itu gunakan tutup tag untuk menghindari kejadian hal-hal yang tidak diinginkan seperti contoh diatas

Selalu gunakan huruf kecil pada tag

Hal ini direkomendasikan karena html tidak peka terhadap besar/kecil huruf, karena html akan menganggap bahwa tag <p> itu sama dengan tag<P> nah itu akan menjadi kesalahan jika menggunakan xhtml dimana penggunaan peraturan yang sangat ketat.

maka dari itu direkomendasikan untuk menggunakan huruf kecil

Untuk referensi tag yang lain silahkan kunjungi Referensi Tag HTML

Apa itu elemen?

Elemen adalah gabungan antara tag pembuka, konten dan tag penutup.

elemen dapat dibagi menjadi 2 yaitu elemen sederhana dan elemen bersarang (nested)

Elemen sederhana

Elemen sederhana biasanya dapat berupa sebagai teks, gambar, link dan sebagainya, contoh :
<p>ini adalah elemen </p>

<a href="https://example.com">ini adalah link</a>

Elemen bersarang (nested)

Elemen bersarang adalah sebutan untuk elemen di dalam elemen hal ini dapat terjadi di beberapa elemen dasar sepertihead

<head>
  <title>ini adalah judul</title>
</head>

head adalah elemen, namun didalamnya ada elemen title dimana elemen title berfungsi untuk memberikan judul pada halaman web

selain head masih banyak lagi elemen yang dapat berisi elemen seperti bodydiv

Apa itu atribut?

Atribut adalah informasi tambahan ataupun properti tambahan kepada elemen, atribut selalu ditulis pada tag pembuka seperti halnya yaitu atribut style

dimana fungsi atribut style adalah memberikan gaya pada elemen yang dapat berupa warna, font, ukuran dll.

untuk contoh penggunaannya sebagai berikut

<p style="color: red;">halo dunia</p>

Atribut Global

Atribut global adalah atribut yang dapat digunakan di semua elemen

berikut adalah atribut global

  1. accesskey: Menentukan tombol pintasan untuk mengaktifkan atau memfokuskan elemen.

    Digunakan untuk memberikan akses cepat ke elemen tertentu melalui kombinasi tombol keyboard.

  2. class: Menentukan satu atau lebih nama kelas untuk elemen (mengacu pada kelas di lembar gaya).

    Memungkinkan elemen memiliki gaya khusus yang didefinisikan dalam CSS.

  3. contenteditable: Menentukan apakah konten dalam elemen dapat diedit atau tidak.

    Berguna untuk membuat elemen seperti teks atau area tertentu dapat diubah langsung oleh pengguna.

  4. data-*: Digunakan untuk menyimpan data khusus yang bersifat privat untuk halaman atau aplikasi.

    Berguna untuk menyimpan data tambahan yang dapat digunakan oleh JavaScript.

  5. dir: Menentukan arah teks dalam elemen (seperti kiri ke kanan atau kanan ke kiri).

    Biasa digunakan untuk mendukung bahasa yang memiliki arah teks berbeda, seperti Arab atau Ibrani.

  6. draggable: Menentukan apakah elemen dapat ditarik (drag) atau tidak.

    Memungkinkan elemen dipindahkan atau dimanipulasi melalui fungsi drag-and-drop.

  7. enterkeyhint: Menentukan teks pada tombol enter di keyboard virtual.

    Memberikan petunjuk tentang fungsi tombol enter, seperti "Cari" atau "Kirim".

  8. hidden: Menentukan bahwa elemen belum, atau tidak lagi, relevan.

    Elemen ini tidak akan ditampilkan di halaman, tetapi tetap ada di DOM.

  9. id: Menentukan id unik untuk elemen.

    Id digunakan untuk mengidentifikasi elemen secara unik di dalam dokumen.

  10. inert: Menentukan bahwa browser harus mengabaikan bagian ini.

    Berguna untuk menonaktifkan elemen tanpa menghapusnya dari dokumen.

  11. inputmode: Menentukan mode pada keyboard virtual.

    Digunakan untuk menunjukkan jenis input yang diharapkan, seperti angka atau teks.

  12. lang: Menentukan bahasa konten dalam elemen.

    Berguna untuk mendukung pengaturan bahasa, misalnya untuk pembaca layar.

  13. popover: Menentukan elemen popover.

    Biasanya digunakan untuk menampilkan informasi tambahan seperti tooltip atau menu.

  14. spellcheck: Menentukan apakah ejaan dan tata bahasa elemen harus diperiksa atau tidak.

    Aktifkan untuk membantu pengguna dengan pemeriksaan kesalahan ejaan.

  15. style: Menentukan gaya CSS inline untuk elemen.

    Digunakan untuk memberikan gaya langsung pada elemen tanpa menggunakan file CSS terpisah.

  16. tabindex: Menentukan urutan tabulasi elemen.

    Kontrol urutan navigasi keyboard melalui elemen di halaman.

  17. title: Menentukan informasi tambahan tentang elemen.

    Teks ini biasanya muncul sebagai tooltip ketika kursor diarahkan ke elemen.

  18. translate: Menentukan apakah konten elemen harus diterjemahkan atau tidak.

    Digunakan untuk menunjukkan elemen yang tidak perlu diterjemahkan, seperti nama merek.

Posting Komentar