Di artikel sebelumnya, kita telah membahas tentang text editor terbaik yang ada kaitannya dengan artikel ini. Sekarang kita akan membahas tentang apa itu tag, element, dan atribut beserta contohnya pada HTML.
Tag, element, dan atribut pada HTML itu merupakan komponen dasar dari HTML dalam membuat website. Untuk itulah Anda perlu mempelajari ketiga hal ini jika Anda ingin lebih lanjut belajar HTML.
Apa itu Tag HTML?
Pengertian tag HTML adalah sebuah tanda yang ada pada HTML yang berfungsi untuk mengirimkan perintah tertentu yang akan dilakukan oleh web browser. Perintah yang dikirimkan juga berbeda-beda, tergantung isi dari tag yang diketikkan.
Tag itu diapit dengan kurung siku (<isi tag>). Tag HTML ada yang memiliki penutup, ada yang hanya berupa pembuka.
Tetapi untuk tag yang tidak memiliki penutup, sangat disarankan untuk menambahkan garis miring di akhir nama tag. Itu karena jika pada tag tunggal (tanpa penutup) tidak diberikan garis miring, maka akan tidak dianggap sebagai tag pada XHTML.
Contoh tag yang memiliki penutup :
<b>Huruf tebal</b>
<a>Link menuju halaman lain</a>
<title>Judul</title>
dll
Contoh tag yang tidak memiliki penutup :
<input/>
<img/>
<hr/>
dll
Contoh cara menggunakan tag yang salah :
<b>Ini huruf tebal<b/>
<i>Ini huruf miring<i/>Salahnya adalah pada penutupnya, harusnya seperti ini :
<b>Ini huruf tebal</b>
<i>Ini huruf miring</i>Tag ini bisa diartikan sebagai perintah dalam bahasa markup HTML. Untuk sebab itu penulisannya harus benar sesuai dengan yang sebenarnya. Tag dalam HTML bersifat in-case sensitive. Itu artinya, tag <img/> dengan tag <IMG/> akan dianggap sama.
Setelah membahas apa itu tag dalam HTML, sekarang kita akan membahas tentang pengertian element dan contohnya yang ada di HTML.
Apa itu Element?
Jika tadi kita sudah belajar tentang tag, maka sekarang kita belajar tentang element. Element adalah sebuah karakter yang berada di dalam sebuah tag (dari tag pembuka sampai tag penutup). Contohnya seperti ini :
<b>Makinrajin</b>Nah, untuk tulisan “Makinrajin” itu termasuk ke dalam element <b>. Intinya, apapun yang berada di dalam sebuah tag pembuka dan tag penutup itulah yang dinamakan dengan element.
Hubungan antara element pada HTML itu dibagi menjadi 5 jenis, apa saja jenis-jenisnya ?
1. Parent Element
Dilihat dari namanya saja sudah bisa diketahui bahwa parent element adalah sebuah element ‘orang tua’ dari element yang ada di dalam element tersebut. Parent element adalah sebuah element yang memiliki element lagi di dalamnya tepat satu tingkatan. Untuk lebih jelasnya, bisa lihat kode program di bawah ini :
<html>
<head>
<title>Judul Makinrajin</title>
</head>
<body>
<ul>
<li>Pertama</li>
<li>Kedua</li>
</ul>
</body>
</html>Dalam kasus di atas, tag <head> adalah parent element dari tag <title>. Tag <body> juga merupakan parent element dari tag <ul>. Tetapi, perlu diingat bahwa tag <body> bukan merupakan parent element dari tag <li>. Itu karena, tag <body> bukan ‘orang tua / parent’ dari tag <li>, tetapi ‘kakek’nya tag <li>.
Yang menjadi parent element dari tag <li> adalah tag <ul> sendiri. Sekarang Anda sudah mengerti konsep parent element ? Kalau iya sekarang kita lanjut ke child element.
2. Child Element
Child element adalah kebalikan dari parent element. Jika parent element adalah ‘orang tua’ langsung dari suatu element, maka child element adalah ‘anak’ langsung dari sebuah element.
<html>
<head>
<title>Judul Makinrajin</title>
</head>
<body>
<ul>
<li>Pertama</li>
<li>Kedua</li>
</ul>
</body>
</html>Jika dalam parent element, tag <head> adalah parent element dari tag <title>, maka sekarang terbalik. Tag <title> adalah child element dari tag <head>. Begitu juga dengan tag lain. Tetapi, tag <li> tetap bukan child element dari tag <body>, melainkan dari tag <ul>. Karena tag <li> bukan anaknya tag <body>.
3. Sibling Element
Kata sibling memiliki arti yaitu saudara kandung. Jadi, yang termasuk ke dalam sibling element adalah element yang memiliki saudara kandung (satu ayah dan satu ibu) atau dengan kata lain, anak kandungnya ayah dan ibu. Bisa dilihat contoh kode program di bawah ini :
<html>
<head>
<title>Judul Makinrajin</title>
</head>
<body>
<ul>
<li>Pertama</li>
<li>Kedua</li>
</ul>
<ol>
<li>Satu</li>
<li>Dua</li>
</ol>
</body>
</html>Masih ingat tadi, sibling adalah saudara kandung. Jadi, penerapan di kode program HTML adalah tag <ol> dan tag HTML <ul> adalah sibling element. Karena mereka berada langsung di dalam tag <body>. Berbeda dengan tag <ol> dengan tag <ul>, mereka bukan sibling element tetapi ‘orang tua’ dengan ‘anaknya’.
Jadi Anda sudah paham kan hubungan antara element pada HTML ? Sekarang kita lanjut ke ancestor element.
4. Ancestor Element
Sekarang saya bertanya kepada Anda, apa arti dari ancestor ? Ancestor itu artinya leluhur. Jadi kalau dalam tag HTML, ancestor itu sebuah element yang di dalam element tersebut terdapat element lain. Langsung saja lihat ke contoh kode program nya :
<html>
<head>
<title>Judul Makinrajin</title>
</head>
<body>
<ul>
<li>Pertama</li>
<li>Kedua</li>
</ul>
<ol>
<li>Satu</li>
<li>Dua</li>
</ol>
</body>
</html>Jadi, dalam contoh di atas bisa diartikan bahwa tag <html> merupakan ancestor dari tag <head>, <title>, <body>, <ol>, <ul>, <li> dan apapun yang terletak di dalam tag <html> itu sendiri. Begitu juga dengan tag <head> yang merupakan ancestor element dari tag <title>. Sudah paham kan ?
5. Descendant Element
Descendant itu artinya keturunan. Jadi, maksudnya adalah sebuah element bisa dikatakan sebagai descendant element adalah ketika element tersebut termasuk ke dalam keturunan element lain. Supaya lebih jelas, Anda bisa amati sintaks di bawah ini :
<html>
<head>
<title>Judul Makinrajin</title>
</head>
<body>
<ul>
<li>Pertama</li>
<li>Kedua</li>
</ul>
<ol>
<li><strong>Satu</strong></li>
<li>Dua</li>
</ol>
</body>
</html>Contoh kode program di atas agak saya ubah dari contoh sebelumnya supaya Anda bisa paham ketika diubah polanya. Dalam contoh sintaks di atas, tag <strong> merupakan descendant element dari tag <li>, <ul>, <body>, dan <html>. Perlu diingat, tag <strong> bukan termasuk descendant element dari tag <ul> dan <head> ya. Karena tag HTML <strong> tidak berada di dalam tag <ul> maupun <head>.
Apa itu Atribut pada HTML ?
Sebenernya pengertian atribut itu apa sih ? Sebenarnya, atribut adalah sesuatu yang ditambahkan pada tag supaya tag tersebut menjadi lebih memiliki nilai. Kunci dari atribut adalah name=”value”. Jika terdapat name=”value” pada suatu tag, maka bisa dikatakan tag tersebut memiliki atribut.
Contoh penggunaan atribut :
<hr width="100%"/>
Nah, untuk width=”100% itu adalah atribut dari tag <hr/> yang artinya akan diberi width (lebar) sebanyak 100%. Width adalah name nya dan 100% adalah valuenya. Ketika Anda sudah menggunakan css external, maka Anda akan sering menggunakan atribut id dan class. Contoh :
<button class="tombol-merah"></button>
Itu adalah contoh penggunaan class dengan memanggil class tombol-merah yang sudah Anda buat sebelumnya pada CSS. Kami telah menyediakan panduan belajar CSS untuk Anda supaya bisa mendesain website dengan baik.
Sekarang Anda sudah selesai belajar tentang apa itu tag, element, dan atribut pada HTML. Sekarang saatnya Anda melanjutkan untuk bab belajar HTML yang selanjutnya.
I’m an experienced SEO Specialist who can grow a website through organic channel. I’m also passionate about digital marketing and web development