Belajar HTML#2 – Penggunaan Tag, Elemen, dan Atribut dalam HTML

Ada tiga bagian penting yang harus anda pelajari di dalam HTML, yaitu Tag, Elemen, dan Atribut. Pada artikel ini, saya akan membahas penggunaan Tag, Elemen, dan Atribut di HTML dimulai dari pengertian, cara penulisan, contoh kode, hingga jenis jenisnya.

Pengertian Tag dalam HTML

Tag adalah sebuah penanda atau text khusus yang digunakan untuk memberitahu web browser apakah text tersebut berupa list, paragraf atau link. Setiap tag mempunyai fungsinya masing-masing. Berikut ini daftar tag-tag dasar dalam HTML beserta fungsinya.

TagFungsi
<!DOCTYPE html>untuk deklarasi type dokumen
<html>Tag utama untuk memulai dokumen HTML
<head>Membuat bagian head/kepala dari dokumen;
<body>Untuk membuat bagian body dari dokumen.
<title>untuk judul web
<h1> sampai <h6>Membuat heading pada artikel
<p>Untuk membuat paragraf
<!– –>Untuk membuat komentar

Cara Menulis Tag HTML

Berikut ini cara penulisan Tag Di dalam HTML,

  • Tag dibuat dengan berpasangan (tag awalan dan tag penutup).
  • Tag penutup ditulis dengan menambahkan garis miring (/) di depan nama tag. Namun, ada juga tag yang tidak memiliki pasangan penutup.
  • Penulisan tag berada di antara dua kurung siku: “<” “>”, yang mana di dalamnya berisi nama tag atau kadang ditambahkan dengan atribut.
  • Menggunakan Huruf Kecil, tapi Khusus untuk tag <!DOCTYPE html> ditulis dengan huruf besar. Menggunakan DOCTYPE dengan huruf kecil akan mengakibatkan error jika untuk dokumen XHTML.
Tag Elemen Atribut dalam HTML

Pengertian Elemen dalam HTML

Elemen atau kadang disebut juga sebagai node merupakan komponen penyusun dokumen HTML. Ada banyak jenis Elemen di HTML, seperti elemen khusus untuk teks, elemen untuk multimedia, script, tabel dll. Kadang beberapa elemen HTML juga ditambahkan atribut sebagai pelengkap dan dibentuk dari tag pembuka, isi tag, dan tag penutup.

Tag Elemen Atribut dalam HTML

Pada gambar di atas, bisa dikatakan bahwa elemen adalah semua kode yang dimulai dari tag pembuka hingga tag penutup. Pada kode ini ada satu elemen <p> dengan atribut align=”center” dan memiliki isi berupa teks, yakni selamat datang

Pada diagram dibawah, terdapat tiga macam node.. yakni: Node elemen, Node atribut, dan Node teks.

Tag Elemen Atribut dalam HTML

Jenis-jenis Elemen HTML

Jenis-jenis Elemen HTML terbagi menjadi 3 kategori yaitu :

  • Berdasarkan Tampilannya
  • Cara Penulisannya
  • Nested Element

Jenis Elemen Berdasarkan Tampilannya

Berdasarkan dari tampilannya, terdapat 2 jenis elemen yaitu block-level elemen dan inline.

1. Block-level Elemen

Block-level merupakan jenis elemen yang tampilannya selalu dimulai dari baris baru. Secara default, elemen ini tidak akan berada disamping elemen sebelumnya tapi akan berada di bawah elemen sebelumnya.

Contoh :

<!DOCTYPE html>

Ini adalah Block-level Elemen.
<h1>elemen satu.</h1>
<p>elemen dua.</p>

</html>

Tampilan di browser:

2. Inline Elemen

Inline elemen artinya elemen sebaris. Elemen ini tidak dimulai dengan baris baru tetapi akan melanjutkan disamping elemen lain yang juga inline elemen. Contohnya adalah elemen <b> dan <i>.

