Belajar HTML #3: Mengenal Tag, Elemen, dan Atribut HTML

Pada bahasa HTML terdapat susunan pola terstruktur agar dapat dikenali browser, susunan tersebut adalah tag, elemen, dan atribut HTML, sehingga sebuah halaman web dapat diterjemahkan ke dalam bentuk visual berdasarkan perintah-perintah yang diberikan.

Misalnya sebuah teks, biasanya teks memiliki gaya seperti cetak tebal, miring, garis bawah dan lain-lain, gaya tersebut memiliki masing-masing perintah yang berbeda. Pada lain kasus sebuah gaya dapat diimplementasikan secara bersamaan, sehingga membentuk cetakan teks yang memiliki banyak gaya (misal: bercetak tebal juga bercetak miring) dimana sebuah perintah dijalankan dalam satu elemen.

Untuk lebih jelasnya mari kita pisahkan masing-masing fungsi tag, elemen, dan atribut HTML ke dalam pembahasan yang lebih mudah dimengerti.

Pengertian Tag HTML

Tag adalah teks khusus (perintah) antara dua karakter “<” dan “>” yang menjadi pembeda antara teks biasa agar dikenali browser untuk diterjemahkan ke dalam sebuah bentuk visual berdasarkan perintah yang diberikan.

Tag HTML biasanya ditulis secara berpasangan, yakni ditulis dengan tag pembuka dan tag penutup.

Berikut adalah format dasar penulisan tag HTML :

<tag_pembuka> konten </tag_penutup>

Sebagai contoh, perhatikan kode HTML berikut :

<p> Ini adalah sebuah paragraf </p>
  • <p> adalah tag pembuka, dalam contoh ini p adalah nama tag untuk mendefinisikan sebuah paragraf.
  • </p> adalah tag penutup. Perbedaannya dengan tag pembuka adalah tag penutup harus diberi tanda forward slash (/) sebelum nama tag.

HTML bersifat Not Case-Sensitive, yang artinya HTML tidak peka huruf besar-kecil :
Penulisan <H1> dianggap sama dengan <h1>.

Standar HTML5 tidak memerlukan tag huruf kecil, tetapi webgrafis.com merekomendasikan huruf kecil dalam HTML, dan menuntut huruf kecil untuk tipe dokumen yang lebih ketat seperti XHTML.

Pengertian Elemen HTML

Elemen HTML adalah isi dari tag yang berada diantara tag pembuka dan tag penutup, termasuk tag itu sendiri dan atribut yang dimilikinya (jika ada).

Sebagai contoh perhatikan kode HTML berikut :

<p> Ini adalah sebuah paragraf </p>

Contoh diatas mendefinisikan bahwa elemen p terdiri dari semua kode mulai dari tag pembuka <p> sampai tag penutup </p>.

Jadi, elemen HTML adalah semua yang berada mulai dari tag awal hingga tag akhir.

Tag AwalKontenTag Akhir
<h1>Judul Pertama Saya</h1>
<p>Paragraf pertama saya</p>
<br>

Elemen HTML tanpa konten disebut elemen kosong. Elemen kosong tidak memiliki tag akhir, seperti elemen <br> (break yang berfungsi memberikan jeda baris).
Untuk penjelasan Elemen kosong kita akan bahas dibawah.

a. Elemen HTML Bersarang

Elemen HTML dapat memiliki elemen lainnya, biasa dikenal dengan Elemen bersarang, yang artinya elemen dapat berisi elemen.

Semua dokumen HTML terdiri dari elemen HTML bersarang.

Contoh ini berisi empat elemen HTML :

<! DOCTYPE html>
<html>
<body>

<h1> Judul Pertama Saya </h1>
<p> Paragraf pertama saya. </p>

</body>
</html>

Penjelasan contoh diatas :

Elemen <html> mendefinisikan seluruh dokumen.
Elemen ini memiliki tag awal <html> dan tag akhir </html> .

Di dalam elemen <html> adalah elemen <body> .
Elemen <body> mendefinisikan badan dokumen.
Elemen Ini memiliki tag awal <body> dan tag akhir </body>.

Di dalam elemen <body> ada dua elemen HTML lainnya: yaitu <h1> dan <p>.

Elemen <h1> adalah untuk menentukan judul.
Elemen ini memiliki tag awal <h1> dan tag akhir </h1>.
Isi elemennya adalah : “Judul Pertama Saya”.

<h1> Judul Pertama Saya </h1>

Elemen <p> mendefinisikan paragraf.
Elemen ini memiliki tag awal <p> dan tag akhir </p>.
Isi elemennya adalah : “Paragraf pertama saya”.

