Tutorial HTML: Mengenal Tags, Attribute, dan Element HTML


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, Anda telah mempelajari cara kerja dan 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 di awal penulisan kode. 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 di eksekusi 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> memiliki 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 digunakan untuk mengisi suatu nilai 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.

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 kode, lalu “https://www.facebook.com” adalah sebuah nilai informasi yang dimasukan ke dalam attribute kode, dalam hal ini adalah href=.

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

Attribute Kode

Apabila Anda cukup teliti membaca artikel ini, Anda pasti sadar bahwa attribute kode dalam tags HTML memiliki kode yang berbeda-beda.

Advertisements

Maksud dari penjelasan tersebut adalah begini; 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

Dalam tags HTML terdapat sebuah attribute global, atau sebuah attribute yang dapat digunakan oleh berbagai kode dalam tags HTML.

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.
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;".

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 lain waktu.

Pengertian dan Penggunaan Element

Dalam pandangan saya pribadi, element merupakan sebuah tags HTML yang lengkap. Maksud dari lengkap di sini adalah; pada tags HTML tersebut terdapat attribute kode, atau pembuka dan penutupnya jelas.

Untuk lebih jelasnya lihat contoh kode di bawah ini.

Jadi, apa perbedaan antara tags dan element?

Apabila dilihat dari fungsi dan kegunaannya, sebenarnya tidak ada bedanya.

Namun, apabila dalam bahasa teknis komunikasi antar pengembang website, kata element lebih sering digunakan dibanding tags.

4.5/52 ratings

What's Your Reaction?

Sebel Sebel
0
Sebel
Pusing Pusing
0
Pusing
Sedih Sedih
0
Sedih
Kocak Kocak
0
Kocak
Terkesan! Terkesan!
0
Terkesan!
Kecewa Kecewa
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.

0 Comments

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Artikel Lain Dari Pengembangan Digital

BACA JUGA

Choose A Format
Story
Formatted Text with Embeds and Visuals