Contoh :

<!DOCTYPE html>

Ini adalah Inline Elemen.
<b>elemen satu.</b>
<a>elemen dua.</a>

</html>

Tampilan di browser:

Keterangan :

Elemen <b> adalah jenis inline elemen. Jadi akan ditampilkan disamping “teks biasa”. Begitu juga elemen <i> karena juga inline elemen maka juga ditampilkan disamping <b>.

Jenis Elemen HTML Berdasarkan Cara Penulisannya

Berdasarkan dari cara penulisannya,  elemen ini terbagi menjadi 2 jenis elemen yaitu elemen normal dan elemen tunggal atau elemen kosong.

1. Elemen Normal

Cara penulisan untuk elemen normal adalah dimulai dari tag pembuka dan diakhiri dengan tag penutup.

Contoh:

<b>Ini adalah Elemen Normal</b>

Keterangan :

elemen dimulai dari tag pembuka yaitu <b> dan diakhiri dengan tag penutup </b> dimana isi tag nya adalah “ Ini adalah Elemen Normal “.

2. Elemen Tunggal atau Elemen Kosong

Elemen kosong/tunggal atau yang biasa disebut dengan void element yaitu jenis elemen yang tidak ada tag penutup. Sebagai gantinya, ditambahkan slash pada akhir tag pembuka.

Contoh:

<img src="/wp-content/themes/itk/img/header.png" />

Keterangan :

tag img dengan atribut src untuk menentukan letak file gambarnya. lalu ditambahkan tanda slash / setelahnya.

Elemen Bersarang atau Nested Element

Selain berupa teks, terkadang Elemen juga akan berisi elemen lain atau yang disebut nested element atau elemen di dalam elemen.

<nama_tag_1>
 <nama_tag_2>isi</nama_tag_2>
</nama_tag_1>

Pengertian Atribut dalam HTML

Setelah kita mempelajari Tag dan Elemen di HTML, maka pada pembahasan yang terakhir adalah atribut. Atribut atau disebut sebagai modifier merupakan kata khusus diberikan untuk elemen dan dituliskan di dalam tag pembuka. Atribut dapat ditambahkan pada elemen apapun. Cara penulisannya adalah nama_atribut=”nilai_atribut”.

Contoh:

<a href=" https://praktekotodidak.com"> praktekotodidak.com</a>

Keterangan :

Tag <a> adalah tag untuk membuat link dan harus menambahkan atribut href untuk menyatakan halaman tujuan dari link.

Jumlah atribut yang digunakan pada elemen bisa lebih dari satu.

Contoh:

<img src="gambar.jpg" width="100" height="100" />

Keterangan :

Atribut src merupakan atribut khusus untuk tag <img> yang berfungsi untuk menentukan gambar yang akan ditampilkan.

atribut width dan height adalah atribut yang berfungsi untuk mengatur ukurannya.

Jenis-jenis Atribut HTML

Ada 3 jenis atribut pada HTML yaitu atribut global dan atribut event, dan atribut khusus. Berikut ini jenis-jenis atribut yang harus diketahui:

Atribut Global

Atribut Global adalah atribut yang dapat ditambahkan pada semua elemen HTML. Berikut ini daftar atribut global di HTML beserta fungsinya:

Nama AtributDeskripsi atau fungsi
accesskeyMenentukan tombol shortcut untuk mengaktifkan atau fokus pada elemen
classMenentukan class CSS yang akan digunakan
contenteditableMenentukan isi elemen bisa diedit atau tidak
data-*Digunakan untuk menyimpan data
dirMenentukan arah teks dari elemen (kiri ke kanan atau sebaliknya)
draggableMenentukan apakah elemen bisa di drag atau tidak
hiddenuntuk menyembunyikan elemen
idMenentukan id unik untuk elemen
langMenentukan bahasa yang digunakan untuk isi elemen
spellcheckMenentukan apakah isi elemen harus dilakukan pengejaan grammer atau tudak
styleMenentukan inline CSS untuk elemen
tabindexMenentukan urutan atau indeks tab dari elemen (saat tombol tab ditekan)
titleMenentukan informasi tambahan tentang elemen
translateMenentukan apakah konten dari elemen bisa diterjemahkan atau tidak