<p> Paragraf pertama saya. </p>

Jangan Lupa untuk Memberi Tag Penutup..

Beberapa elemen HTML akan ditampilkan dengan benar, bahkan jika Anda lupa tag penutupnya.

Contoh :

<html>
<body>

<p> Ini adalah paragraf
<p> Ini adalah paragraf

</body>
</html>

Contoh di atas berfungsi di semua browser, karena tag penutup dianggap opsional.

Jangan pernah mengandalkan ini. Mungkin bisa mendapatkan hasil atau kesalahan yang tidak terduga jika Anda lupa memberikan tag penutup.

Hal penting lainnya..

Penulisan elemen bersarang tidak boleh ditulis secara menyilang, tag penutup untuk elemen harus berdasarkan urutan awal tag pembuka, sehingga tidak saling tumpang tindih.

Contoh penulisan elemen bersarang yang benar.

<b>
    <i>
        ini adalah konten
    </i>
</b>

Contoh penulisan susunan elemen yang salah.

<b>
    <i>
        ini adalah konten
    </b>
</i>

b. Elemen HTML Kosong

Elemen HTML tanpa konten disebut Elemen kosong.

<br> dan <hr> adalah elemen kosong tanpa tag penutup :

<p> Ini adalah paragraf <br> dengan jeda baris. </p>

Tag ini dikenal juga dengan sebutan self closing tag atau void tag.

Elemen kosong dapat “ditutup” di tag pembuka seperti ini : <br/>

<p> Ini adalah paragraf <br/> dengan jeda baris. </p>

HTML5 tidak memerlukan elemen kosong untuk ditutup. Tetapi jika Anda ingin validasi yang lebih ketat, atau jika Anda perlu membuat dokumen Anda dapat dibaca oleh parser XML, Anda harus menutup semua elemen HTML dengan benar.

Pengertian Atribut HTML

Setelah kamu memahami element dan tag, Anda perlu memahami apa itu atribut HTML.

Atribut HTML adalah informasi tambahan yang diberikan kepada tag. Informasi ini bisa berupa instruksi untuk warna dari text, besar huruf dari text, dll. Setiap atribut memiliki nama dan nilai (value) yang ditulis dengan format name=”value”.
Value diapit tanda kutip, boleh menggunakan tanda kutip satu (‘) atau dua (“).

<tag_pembuka nama-atribut="nilai-atribut"> konten </tag_penutup>

Aturan penulisan sebuah atribut :

  • Nama atribut diikuti oleh tanda sama dengan.
  • Nilai atribut diapit oleh dua/satu tanda petik pembuka dan penutup.
  • Jika lebih dari satu atribut, diberi jarak dengan spasi.

Berikut adalah contoh elemen yang disertai sebuah atribut :

<p>Berikut adalah <a href="https://webgrafis.com/" title="Blog panduan belajar HTML" target="_blank">ini adalah sebuah link</a></p>

maka hasilnya adalah

Berikut adalah ini adalah sebuah link

Penjelasan :

Dari contoh di atas untuk element <a> berguna untuk memberikan batasan pada hyperlink dengan beberapa attribute di dalamnya:

  • href – Ini adalah atribut untuk menentukan alamat sebuah website, dimana ketika tautan diklik akan diarahkan ke halaman sesuai dengan tautan yang diisi, pada contoh ini adalah halaman ”https://webgrafis.com/”.
  • title – Atribut ini berguna untuk menambahkan informasi pada tautan ketika kursor mouse diarahkan pada tautan. Pada contoh ini untuk title yang digunakan adalah ”Blog panduan belajar HTML”.
  • target – Untuk atribut ini berguna untuk memberitahu browser jika tautan diklik akan dibuka pada tab baru. Pada contoh ini adalah ”_blank”. Jika atribut ini dihilangkan, untuk tautan tidak akan dibuka di tab baru.

Tidak semua tag membutuhkan attribut, ini disesuaikan dengan kebutuhan tag itu sendiri untuk membuat sebuah perintah yang kemudian ditampilkan menjadi halaman website.

Oke, setelah kita membaca semua pembahasan diatas, kita telah mempelajari salah satu aspek terpenting di dalam HTML, yakni Pengertian Tag, Elemen, dan Atribut pada HTML.

Ketiga aspek diatas adalah menjadi bagian terpenting yang harus kita pahami untuk menguasai bahasa HTML.

Indra Fadhilah
Founder & author di webgrafis.com. Menyukai pemrograman & desain grafis. Selalu ingin belajar hal baru tentang teknologi.