Cara menggunakan tag html dan atributnya

Question

Di postingan sebelumnya kita sudah berhasil membuat file HTML. Sekarang yang dibahas yaitu apa itu tag, elemen, dan atribut pada HTML. Simak pembahasan AneIqbal selengkapnya berikut ini.

Table of Contents Show

Atribut pada HTML
Apa itu Tag?
Apa itu Elemen?
Apa itu Atribut?
Kode Program Lengkap
Pertemuan Selanjutnya
Atribut HTML apa saja?
Bagaimana cara penulisan tag HTML yang benar?
Apa yang dimaksud dengan atribut HTML dan contohnya?

Apa tuh? Istilah-istilah baru nih. Sudah pernah denger sebelumnya?

Kalau belum kita bahas satu per satu.

Tag
Elemen
Atribut pada HTML

Tag adalah perintah/kode untuk memberitahu web browser fungsi dari suatu objek. Apakah objek itu merupakan sebuah paragraf, sebuah list, sebuah gambar, sebuah video, atau yang lainnya.

Tag ditulis secara berpasangan, ada tag pembuka dan tag penutup.

..meskipun ada juga beberapa tag yang tidak punya pasangan (disebut juga self closing tag), tetapi mayoritas tag memiliki pasangan.

Contoh self closing tag:

<br/> (dapat ditulis juga <br>): untuk memberi perintah ke browser agar pindah baris.
<hr/> (dapat ditulis juga <hr>): untuk memberi perintah ke browser agar membuat garis horizontal.

Begini penulisan tag pada HTML:

<tag_pembuka>ini objek yang diberi tag</tag_penutup>

Begini contoh kode HTML-nya:

<p>Ini adalah teks yang berfungsi sebagai paragraf</p>

<p> adalah tag pembuka, tag p berarti menandai objek yang diapit adalah sebuah paragraf. </p> adalah tag penutup. Bedanya ada pada garis miring (/).

Contoh lain yang lebih panjang.

<p>Teks ini adalah sebuah paragraf yang di dalamnya ada kata yang dicetak <b>tebal</b> dan ada pula yang dicetak <i>miring</i>.</p>

Maka hasilnya setelah dijalankan di web browser seperti ini:

Teks ini adalah sebuah paragraf yang di dalamnya ada kata yang dicetak tebal dan ada pula yang dicetak miring.

Tag selesai. Lanjut ke elemen.

Elemen

Di atas kita sudah mencoba menulis tag <p> yang berfungsi untuk membuat paragraf. Mulai dari tag pembukanya, objek yang diapitnya, dan tag penutupnya.

..itulah yang disebut dengan elemen.

Jadi, satu kesatuan dari tag pembuka, atribut tag, objek yang diapit, dan tag penutup disebut dengan elemen.

Contoh:

<p>Teks ini adalah sebuah paragraf yang di dalamnya ada kata yang dicetak <b>tebal</b> dan ada pula yang dicetak <i>miring</i>.</p>

Kode di atas merupakan elemen p.

Elemen selesai. Lanjut ke atribut.

Atribut pada HTML

Jika kita ingin memberi informasi tambahan (misal: perataan, warna, atau jenis teks, atau juga link yang dituju) ke web browser dari suatu tag, maka kita dapat menggunakan atribut.

Untuk menambahkan atribut ke dalam tag, caranya yaitu dengan mengetik nama_atribut=”nilai_atribut”. Nama dan value-nya, mereka selalu berpasangan.

..value-nya jangan lupa diberi tanda kutip 1 (‘ ‘) atau kutip 2 (” “), keduanya bisa.

Contohnya, kita ingin teks paragraf rata kiri, maka kode HTML-nya adalah:

<p align="left">Teks paragraf ini akan tampil di browser dengan rata kiri.</p>

align adalah nama atributnya. left adalah value atau nilainya.

Tidak semua tag punya atribut yang sama, ada juga yang berbeda. Contohnya tag <a>.

Tag <a> adalah perintah membuat link. Sebuah link haruslah memiliki alamat yang dituju, maka ada atribut href pada tag <a> dan value dari atribut itu adalah alamat link yang dituju.

Contoh:

<a href="https://www.aneiqbal.com">Ini adalah link menuju AneIqbal.</a>

Hasilnya:

Ini adalah link menuju AneIqbal.

Atribut selesai. Menandakan kita sudah mempelajari tag, elemen dan atribut.

Gimana? Sudah paham kan apa itu tag, elemen, dan atribut pada HTML?

Selanjutnya kita akan membahas struktur dasar HTML.

Apa itu Tag?

HTML adalah sebuah markup yang membentuk struktur tubuh halaman web. HTML tersusun dari berbagai element. Dan tiap element, selalu ditulis dengan sebuah tag pembuka <nama-tag> dan tag penutup </nama-tag>. Meskipun ada beberapa tag yang hanya perlu dibuka, dan tidak perlu ditutup.

Jadi, tag adalah teks yang berada di antara tanda <..> dan juga </...>.

Dan, tag di dalam HTML bertugas untuk membuat atau membangun sebuah elemen [1].

Di antara contoh-contoh tag dalam HTML:

