Memahami Elemen dan Atribut pada HTML5

Belajar Structur Halaman Web Pada HTML5

Terdapat 2 unsur penting dalam HTML yaitu Elemen dan Atribut. Apa itu elemen dan atribut dalam HTML? Setiap baris kode HTML yang terdapat pada halaman web pasti mengandung 2 unsur ini dan keduanya berkaitan satu sama lain. Elemen merupakan isi dari tag yang berada di antara tag pembuka dan tag penutup (<…>). Sedangkan atribut berisi informasi tambahan di dalam tag. Pada kesempatan kali ini, kita akan memahami elemen dan atribut pada HTML5.

Elemen dan Atribut pada HTML5

Gambar ilustrasi elemen dan atribut html5

Pada gambar di atas, terdapat contoh kode HTML untuk membuat paragraf. Elemen HTML adalah semua kode dari awal sampai akhir, mulai dari (tag pembuka) hingga (tag penutup). Sedangkan tag HTML adalah kode berwarna hijau yang terdiri dari tag pembuka dan tag penutup. Kemudian atribut HTML adalah nama atribut yang berwarna biru serta nilai atribut yang berwarna merah.

Lalu, apa saja jenis elemen-elemen HTML? Apa arti Nested Element? Semua pertanyaan tersebut akan dijelaskan di bawah ini.

Pengertian Elemen

Elemen HTML adalah sebuah komponen yang menyusun dokumen HTML. Kadang elemen disebut sebagai node, karena elemen merupakan salah satu jenis node yang menyusun file HTML dalam diagram HTML tree. Elemen terdiri dari tag pembuka, isi, dan tag penutup. Terkadang juga disertai beberapa atribut.

Pada contoh ilustrasi di atas, terdapat satu elemen <p> dengan atribut color=”red” dan memiliki isi berbentuk teks, yakni “Belajar HTML di IDCSharp”.

Elemen tidak selalu berisi teks, kadang elemen tersebut juga akan berisi elemen lain (nested element).

Jenis Elemen

Umumnya terdapat 2 jenis elemen HTML, yaitu jenis elemen HTML berdasarkan cara penulisan dan berdasarkan tampilan, sebagai berikut.

Jenis Elemen Berdasarkan Cara Penulisan
  1. Elemen Normal

Cara penulisan elemen normal yaitu dimulai dengan tag pembuka dan diakhiri dengan tag penutup. Contoh:

<h1>Judul Konten</h1>
  1. Elemen Tunggal

Elemen tunggal atau void element menggunakan cara penulisan yang berbeda. Jenis elemen ini tidak ada tag penutup, melainkan menggunakan slash pada akhir tag pembuka. Contoh:

<img src="badut.jpg" />
Jenis Elemen Berdasarkan Tampilan

Terdapat 2 jenis elemen berdasarkan tampilan web browser, yaitu block-level element dan inline element sebagai berikut.

  1. Block Level Element

Tampilan elemen ini selalu mulai dari baris baru. Secara default, elemen ini tidak akan berada di samping elemen sebelumnya tapi akan membuat baris baru di bawah elemen sebelumnya. Contohnya elemen <h1> dan <p>. Contoh:

Belajar HTML di IDCSharp

<h1>Elemen pertama</h1>
<p>Elemen kedua</p>
Gambar result block level element
  1. Inline Element

Inline Element disebut juga elemen sebaris. Elemen ini tidak akan membuat baris baru, tetapi akan melanjutkan disamping elemen lain yang termasuk inline elemen. Contoh:

<i>Elemen pertama</i>
<b>Elemen kedua</b>
Gambar result inline element

Dalam membuat halaman web tentu kita membutuhkan banyak elemen. Kita dapat menyatukan beberapa elemen menggunakan elemen bersarang (nested element).

Elemen Bersarang (Nested Element)

Elemen bersarang atau nested element merupakan elemen yang di dalamnya terdapat elemen lain. Penulisan elemen ini harus terstruktur dan tidak boleh tumpang tindih. Contoh penulisan yang benar:

<html>
   <body>
      <h1>
         Belajar HTML
      </h1>
   </body>
</html>

Penjelasan: Kode di atas diawali dengan tag <html>, didalamnya terdapat tag <body>. Di dalam tag body terdapat tag <h1> untuk membuat judul.

Contoh penulisan yang salah:

<html>
   <body>
      <h1>
         Belajar di IDCSharp
</html>
</body>
</h1>

Penjelasan: Kesalahan terdapat pada tata letak tag penutup html dan h1. Harusnya tag <h1> ditutup terlebih dahulu dengan </h1>, kemudian menutup body dan menutup tag html sesuai dengan contoh yang benar sebelumnya.

2
E-Learning, HTML

Related items