HTML: Pengertian, Struktur, Elemen, dan Atributnya

HTML (Hypertext Markup Language) bukanlah suatu bahasa pemrograman, melainkan suatu bahasa markup yang memberi tahu browser tentang struktur dan cara menampilkan suatu dokumen website.

Bahasa markup adalah bahasa yang menggunakan pelabelan untuk mendefinisikan elemen-elemen dalam sebuah dokumen. Pelabelan ini ditandai dengan simbol < >. Tujuannya untuk mempermudah manusia dan mesin dalam membaca isi dokumen. Bahasa markup yang paling terkenal adalah HTML dan XML.

Umumnya suatu tag markup memiliki pasangan pembuka dan penutup, sebagai contoh tag markup HTML untuk paragraf adalah <p> maka untuk membuat suatu paragraf kita contohkan seperti ini:

1
<p>Ini sebuah paragraf dalam HTML.</p>

Struktur Elemen HTML

Mari kita periksa struktur elemen HTML paragraf pada contoh sebelumnya:

Contoh anatomi struktur elemen html
Struktur Elemen HTML: Anatomi Struktur Elemen HTML Paragraf

Anatomi elemen di atas yakni:

  • Tag Pembuka: Berisi tag nama elemen, setiap nama elemen memiliki arti dan fungsi tertentu. Contoh tag <p> memiliki arti paragraf.
  • Konten: Berisi konten di dalam elemen HTML, konten dari elemen HTML disebut juga children atau anak dari elemen HTML
  • Tag Penutup: Mirip dengan tag pembuka, namun memiliki simbol garis miring (slash) / sebagai penanda bahwa ini adalah tag penutup.

Elemen Kosong

Tidak semua elemen HTML harus memiliki tag penutup, namun bisa ditutup dengan simbol / di akhir tag pembukanya. Elemen ini tidak memiliki konten atau children sehingga dinamakan elemen kosong.

Contoh elemen kosong berikut ini adalah elemen gambar (image) dengan tag img :

1
<img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" />

Nesting Elemen HTML

Elemen HTML di dalam konten elemen HTML disebut dengan Nesting elemen. Kunci utama dari memahami nesting elemen adalah mengetahui silsilah dalam keluarga elemen HTML, seperti hubungan parent-children dan siblings antar elemen.

Setiap elemen yang memiliki konten elemen lain disebut dengan parent, sedangkan elemen yang berada di dalam konten elemen lain disebut dengan child atau children.

Hubungan Parent-children pada Elemen HTML
HTML Element: Parent-Child

Kumpulan dari child (anak) disebut dengan childNodes, child ini bersaudara satu sama lain (siblings). Disini kita juga mengenal istilah anak sulung (first child), anak bungsu (last child), kakak (previous sibling), dan adik (next sibling).

Silsilah Elemen HTML: Parent ChildNodes Siblings
Silsilah Elemen HTML: Parent - ChildNodes - Siblings

Ya, silsilah elemen HTML kurang lebih terinspirasi dengan silsilah keluarga.

Overlap terjadi ketika tag penutup dari parent berada di dalam konten child, sebagai contoh berikut ini contoh nesting elemen yang salah:

1
<p>Ini contoh <strong>elemen yang tag-nya overlap</p></strong>

Blok dan Inline Elemen

Terdapat dua kategori elemen HTML yang penting diketahui, yakni elemen blok dan elemen inline.

  • Elemen blok menggunakan keseluruhan lebar (100% lebar) dari parent-nya. Sehingga elemen ini berada di baris baru, serta elemen setelahnya berada di baris selanjutnya.
  • Elemen inline hanya menggunakan bagian secukupnya saja dari lebar parent-nya.

Agar lebih jelas mari kita lihat perbedaan dari keduanya.

1
Ini adalah contoh dari <h1>Elemen Blok</h1> tag heading.

Output:

Contoh elemen blok heading 1
Elemen Blok: Contoh Elemen Blok Heading 1

Sedangkan elemen inline hanya menggunakan sebagian lebar parent seperti berikut:

1
<p>Contoh <em>Elemen inline</em> tag emphasis di dalam paragraf</p>

Output:

Contoh elemen inline teks emphasis
Elemen Inline: Contoh elemen inline teks emphasis

Atribut

Elemen HTML bisa memiliki atribut atau properti, contohnya seperti ini:

