Yuniza

Tutorial HTML: Mengenal Tags, Attribute, dan Element HTML

4 min


tags-attribute-element-html

HTML memiliki tags (tanda), attribute (atribut), dan element (unsur). Untuk memudahkan pendefinisian kata dalam kode HTML, dalam tutorial ini saya akan menggunakan kata dalam bahasa inggris untuk penamaan tags, attribute, dan element dalam HTML.

Pada artikel saya sebelumnya yang berjudul Prosedur dan Sistematis HTML kamu telah mempelajari cara kerja dari HTML. atau prosedur HTML secara teknis.

Dalam artikel kali ini, saya akan membahas lebih lanjut komponen penting yang ada dalam kode HTML.

Penggunaan dan Pengertian Tags

Tags pada HTML biasanya digunakan untuk mendeklarasikan sebuah objek dalam HTML. Sebagian besar tags memiliki pembuka dan penutup. Contoh, <h1> sebagai pembuka, dan </h1> sebagai penutup.

Tulisan yang ada di antara kode <h1> dan </h1> akan dieksekusi sebagai <h1>. Yang artinya, apabila Anda menulis kode <h1>Ini adalah strong</h1>, maka secara otomatis tulisan Ini adalah strong akan tampil dalam format <h1>.

Apabila Anda menulis sebuah kata di luar tags <h1> dan </h1>, maka kata tersebut tidak akan dieksekusi sebagai <h1>.

Contoh, <h1>Ini adalah strong</h1> dan ini h1. Kata dan ini h1 tidak akan tampil sebagai <h1> karena kata tersebut berada di luar tags <h1> dan </h1>.

Tags Tanpa Penutup

Pada HTML terdapat beberapa tags yang tidak memiliki penutup. Beberapa tags tersebut adalah:

Nama TagsDefinisi Tags
<br />Berfungsi sebagai break dalam paragraf
<hr />Berfungsi untuk memberi garis pada paragraf.
<img />Berfungsi untuk menampilkan gambar.
<input />Berfungsi untuk menampilkan jenis input field dalam sebuah form.
<area>Berfungsi untuk mendefinisikan elemen yang dapat di klik dalam image-map.
<source>Berfungsi untuk membuka aliran (stream) file seperti audio dan video.
<track>Berfungsi untuk menampilkan teks dalam aliran file berjenis video.
<param>Berfungsi untuk mendefinisikan sebuah parameter pada jenis file audio atau video.

Selain dari tags pada tabel di atas. HTML juga memiliki lebih dari 110 tags yang sangat tidak mungkin untuk dihafalkan secara langsung.

Sebagai referensi, Anda bisa melihat secara lengkap tags HTML di https://www.w3schools.com/tags/default.asp.

Tags Bersarang Pada HTML

Nested tags, atau bisa juga disebut dengan tags bersarang adalah sebuah tags yang memiliki parent (induk).

Contoh dari tags bersarang dapat dilihat pada tags <ul> dan <li>.

Dari contoh kode di atas, tags <li> tersimpan dalam sebuah sarang yang disediakan oleh tags <ul>. Tags <li> tidak dapat tampil dengan baik apabila tags <ul> tidak disertakan dalam kode. Metode ini bisa juga disebut dengan compulsory nested tags.

Selain dari compulsory nested tags, ada juga metode common nested tags. Tags yang sifatnya common dapat tampil dengan baik tanpa harus memiliki sarang.

Contoh dari common nested tags dapat dilihat melalui kode di bawah ini.

Common nested tags dapat tampil dengan baik tanpa harus menyertakan parent tag.

Apabila melihat contoh dari kode di atas, tags <p> dapat tampil dengan baik tanpa harus menyertakan tags <div>.

Penggunaan dan Pengertian Attribute

Atribut (attribute) adalah sebuah kode yang berisi suatu nilai atau informasi dalam tags HTML. Attribute dalam tags HTML memiliki kode yang berbeda-beda di setiap tags HTML.

Anda kebingungan baca paragraf di atas? Sama… Untuk lebih jelasnya lihat contoh kode di bawah ini.

Dari contoh kode di atas, muncul sebuah tugas.

Coba Anda buat link menggunakan kode HTML ke website Facebook dengan teks Situs Facebook.

Bagaimana caranya? Simak jawabannya di bawah ini.

Untuk menampilkan link dengan teks Situs Facebook, maka kode yang harus ditulis adalah sebagai berikut.

Definisi dari kode di atas dapat dijelaskan seperti ini…

<a adalah sebuah tags HTML, sementara href= adalah sebuah attribute dari <a, lalu “https://www.facebook.com” adalah sebuah nilai atau informasi yang dalam attribute href=.

Sementara, tanda “> dalam kode di atas merupakan sebuah penutup yang dimasukan dalam attribute.

Setiap nilai atau informasi yang ada dalam attribute wajib diawali dengan sama dengan (=) dan memiliki tanda kutip, baik itu kutip tunggal (single quote) atau kutip rangkap (double quotes). Namun, sangat disarankan menggunakan kutip rangkap (double quotes).