Atribut Event

Atribut event berfungsi untuk menentukan aksi yang dilakukan saat terjadi sesuatu pada elemen. Dalam penggunaanya banyak digunakan pada pemrograman Javascript. Berikut ini daftar atribut event saat terjadi sesuatu pada Jendela browser:

Nama atributNilaiFungsi: Menjalankan script
onafterprintkode javascriptsetelah dokumen dicetak
onbeforeprintkode javascriptsebelum dokumen dicetak
onbeforeunloadkode javascriptsebelum saat dokumen tidak ter-load
onerrorkode javascriptsaat terjadi error
onhashchangekode javascriptsaat terjadi perubahan pada bagian anchor di URL
onloadkode javascriptsetelah loading selesai
onmessagekode javascriptsaat ada pesan
onofflinekode javascriptsaat tiba-tiba offline
ononlinekode javascriptsaat tiba-tiba online
onpagehidekode javascriptsaat user tidak sedang membuka halaman web
onpageshowkode javascriptsaat user membuka kembali halaman web
onpopstatekode javascriptsaat history browser berubah
onresizekode javascriptsaat ukuran jendela browser berubah
onstoragekode javascriptsaat area penyimpanan (Web Storage) di-update
onunloadkode javascriptsaat web browser ditutup

Masih ada banyak lagi atribut event selain pada table diatas. Anda dapat mengunjungi link ini untuk mengetahui atribut event yang lainnya : HTML Event Attributes

Atribut Khusus

Atribut khusus adalah atribut yang hanya bisa digunakan pada elemen tertentu. Terkadang atribut ini juga tidak bisa digunakan pada elemen lain.

Contoh:

Nama atributBisa digunakan di tag
src<audio>, <embed>, <iframe>, <img>, dll
href<a>, <link>
action<form>
autoplay<audio>, <video>.

Cara Menulis Atribut

Penulisan atribut di dalam HTML cukup mudah, kita hanya perlu menambahkannya pada tag pembuka dengan format seperti ini:

nama-atribut="nilai"

Beberapa hal yang harus diperhatikan dalam menulis atribut adalah :

Menggunakan huruf kecil

walaupun menulis atribut dengan huruf besar tetap valid tapi lebih umum pada penulisannya menggunakan huruf kecil . Contoh :

<p align="center">Belajar HTML di Praktek Otodidak</p>

Menggunakan Tanda Petik

Tanda petik digunakan untuk mengisi nilai atribut yang mengandung teks, jika terdapat lebih dari satu kata maka ia akan menciptakan spasi dan akan dianggap sebagai atribut baru.

Untuk yang nilainya berupa angka, boleh tidak menggunakan tanda petik, sedangkan untuk atribut yang bernilai boolean (true dan false).. nilainya boleh tidak ditulis.

Contoh :

<img src="gambar.jpg" width=80 height=60 /> // nilai atribut berupa angka
<input type="text" required="true" /> // nilai atribut bernilai boolean

Penggunaan Spasi

Spasi berfungsi untuk memisahkan dua atau lebih atribut, namun jika terdapat atribut yang memiliki lebih dari satu nama, maka ia ditulis bukan dengan spasi, tapi dengan tanda min (-).

contoh :

<img class="lazyload" data-src="gambar.jpg" src="placeholder.jpg" />

Begitulah pembahasan tentang Tag, Elemen, dan Atribut di HTML. Baca juga artikel selanjutnya yaitu : Belajar HTML#3 Membuat Paragraf di HTML

Tinggalkan Balasan

Scroll to Top