1
<p class="contoh-attr">Sebuah paragraf dengan atribut class</p>

Atribut berisi informasi tambahan mengenai elemen HTML yang tidak ditampilkan pada konten. Pada contoh di atas, atribut class digunakan sebagai identifikasi elemen HTML.

Suatu atribut seharusnya:

  • Memiliki jarak satu spasi dengan tag elemen dan atribut lainnya
  • Nama atribut disambung dengan simbol = dan nilai atribut
  • Nilai atribut dilingkupi oleh tanda kutip " "

Di bawah ini contoh atribut pada tag <a> yang digunakan untuk membuat tautan, tag a berasal dari kata anchor. Elemen tag <a> termasuk dalam elemen inline.

1
<p><a href="https://www.kodekami.com" target="_blank">Kodekami</a></p>

Atribut boolean

Atribut boolean adalah atribut dengan nilai awal true, sehingga tidak perlu lagi menulis nilai dari atribut boolean, cukup nama atributnya saja.

contoh atribut boolean ditunjukkan pada kode berikut ini:

1
<input type="text" disabled />

Tanda Kutip Nilai Atribut

Nilai atribut seharusnya berada di dalam area tanda petik " ", namun kita diperbolehkan tidak menggunakan tanda petik pada kondisi tidak ada karakter whitespace atau spasi di dalam nilainya.

Sebagai contoh kita buat suatu elemen input dengan type dan placeholder.

1
<input type=password placeholder="Masukkan Password" />

Contoh input di atas menunjukkan:

  • Nilai dari atribut type tidak membutuhkan tanda kutip karena tidak ada spasi
  • Nilai dari placeholder membutuhkan tanda kutip karena terdapat spasi di dalamnya

Tanda kutip dua atau satu

Penggunaan jenis tanda kutip pada nilai atribut elemen HTML tidak ditetapkan. Kita bisa menggunakan tanda kutip satu ' ' maupun tanda kutip dua " ". yang terpenting adalah tanda kutip harus berpasangan serta kita konsisten pada penulisan kodenya.

Terkadang kita perlu memasukkan karakter khusus seperti tanda kutip dalam nilai atribut, maka sebaiknya gunakan tanda kutip dua sebagai wrapper (pembungkus)-nya.

Contoh penggunaan dari tanda kutip satu dalam tanda kutip dua:

1
<a href="https://www.google.com" title="isn't this Google ?">Contoh link ke Google</a>

Karakter Spesial HTML

HTML memiliki beberapa karakter spesial, karakter ini perlu di konversi ke bentuk HTML Entities jika hendak digunakan dalam kode HTML. Dikarenakan karakter spesial merupakan bagian dari syntax HTML itu sendiri.

Berikut ini karakter spesial dan HTML entities-nya:

Karakter HTML Entities
< &lt;
> &gt;
" &quot;
' &apos;
& &amp;

Sebagai contoh penggunaan HTML Entities, Perhatikan dua paragraf berikut ini:

1
2
3
<p>Dalam HTML, elemen <p> digunakan untuk membuat paragraf.</p>

<p>Dalam HTML, elemen &lt;p&gt; digunakan untuk membuat paragraf.</p>

Hasil tampilan kode di atas:

HTML Entities - Perbedaan penggunaan HTML Entities pada elemen paragraf
HTML Entities: Perbedaan penggunaan HTML Entities pada elemen paragraf

Perbedaan keduanya terlihat dari hasil perenderan. HTML entities &lt;p&gt; akan dirender berupa tulisan <p>, sedangkan jika tidak menggunakan HTML entities, maka kode <p> akan dirender menjadi paragraf baru.

Semantic Elemen HTML

Semantic dapat diartikan sebagai makna kata. Semantic elemen HTML berarti elemen HTML yang sesuai dengan makna dan tujuannya.

Manfaat penggunaan semantic elemen yaitu memudahkan developer dalam membuat dokumen HTML, browser dan crawler bot juga bisa memahami struktur HTML.

Sebagai contoh jika kita hendak membuat sebuah judul utama maka semantic elemen yang digunakan yaitu tag h1 alias heading 1, sebuah paragraf dibuat menggunakan tag p alias paragraf, sebuah navigasi dibuat menggunakan tag nav (navigation).

Struktur Dokumen HTML