Kode dari setiap attribute

Attribute dalam HTML terbagi menjadi dua jenis. Pertama, attribute global, dan yang kedua attribute local. Attribute global adalah attribute yang dapat digunakan oleh seluruh tags HTML. Sementara attribute local adalah attribute yang dapat digunakan hanya oleh sebagian dari tags HTML.

Maksud dari penjelasan di aats adalah; tags <p> tidak dapat dimasukan attribute kode href. Jadi, Anda tidak dapat menulis tags <p> dengan kode seperti di bawah ini.

Apabila kode di atas tetap dijalankan, maka peramban web tidak akan menampilkan teks Situs Facebook sebagai link, melainkan hanya teks biasa yang tidak memiliki link di dalamnya.

Attribute Global

Berikut ini adalah daftar attribute global yang dapat digunakan oleh hampir seluruh tags HTML:

Nama AttributeDefinsi Attribute
classAttribute yang digunakan untuk mendefinisikan sebuah kelas dalam tags HTML.
idAttribute yang digunakan untuk mendefinisikan sebuah ID dalam tags HTML.
styleAttribute yang digunakan untuk menerapkan sebuah gaya dalam tags HTML.
titleAttribute yang digunakan untuk memberi informasi judul pada tags HTML.
Untuk penggunaan class dan id akan dijelaskan dalam pembahasan selanjutnya.

Style adalah sebuah attribute kode yang digunakan untuk membuat sebuah gaya dalam output HTML. Contoh sederhananya adalah sebagai berikut:

Apabila Anda menjalankan kode di atas pada peramban web, maka hasilnya tulisan Situs Facebook akan berwarna biru, yang mana tulisan berwarna biru pada tulisan Situs Facebook dihasilkan oleh kode style="color:blue;".

Lalu, jika kursor mouse Anda fokus terhadap tulisan Situs Facebook, maka akan muncul informasi Link ini menuju website facebook yang mana munculnya informasi tersebut dihasilkan oleh kode title="Link ini menuju website facebook".

Attribute kode style juga dapat menerapkan banyak gaya sekaligus. Contohnya, apabila Anda ingin tulisan Situs Facebook memiliki warna latar belakang (background) kuning, maka Anda dapat menulis kode berikut:

Namun, ada catata tambahan dalam menggunakan attribute kode style.

Attribute kode style berisi nilai informasi kode CSS. Apabila merujuk pada kode di atas, kode color:blue; dan background-color:yellow; merupakan kode CSS yang dieksekusi langsung dalam attribute kode style.

Dalam penulisan kode, CSS jelas berbeda dengan HTML. Namun, karena di artikel ini yang saya bahas fokus ke topik attribute dalam HTML, maka penjelasan tentang CSS akan dibahas di artikel selanjutnya.

Pengertian dan Penggunaan Element

Element dalam HTML adalah sebuah kumpulan tags HTML yang bersarang. Contohnya adalah seperti ini.

Tags <ul> pada contoh kode di atas merupakan sebuah elemen karena di antara <ul> dan </ul> terdapat sebuah tags yang menampilkan objek dalam HTML.

Contoh tingkat lanjut dari tags <ul> adalah tags <div>. Biasanya dalam tags <div> berisi banyak tags HTML yang menginduk pada tags <div>, berikut ini contohnya.

Kode di atas adalah contoh elemen bersarang tingkat lanjut, yang mana terdapat dua elemen dengan class berbeda, yaitu element div yang memiliki class elemen_div dan element div yang memiliki class latar_artikel.

Single Elements

Single element merupakan sebuah element yang hanya memiliki satu tag pembuka dan penutup. Contoh dari single element adalah tag  <p> dengan tag  </p>, atau bisa juga tag  <h1> dengan  </h1>.

Single element tidak beranak, atau tidak memiliki anak (child).


Okay… Sekian dulu tulisan tentang tags, attributes, dan elements pada HTML. Apabila Anda memiliki pertanyaan atau saran menarik berkaitan dengan tulisan ini, jangan sungkan untuk mengirimkan komentar Anda melalui form komentar yang ada di bawah ini.

4.7/53 ratings

What's Your Reaction?

SebelSebel
1
Sebel
PusingPusing
0
Pusing
SedihSedih
0
Sedih
KocakKocak
0
Kocak
Terkesan!Terkesan!
0
Terkesan!
KecewaKecewa
0
Kecewa
Zapra Gartiast

Perkenalkan, nama saya adalah Zapra Gartiast dan saya salah satu penulis di website Yuniza. Telah berpengalaman dalam internet dan pengembangan website sejak tahun 2009. Bukan ahli teknologi, namun tertarik dengan berbagai hal menarik dalam teknologi.

Berikan Komentar

avatar
  Subscribe  
Notify of
Choose A Format
Story
Formatted Text with Embeds and Visuals