<html> - elemen root dari dokumen HTML
<head> - untuk mendefinisikan meta data, judul, styles, dan lain-lain dari dokumen HTML
<body> - untuk mendefinisikan body dari dokumen HTML (body adalah bagian yang terlihat oleh user)
<p> - untuk membuat elemen paragraf
<a> - untuk membuat elemen link
<button> - untuk membuat elemen tombol

Apa itu Elemen?

Elemen dalam HTML adalah sebuah komponen HTML. Elemen juga bisa dikatakan sebagai node atau simpul yang membentuk hirarki pohon dokumen HTML [2].

Bayangkan kita memiliki dua buah tombol html seperti berikut:

Berarti, kita memiliki 2 buah elemen HTML berupa tombol.

Cara membuatnya pun dengan menuliskan dua buah tag dengan nama <button>.

Sebagaimana dalam kode berikut:

<!DOCTYPE html>
<html>
  <head>
    <title>Elemen Pada HTML</title>
  </head>
  <body>
    <button>Tombol Kiri</button>
    <button>Tombol Kanan</button>
  </body>
</html>

Seperti yang telah dijelaskan di atas, tiap elemen HTML akan membentuk satu node (simpul) tersendiri dalam susuan hirarki HTML. Sehingga jika kita gambar dalam bentuk pohon diagram, penampakan dari 2 tombol di atas adalah seperti ini:

NB: elemen <head> dan turunannya adalah elemen yang tidak tampak secara langsung pada user. Berbeda dengan elemen <body> yang mana hasilkan akan langsung terlihat oleh user.

Apa itu Atribut?

Selain dua unsur penting di atas HTML juga memiliki sebuah istilah lain yang tidak kalah penting, yaitu atribut.

Apa itu atribut?

Atribut adalah sebuah tambahan argumen atau aksesoris terhadap suatu elemen HTML. Atribut hanya ditulis pada tag pembuka. Dan atribut berfungsi untuk menambahkan informasi tambahan pada suatu elemen HTML [3].

Contoh:

<img src="https://jagongoding.com/images/jagongoding-logo-full.png">

Kode di atas akan menampilkan sebuah gambar berikut:

Kita juga bisa mengatur panjang dan tinggi dari elemen gambar dengan menambahkan atribut width dan atribut height. Perhatikan contoh berikut:

<img
  src="https://jagongoding.com/images/jagongoding-logo-full.png"
  width="120"
  height="40">

Hasilnya:

Penjelasan

Tag <img> bertugas untuk membuat elemen gambar
Tag <img> termasuk tag yang hanya perlu pembuka, tanpa tag penutup
Tag <img> memiliki atribut src, height dan width
Atribut src berfungsi untuk menambahkan informasi url gambar yang akan ditampilkan oleh elemen <img>
Atribut height memberikan informasi tinggi gambar
Atribut width memberikan informasi lebar gambar

Kesimpulan

Setelah melakukan beberapa percobaan di atas, kita bisa memetik beberapa kesimpulan kunci. Di antaranya:

HTML adalah dokumen yang tersusun dari berbagai macam elemen
Elemen didefinisikan dengan menuliskan tag pembuka dan tag penutup (kecuali beberapa elemen yang tidak perlu tag penutup)
Tag adalah apa yang ada di antara tanda <...> dan </...>
Elemen bisa memiliki atribut, yang berfungsi untuk memberikan informasi tambahan pada suatu elemen

Kode Program Lengkap

Untuk kode program lengkap dari tutorial ini, bisa kalian akses pada repository github html-dasar.

Jangan lupa kasih ⭐⭐

Pertemuan Selanjutnya

Pada pertemuan selanjutnya, insyaallah kita akan membahas tentang struktur dasar dokumen HTML.

Stay tune!

Referensi

[1] https://developer.mozilla.org/en-US/docs/Glossary/Tag - diakses tanggal 14 Februari 2021
[2] https://en.wikipedia.org/wiki/HTML_element - diakses tanggal 14 Februari 2021
[3] https://www.w3schools.com/html/html_attributes.asp - diakses tanggal 14 Februari 2021

Atribut HTML apa saja?

Atribut href. Atribut href dipakai pada link (tag a). ... .

Atribut src. Atribut src dipakai pada image (tag img). ... .

Atribut width dan height. Atribut width dan height dipakai pada tag img. ... .

Atribut sytle. Atribut style dapat dipakai pada hampir semua tag HTML. ... .

Atribut title. ... .

Cara Penulisan Atribut..

Bagaimana cara penulisan tag HTML yang benar?

Berikut ini beberapa saran yang perlu diikuti agar bisa menulis tag dengan benar:.

Tag-tag wajib. Ada beberapa tag yang wajib ada di HTML. ... .

2. Gunakan Huruf Kecil. Hindari menggunakan huruf besar dalam menuliskan naama tag dan sebaiknya gunakan huruf kecil saja. ... .

Pastikan Menutup Tag dengan Benar..

Apa yang dimaksud dengan atribut HTML dan contohnya?

Atribut HTML adalah informasi tambahan yang disisipkan pada tag html, kegunaanya untuk memberikan informasi tambahan pada suatu elemen, seperti: tinggi, lebar, style, href dan lain lain.

kode html Petani kode HTML Contoh HTML Struktur HTML Belajar HTML