Elemen HTML tidak begitu bermakna jika hanya sendirian, kita perlu mengkombinasikan berbagai elemen HTML untuk membentuk suatu dokumen HTML yang utuh.

Berikut contoh dari sebuah dokumen HTML yang valid:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Membuat Dokumen HTML</title>
  </head>
  <body>
    <p>Ini adalah sebuah paragraf</p>
  </body>
</html>

Keterangan:

  1. <!DOCTYPE html>: Tipe dari dokumen HTML, elemen ini tidak memiliki tag penutup. Elemen ini harus ada di awal dokumen HTML agar browser mendukung fitur HTML5.
  2. <html></html>: elemen html itu sendiri yang di dalamnya terdapat kode-kode HTML.
  3. <head></head>: elemen head adalah wadah untuk kode yang tidak ditampilkan ke user.
  4. <meta charset="utf-8">: Elemen ini memberi informasi tentang jenis karakter yang digunakan dalam HTML kepada browser dan crawler bot. Jenis karakter UTF-8 memiliki kompabilitas yang luas pada banyak tulisan.
  5. <title></title>: Elemen title digunakan untuk mengatur judul dari halaman yang tampil di bagian tab navigasi browser, title juga dipakai untuk memberi judul ketika laman di-bookmark.
  6. <body></body>: Elemen body merupakan wadah untuk elemen HTML yang akan ditampilkan kepada user.

Whitespace

Whitespace atau ruang kosong dalam HTML adalah kode yang terdiri dari satu atau lebih spasi, tab, dan baris baru. Saat kode HTML dirender, setiap whitespace akan dikurangi menjadi satu spasi, serta setiap whitespace yang ada di sebelum dan sesudah tag akan dihapus.

Agar mudah dimengerti, berikut ini contoh dua kode paragraf:

1
2
3
4
5
<p>Sebuah paragraf dengan whitespace yang normal</p>

<p>     Sebuah paragraf
  dengan whitespace yang tidak normal
</p>

Oleh browser, keduanya akan dirender seperti ini:

1
<p>Sebuah paragraf dengan whitespace yang normal</p><p>Sebuah paragraf dengan whitespace yang tidak normal</p>

Kode dengan whitespace yang teratur akan memberi kesan rapi dan mudah dibaca, terutama jika kita membuat kode yang memiliki banyak anak atau nested kode. Pemberian whitespace pada kode dengan format tertentu akan memudahkan kita membaca dan memodifikasinya.

Mari kita bandingkan 2 kode berikut, menurut kamu manakah yang lebih baik ?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Membuat Dokumen HTML</title>
  </head>
  <body>
    <p>Ini paragraf pertama</p>
	<p>Ini sebuah paragraf</p>
    <p>Ini paragraf terakhir</p>
  </body>
</html>
1
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Membuat Dokumen HTML</title> </head> <body> <p>Ini paragraf pertama</p><p>Ini sebuah paragraf</p><p>Ini paragraf terakhir</p></body></html>

Tentu lebih mudah membaca dan memodifikasi kode HTML yang diformat dengan baik menggunakan whitespace.

Komentar dalam HTML

Cara memberi komentar dalam kode HTML dapat dilakukan menggunakan tanda <!-- dan -->. Setiap tulisan yang dilinkupi oleh dua tanda tersebut akan dikecualikan dari perenderan HTML. Berikut ini contoh pemberian komentar dalam HTML:

1
2
3
<p>Ini sebuah paragraf</p>
<!-- Ini sebuah komentar HTML -->
<p>Ini sebuah paragraf lainnya</p>

Adanya komentar memudahkan kita dalam mengetahui maksud dari kode, kita bisa menyimpan catatan tentang maksud dari kode dan tujuan dibuat di dalam komentar. Pemberian komentar tidak hanya bermanfaat untuk diri sendiri namun juga bermanfaat untuk orang lain yang mungkin berkolaborasi dengan kita.

Rangkuman

Sampai di akhir artikel ini, seharusnya kamu telah mengetahui konsep dan dasar HTML seperti elemen HTML, anatomi elemen HTML, blok elemen dan inline elemen, properti elemen (atribut key dan value), struktur HTML sesuai semantic, menulis karakter spesial, dan membuat komentar dalam HTML.

©2021, All Rights Reserved

Privacy Policy | DMCA | Telegram