Ahmad Rifai
belajar html dasar

Belajar HTML Dasar Untuk Pemula : Mengenal Tag / Kode HTML5, Elemen, & Atribut

Anda saat ini sedang berada di halaman panduan dasar belajar html untuk pemula.

HTML adalah sebuah bahasa program yang digunakan untuk membuat dan menampilkan halaman sebuah website. Kata ini singkatan dari Hyper Text Markup Language.

Bagaimana cara membuat html?

Kita tidak dapat membuat kode sendiri sebagaimana yang kita mau, karena sudah ada kumpulan kode html yang dapat digunakan yang dikenal dengan sebutan TAG.

Tag-tag itulah yang nantinya diterjemahkan oleh sebuah web browser sehingga menampilkan sebuah website / blog dengan tampilan tertentu.

Apa sih fungsi tag / kode html?

Ada banyak kegunaannya, di antaranya :

  • Membungkus bagian tertentu dari sebuah website.
  • Membuat format judul (heading).
  • Membuat Tabel.
  • Membuat Daftar (List).
  • Membuat Paragraf.
  • Membuat Form.
  • Membuat Tombol.
  • Untuk membuat tautan ke dokumen html lain / menyisipkan link (hyperlink).
  • Membuat huruf tebal, miring, dsb.
  • Menampilkan gambar, video, maupun frame.
  • Dan lain lain.

2 Alat Penting Dalam Belajar HTML

Ada 2 peralatan penting yang perlu kita miliki jika ingin belajar html, yaitu :

  1. Text editor (Notepad, Textedit, Vi, Nano, dsb) atau HTML editor.
  2. Web browser (Internet Explorer, FireFox, Google Chrome, dsb).

Pada umumnya 2 alat tersebut sudah ada pada komputer / laptop kita kecuali HTML editor. Seperti windows biasanya sudah disertai dengan Notepad dan Internet Explorer.

Kalau kurang puas dengan 2 program tersebut, silakan install program lain seperti FireFox, Google Chrome, dsb.

Sedangkan untuk text editor kita bisa menggunakan program selain notepad jika menginginkannya.

Berikut beberapa pilihan lainnya yang bisa anda jadikan pilihan.

  • Sublime Text Editor website sublimetext.com
  • Brackets website brackets.io
  • Atom website atom.io
  • Notepad ++ website notepad-plus-plus.org
  • Netbeans website netbeans.org

Mengenal Tag, Element, Atribut Dalam HTML.

Kumpulan kode html bisa dikatakan wajib diketahui oleh pemula yang ingin belajar html.

Dalam html terdapat 3 bagian, yaitu :

  1. Tag.
  2. Element.
  3. Atribut.

kode htm / tag, media, dan atribut

Sebelum kita mengenal tag , elemen dan atribut. Ada baiknya kita mengenal tag / kode yang wajib ada pada sebuah website.

Karena nanti saya tidak akan memberikan contoh penulisan keseluruhan.

Berikut kode html dasar yang wajib ada pada sebuah halaman website.

<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
Bagian yang akan ditampilkan / isi harus ditulis di sini
</body>
</html>

Nah, nanti konten atau isi yang ingin kita tampilkan di web harus ditulis di antara <body> dan </body>. Walau demikian, tidak semua tag html wajib kita tulis di dalamnya ya.

Oke mari kita lanjut.

Tag HTML

Tag / kode html adalah sebuah perintah / identitas yang berupa sebuah kode tertentu. Dan ini lah yang nantinya akan memberitahukan kepada web browser untuk apa teks html tersebut dibuat.

Seperti untuk membuat sebuah paragraf, huruf tebal atau miring, tabel, list, dan sebagainya.

Dalam penulisannya hampir semua kode html ditulis dengan pembuka (<kode>) dan penutup (</kode>), sedangkan isi harus ditulis di antara keduanya.

Perbedaan antara keduanya yaitu :

  • Kode pembuka tidak ada garis miring (/).
  • Kode penutup ada garis miring (/).

Contoh penulisan

<kode>ISI / OBJEK</kode>

Itu cuma contoh saja ya, <kode> tidak ada dalam tag html.

Kumpulan Kode HTML5

Karena html saat ini sudah sampai pada versi 5 atau lebih dikenal dengan HTML5.

Maka saya akan menuliskan kumpulan kode HTML5 terlebih dahulu.

Sedangkan yang tidak valid di versi 5 tapi tetap dapat digunakan akan saya sertakan di bawah nanti.

Tag Yang Sering Digunakan Dalam Dokumen HTML

Tag / KodeKegunaan
<h1> sampai <h6>Untuk membuat heading
<a>Untuk membuat hyperlink
<p>Untuk membuat sebuah paragraf
<br>Untuk membuat alinea baru dalam sebuah paragraf
<b>Untuk membuat tulisan tebal
<u>Untuk membuat tulisan ada garis bawah
<em>Untuk membuat teks penekanan / membuat tulisan miring
<i>Untuk mendefinisikan sebuah alternatif teks lain / membuat tulisan miring
<del>Untuk mendefinisikan sebuah teks yang telah dihapus dari dokumen
<blockquote>Untuk membuat kutipan
<strong>Mendefinisikan teks penting / membuat tulisan tebal
<span>Mendefinisikan sebuah bagian dalam sebuah dokumen
<small>Untuk membuat teks kecil
<code>Untuk menampilkan sebuah kode
<pre>Menampilkan teks terformat / kode
<img>Mendefinisikan gambar
<iframe>Mendefinisikan sebuah frame
<embed>Mendefinisikan sebuah objek eksternal (aplikasi non-HTML)
<object>Mendefinisikan sebuah objek
<ol>Untuk membuat list / daftar dengan angka
<ul>Untuk membuat list / daftar dengan simbol bulat
<li>Mendefinisikan sebuah item daftar (bagian dari <ol> atau <ul>)
<dl>Mendefinisikan deskripsi dalam bentuk daftar / list
<dt>Mendefinisikan istilah / nama dalam daftar deskripsi
<dd>Mendefinisikan deskripsi / nilai istilah dalam daftar deskripsi
<div>Mendefinisikan sebuah bagian dalam dokumen
<hr>Untuk membuat garis pembatas dalam konten
<tbody>Mendefinisikan grup dalam sebuah tabel
<thead>Grup header dalam sebuah tabel
<table>Mendefinisikan sebuah tabel
<tr>Untuk membuat kolom ke bawah pada tabel
<th>Mendefinisikan header pada tabel dalam bentuk kolom ke samping
<td>Untuk membuat kolom ke samping pada tabel
<tfoot>Grup footer sebuah tabel
<caption>Mendefinisikan sebuah caption pada tabel
<form>Mendefinisikan sebuah form HTML untuk input pengguna
<input>Mendefinisikan kontrol input
<textarea>Mendefinisikan area teks panjang pada sebuah form
<select>Mendefinisikan sebuah daftar dalam bentuk drop-down
<optgroup>Mendefinisikan kelompok pilihan yang terkait dalam drop-down
<option>Untuk membuat pilihan berupa drop-down

Tag HTML5 Yang Biasanya Sudah Ada Pada Template

Jika menggunakan blog / website instan seperti wordpress, joomla, blogger, dan platform lainnya.

Maka biasanya template yang kita gunakan sudah mengandung tag-tag berikut

Kumpulan tag html5 ini harus dipelajari juga jika kita ingin membuat web statis / html sendiri.

Tag / KodeKegunaan
<!--...-->Untuk mendefinisikan Komentar
<!DOCTYPE>Untuk mendefinisikan tipe dokumen
<html>Untuk mendefinisikan root dari sebuah dokumen HTML
<head>Untuk mendefinisikan informasi dari dokumen

Defines information about the document

<body>Untuk mendefinisikan informasi body

Defines the document’s body

<title>Untuk mendefinisikan judul dari dokumen

Defines a title for the document

<meta>Untuk mendefinisikan metadata dari dokumen HTML

Defines metadata about an HTML document

<link>Untuk mendefinisikan hubungan antara satu dokumen dan sumber luar

Defines the relationship between a document and an external resource (most used to link to style sheets)

<script>Defines a client-side script
<style>Defines style information for a document
<header>Defines a header for a document or section
<main>Untuk mengkhususkan isi utama dari suatu dokumen

Specifies the main content of a document

<section>Defines a section in a document
<article>Untuk mendefinisikan sebuah artikel

Defines an article

<aside>Defines content aside from the page content
<footer>Defines a footer for a document or section
<nav>Untuk mendefinisikan link navigasi

Defines navigation links

<menu>Untuk mendefinisikan daftar/menu perintah

Defines a list/menu of commands

<menuitem>Defines a command/menu item that the user can invoke from a popup menu
<noscript>Defines an alternate content for users that do not support client-side scripts

Tag HTML5 Lainnya

Tag / KodeKegunaan
<dfn>Untuk mendefinisikan sebuah istilah
<mark>Untuk menandai teks tertentu
<video>Mendefinisikan video atau movie
<track>Mendefinisikan trek teks untuk sebuah media (<video> dan <audio>)
<audio>Mendefinisikan konten suara
<picture>Mendefinisikan sebuah wadah untuk beberapa sumber gambar
<abbr>Untuk mendefinisikan singkatan atau akronim
<address>Untuk mendefinisikan informasi kontak dari penulis/pemilik dokumen
<area>Untuk menentukan suatu area dalam sebuah gambar
<base>Untuk mengkhususkan URL target dasar untuk semua URL terkait di sebuah dokumen
<bdi>Mengisolasi bagian teks yang mungkin di format dalam direksi yang berbeda dari teks lain
<bdo>Untuk mengubah arah / menampilkan teks dari kiri ke kanan atau sebaliknya
<button>Untuk membuat tombol
<canvas>Untuk membuat sebuah gambar dinamis, skrip render bentuk gambar 2D dan bitmap
<cite>Untuk mendefinisikan judul dari sebuah karya
<col>Menentukan sifat / mengaitkan seluruh kolom menurun untuk setiap kolom dalam <colgroup>
<colgroup>Untuk menentukan kelompok dari satu atau dua kolom di dalam tabel
<datalist>Menentukan daftar pilihan yang telah ditentukan untuk kontrol input
<details>Untuk mendefinisikan rincian tambahan yang bisa dilihat atau sembunyikan
<summary>Mendefinisikan sebuah judul dalam elemen <details>
<dialog>Untuk mendefinisikan kotak dialog atau jendela
<fieldset>untuk mempercantik tampilan formulir dengan mengelompokkan form-form kedalam sebuah kotak
<figcaption>Untuk membuat caption pada gambar yang ada dalam <figure>
<figure>Untuk membungkus beberapa gambar
<ins>Untuk mendefinisikan sebuah teks yang telah dimasukkan ke dalam dokumen
<kbd>Untuk mendefinisikan keyboard input
<keygen>Mendefinisikan keygen generator
<label>Untuk mendefinisikan sebuah label untuk elemen <input>
<legend>Untuk mendefinisikan caption untuk elemen <fieldset>
<map>Mendefinisikan sebuah client-side image-map
<meter>Mendefinisikan pengukuran skalar dalam kisaran
<output>Untuk mendefinisikan hasil keluaran
<param>Untuk mendefinisikan parameter sebuah objek
<progress>Merepresentasikan kemajuan dari sebuah tugas
<q>Untuk mendefinisikan kutipan pendek
<rp>Mendefinisikan apa yang harus ditampilkan di browser yang tidak mendukung penjelasan ruby
<rt>Mendefinisikan sebuah penjelasan / pengucapan karakter (untuk tipografi Asia Timur)
<ruby>Mendefinisikan sebuah penjelasan ruby (untuk tipografi Asia Timur)
<s>Untuk mendefinisikan teks yang tidak lagi benar
<samp>Untuk mendefinisikan contoh keluaran dari program komputer / menampilkan kode
<source>Untuk mendefinisikan beberapa sumber dari elemen media (<video> dan <audio>)
<sub>Untuk membuat tulisan kecil yang letaknya di bawah / cetak turun
<sup>Untuk membuat tulisan kecil yang letaknya di atas / cetak naik
<time>Untuk mendefinisikan data/waktu
<var>Mendefinisikan variabel
<wbr>Untuk mendefinisikan kemungkinan line-break

Kumpulan Tag Yang Sudah Tidak Valid HTML5

Tag-tag berikut tidak valid di html5, tapi tidak ada salahnya juga jika kita mengetahuinya, karena masih bisa digunakan.

Anggap saja sebagai salah satu bahan untuk belajar / referensi.

Tag / KodeKegunaan
<acronym>Mendefinisikan akronim, dalam html5 kodenya <abbr>
<applet>Mendefinisikan sebuah applet tertanam, di html5 gunakan kode <embed> atau <object>
<basefont>Menentukan warna default, ukuran, dan font untuk semua teks dalam dokumen. Bisa diganti dengan CSS
<big>Untuk membuat tulisan besar. Bisa diganti dengan CSS
<center>Membuat tulisan berada di tengah. Bisa menggunakan CSS
<dir>Mendefinisikan daftar direktori. Di html5 gunakan <ul>
<font>Mendefinisikan font, warna, dan ukuran untuk teks. Bisa menggunakan CSS
<frame>Mendefinisikan sebuah jendela (frame) dalam sebuah frameset
<frameset>Mendefinisikan satu set frame
<noframes>Mendefinisikan sebuah konten alternatif untuk pengguna yang tidak mendukung frame
<strike>Mendefinisikan teks strikethrough. Di html5 gunakan <del> atau <s>
<tt>Mendefinisikan teletype text

Element HTML

Yang dimaksud dengan elemen html adalah isi / objek yang berada di antara tag pembuka dan tag penutup html.

Atau dengan kata lain elemen html merupakan objek yang di definisikan oleh tag html yang membungkusnya.

Secara sederhana, kode html ditulis dengan konsep seperti ini.

Tag PembukaElement HTMLTag Penutup
<kode>ISI / OBJEK / Element HTML</kode>

Ingat, seperti yang sudah saya sebutkan di atas tadi ini cuma ilustrasi saja. Perbedaan antara tag pembuka dan penutup cuma pada garis miring (/).

Contoh 1

Misalnya kita ingin membuat tulisan tebal.

Itu artinya kita harus membungkus tulisan tersebut dengan tag <strong>.

Maka kita dapat menulisnya seperti ini

Tag PembukaElement HTMLTag Penutup
<strong>Tulisan Tebal</strong>

Lebih jelasnya seperti ini

Cara membuat <strong>Tulisan Tebal</strong> dalam html5.

Atau lebih lengkapnya begini

<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
<p>Cara membuat <strong>Tulisan Tebal</strong> dalam html5.</p>
</body>
</html>

Hasilnya seperti ini

Cara membuat Tulisan Tebal dalam html5.

Contoh 2

Belajar membuat <i>tulisan miring</i>, <u>garis bawah</u>, <del>teks yang telah di hapus</del> menggunakan <dfn title="HyperText Markup Language">HTML</dfn>

Hasilnya

Belajar membuat tulisan miring, garis bawah, teks yang telah di hapus menggunakan HTML

Contoh 3

Menyisipkan link dalam sebuah tulisan menggunakan tag <a>.

Pelajari langkah demi langkah <a href="https://ahmadrifai.id/cara-membuat-blog/" title="Panduan lengkap cara membuat blog untuk pemula">cara membuat blog</a> dengan mudah dan cepat.

Pelajari langkah demi langkah cara membuat blog dengan mudah dan cepat.

Atribut HTML

Atribut adalah sebuah informasi tambahan yang digunakan / ditulis pada tag pembuka, namun tidak semua tag wajib memilikinya.

Biasanya dia digunakan untuk membuat efek tertentu, seperti :

  • Untuk mengaitkan dokumen html dengan css.
  • Menentukan lebar sebuah area.
  • Memberi warna pada sebuah area atau teks.
  • Dan sebagainya

Atribut sendiri dapat dibagi menjadi 2 golongan, yaitu :

  1. Global : dapat digunakan pada semua tag.
  2. Khusus : hanya dapat digunakan pada tag tertentu.

Atribut memiliki 2 bagian yaitu : nama dan nilai, dapat ditulis dengan ( name=”value” ).

Penulisan nilai/value harus diapit oleh dua tanda kutip, bisa menggunakan kutip satu (‘) atau kutip dua (“).

Contoh tag yang tidak memerlukan atribut

<h1>Heading 1</h1>

  • <h1> adalah tag pembuka
  • Heading 1 adalah elemen
  • </h1> adalah tag penutup

Contoh Lain

<p>Panduan <strong>belajar html dasar</strong> untuk pemula</p>

  • <p> adalah tag pembuka
  • </p> adalah tag penutup
  • Panduan <strong>belajar html dasar</strong> untuk pemula adalah elemen dari <p>
  • <strong> adalah tag pembuka
  • belajar html dasar adalah elemen dari <strong>
  • </strong> adalah tag penutup

Pada contoh di atas semuanya tidak memiliki atribut, karena memang tidak wajib.

Walaupun demikian kita boleh menambahkan atribut.

Misalnya :

<strong style="color:#F00">belajar html dasar</strong>

  • style adalah nama atribut
  • color:#0283D9 nilai atribut

Yang artinya tulisan yang berada di dalam tag <strong> akan berwarna #0283D9.

Contoh tag yang wajib memiliki atribut

Salah satu tag yang wajib menggunakan atribut adalah <img>, karena atribut itulah yang nantinya akan menampilkan gambar.

<img src="https://www.google.com/logos/doodles/2015/googles-new-logo-5078286822539264.3-hp2x.gif">

  • <img> adalah tag untuk gambar.
  • src adalah nama atribut wajib
  • https://www.google.com/logos/doodles/2015/googles-new-logo-5078286822539264.3-hp2x.gif nilai atribut yang sekaligus menjadi elemen / objek.

Contoh Lain

<img alt="Ahmad Rifai Blog" src="https://www.google.com/logos/doodles/2015/googles-new-logo-5078286822539264.3-hp2x.gif" width="881" height="400">

  • <img> adalah tag untuk gambar.
  • src adalah nama atribut wajib
  • https://www.google.com/logos/doodles/2015/googles-new-logo-5078286822539264.3-hp2x.gif nilai atribut wajib
  • alt nama atribut tambahan 1
  • Google nilai atribut tambahan 1
  • width nama atribut tambahan 2
  • 881 nilai atribut tambahan 2
  • height nama atribut tambahan 3
  • 400 nilai atribut tambahan 3

Atribut Global

AtributKeterangan
idMenentukan id unik untuk sebuah elemen
classMenentukan satu atau lebih nama class untuk sebuah elemen (mengacu pada .class dalam style sheet)
accesskeyMenentukan tombol pintas fokus elemen yang memungkinkan pengguna untuk mengklik tombol tertentu menggunakan shortcut keyboard.
contenteditableMenentukan apakah isi dari sebuah elemen dapat diedit atau tidak
contextmenuMenentukan menu konteks untuk sebuah elemen. Menu konteks muncul ketika pengguna melakukan klik kanan pada elemen
data-*Digunakan untuk menyimpan tambahan tertentu. Jika teks yang mengandung tambahan tersebut diklik baru dia akan keluar.
dirUntuk menentukan arah teks dari kanan ke kiri atau sebaliknya.
draggableMenentukan apakah elemen tersebut dapat ditarik atau tidak
hiddenMenentukan bahwa unsur belum atau tidak lagi relevan / menyembunyikan teks.
langMenentukan bahasa konten dalam sebuah elemen
spellcheckMenentukan apakah elemen memiliki ejaan dan tata bahasa yang diperiksa atau tidak
styleMenentukan gaya CSS inline untuk suatu elemen
tabindexMenentukan urutan tabbing dari elemen. Berhubungan dengan tombol TAB pada keyboard.
titleMenentukan informasi tambahan pada sebuah elemen.
translateMenentukan apakah isi dari elemen dapat diterjemahkan atau tidak.

Atribut Khusus

AtributDigunakan UntukKeterangan
alignTidak support di HTML5.Untuk menentukan posisi sebuah elemen. Sebaiknya gunakan CSS.
bgcolorTidak support di HTML5.Untuk menentukan warna latar sebuah elemen. Sebaiknya gunakan CSS.
borderTidak support di HTML5.Untuk menentukan lebar garis tepi sebuah elemen. Sebaiknya gunakan CSS.
colorTidak support di HTML5.Untuk menentukan warna teks. Sebaiknya gunakan CSS.
accept<input>Menentukan jenis file yang dapat diterima oleh server (hanya untuk type = “file”)
accept-charset<form>Menentukan pengkodean karakter yang akan digunakan untuk pengiriman formulir
action<form>Menentukan lokasi scipt yang akan memproses data dari sebuah formulir
alt<area>, <img>, <input>Menentukan teks alternatif ketika unsur asli gagal ditampilkan
async<script>Menentukan bahwa script dijalankan secara asynchronously (hanya untuk script eksternal).
autocomplete<form>, <input>Menentukan bahwa elemen <form> atau <input> tidak menggunakan autocomplete diaktifkan
autofocus<button>, <input>, <keygen>, <select>, <textarea>Menentukan bahwa elemen secara otomatis mendapatkan fokus ketika halaman selesai dimuat
autoplay<audio>, <video>Menentukan bahwa audio / video akan dimainkan secara otomatis setelah siap
charset<meta>, <script>Menentukan pengkodean karakter
checked<input>Menentukan bahwa elemen <input> sudah memiliki pilihan default (untuk type = “checkbox” atau type = “radio”)
cite<blockquote>, <del>, <ins>, <q>Menentukan URL yang menjelaskan kutipan / teks disisipkan / dihapus
cols<textarea>Menentukan lebar terlihat dari area teks
colspan<td>, <th>Menentukan jumlah kolom tabel yang akan dijangkau
content<meta>Memberikan nilai yang terkait dengan http-equiv atau meta tag
controls<audio>, <video>Menentukan kontrol audio / video yang akan ditampilkan (seperti tombol play / pause dll)
coords<area>Menentukan koordinat area
data<object>Menentukan URL dari sumber daya yang akan digunakan oleh obyek
datetime<del>, <ins>, <time>Menentukan tanggal dan waktu
default<track>Menentukan track default ketika pengguna belum memilih track lainnya
defer<script>Menentukan bahwa script dijalankan saat halaman telah selesai diparsing (hanya untuk script eksternal)
dirname<input>, <textarea>Menentukan kemana teks akan diserahkan
disabled<button>, <fieldset>, <input>, <keygen>, <optgroup>, <option>, <select>, <textarea>Menonaktifkan suatu elemen atau sekelompok elemen
download<a>, <area>Menentukan target itu akan didownload ketika pengguna mengklik hyperlink
enctype<form>Menentukan bagaimana bentuk-data harus dikodekan ketika ia dikirim ke server (hanya untuk metode = “post”)
for<label>, <output>Menentukan bentuk elemen (s) label / perhitungan terikat
form<button>, <fieldset>, <input>, <keygen>, <label>, <meter>, <object>, <output>, <select>, <textarea>Menetukan nama / identitas form tertentu
formaction<button>, <input>Menentukan kemana data dikirim ketika formulir dikirimkan. Hanya untuk type = “submit”
headers<td>, <th>Menentukan satu atau lebih header cell yang berhubungan
height<canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>Menentukan tinggi sebuah elemen
high<meter>Menentukan rentang yang dianggap nilai yang tinggi
href<a>, <area>, <base>, <link>Menentukan url halaman yang akan dituju
hreflang<a>, <area>, <link>Menentukan bahasa dokumen terkait
http-equiv<meta>Menyediakan HTTP header untuk informasi / nilai atribut konten
ismap<img>Menentukan gambar sebagai server-side image-map
keytype<keygen>Menentukan algoritma keamanan
kind<track>Menentukan jenis teks track
label<track>, <option>, <optgroup>Menentukan teks judul track
list<input>Mengacu pada elemen <datalist> yang berisi pilihan yang telah ditentukan untuk <input>
loop<audio>, <video>Menentukan bahwa audio / video akan mulai dari awal lagi, setiap kali selesai
low<meter>Menentukan rentang yang dianggap nilai yang rendah
manifest<html>Menentukan alamat manifest cache dokumen (untuk browsing offline)
max<input>, <meter>, <progress>Menentukan nilai maksimum
maxlength<input>, <textarea>Menentukan jumlah karakter maksimum yang diizinkan di sebuah elemen
media<a>, <area>, <link>, <source>, <style>Menentukan dokumen terkait dioptimalkan untuk media / perangkat
method<form>Menentukan metode HTTP yang digunakan saat mengirim form-data
min<input>, <meter>Menentukan nilai minimum
multiple<input>, <select>Menentukan bahwa pengguna dapat memasukkan lebih dari satu nilai
muted<video>, <audio>Menentukan bahwa output audio video harus diredam / muted
name<button>, <fieldset>, <form>, <iframe>, <input>, <keygen>, <map>, <meta>, <object>, <output>, <param>, <select>, <textarea>Menentukan nama elemen
novalidate<form>Menentukan bahwa form tidak harus divalidasi ketika disubmit / kirim
onabort<audio>, <embed>, <img>, <object>, <video>Membuat pemberitahuan bahwa media gagal dimuat
onafterprint<body>Script akan dijalankan setelah dokumen dicetak
onbeforeprint<body>Script dijalankan sebelum dokumen dicetak
onbeforeunload<body>Membuat pemberitahuan ketika halaman / dokumen akan ditinggalkan
oncanplay<audio>, <embed>, <object>, <video>Script akan dijalankan ketika file siap untuk dimainkan (ketika telah buffered cukup untuk memulai)
oncanplaythrough<audio>, <video>Script akan dijalankan ketika file dapat dimainkan sepanjang jalan sampai akhir tanpa berhenti untuk buffering
oncuechange<track>Script akan dijalankan ketika perubahan dalam elemen <track>
ondurationchange<audio>, <video>Script akan dijalankan ketika panjang media berubah
onemptied<audio>, <video>Script akan dijalankan ketika sesuatu yang buruk terjadi dan file yang tiba-tiba tidak tersedia (seperti koneksi terputus tiba-tiba)
onended<audio>, <video>Script akan dijalankan ketika media yang diputar sudah mencapai akhir (berguna untuk pesan seperti “terima telah menonton”)
onerror<audio>, <body>, <embed>, <img>, <object>, <script>, <style>, <video>Script akan dijalankan bila terjadi kesalahan / error
onhashchange<body>Script akan dijalankan ketika ada perubahan jangkar / anchor bagian dari URL
onload<body>, <iframe>, <img>, <input>, <link>, <script>, <style>Script akan dijalankan ketika unsur ini selesai loading
onloadeddata<audio>, <video>Script akan dijalankan ketika data media dimuat
onloadedmetadata<audio>, <video>Script akan dijalankan ketika meta data(seperti dimensi dan durasi) dimuat.
onloadstart<audio>, <video>Script dijalankan ketika file mulai memuat, sebelum hal sebenarnya dimuat
onoffline<body>Script akan dijalankan ketika browser mulai bekerja secara offline
ononline<body>Script akan dijalankan ketika browser mulai bekerja secara online
onpagehide<body>Script akan dijalankan ketika pengguna menavigasi jauh dari halaman
onpageshow<body>Script akan dijalankan ketika pengguna menavigasi ke halaman
onpause<audio>, <video>Script akan dijalankan ketika media dihentikan sementara oleh pengguna atau pemrograman
onplay<audio>, <video>Script akan dijalankan ketika media siap untuk dimainkan
onplaying<audio>, <video>Script akan dijalankan ketika media sebenarnya telah mulai bermain.
onpopstate<body>Script akan dijalankan ketika ada perubahan pada history windows.
onprogress<audio>, <video>Script akan dijalankan ketika browser sedang dalam proses untuk mendapatkan data media
onratechange<audio>, <video>Script untuk dijalankan setiap kali tingkat pemutaran berubah (seperti ketika pengguna beralih ke gerakan lambat atau modus maju cepat).
onreset<form>Script akan dijalankan ketika tombol reset pada form diklik.
onresize<body>Script akan dijalankan ketika jendela browser dirubah ukurannya / resized.
onsearch<input>Script akan dijalankan ketika pengguna menulis sesuatu di kolom pencarian (untuk <input = "search">)
onseeked<audio>, <video>Script akan dijalankan ketika pencarian diatur ke false menunjukkan pencarian yang telah dihentikan
onseeking<audio>, <video>Script akan dijalankan ketika pencarian diatur menjadi true yang menunjukkan pencarian aktif
onshow<menu>Script akan dijalankan ketika elemen <menu> ditampilkan sebagai menu konteks
onstalled<audio>, <video>Script akan dijalankan bila browser tidak dapat mengambil data media karena suatu alasan
onstorage<body>Script akan dijalankan ketika area penyimpanan Web diperbarui
onsubmit<form>Script akan dijalankan ketika formulir dikirimkan
onsuspend<audio>, <video>Script akan dijalankan saat pengambilan data media dihentikan sebelum benar-benar dimuat untuk suatu alasan
ontimeupdate<audio>, <video>Script akan dijalankan ketika posisi main telah berubah (seperti ketika video dipercepat / pindah ke titik yang berbeda di media)
ontoggle<details>Script akan dijalankan ketika pengguna membuka atau menutup elemen <details>
onunload<body>Script akan dijalankan saat halaman / jendela browser telah ditutup
onvolumechange<audio>, <video>Script akan dijalankan setiap kali volume berubah
onwaiting<audio>, <video>Script akan dijalankan ketika media sedang buffer / memuat data selanjutnya
open<details>Menentukan bahwa rincian harus terlihat (terbuka) ke pengguna
optimum<meter>Menentukan nilai optimal
pattern<input>Menentukan ekspresi nilai reguler sebuah elemen <input>
placeholder<input>, <textarea>Menentukan petunjuk singkat yang menggambarkan nilai yang diharapkan dari elemen
poster<video>Menentukan gambar yang akan ditampilkan saat video sedang dimuat, atau sampai pengguna menekan tombol putar
preload<audio>, <video>Menentukan apa dan bagaimana author berpikir audio / video seharusnya dimuat ketika halaman dimuat
readonly<input>, <textarea>Menentukan bahwa unsur ini read-only (tidak dapat di edit)
rel<a>, <area>, <link>Menentukan hubungan antara dokumen saat ini dengan dokumen terkait
required<input>, <select>, <textarea>Menentukan bahwa elemen wajib diisi sebelum formulir dikirm
reversed<ol>Menentukan bahwa urutan daftar harus turun (9,8,7 …)
rows<textarea>Menentukan jumlah baris yang terlihat dalam area teks
rowspan<td>, <th>Menentukan jumlah baris cell tabel yang akan dijangkau
sandbox<iframe>Memungkinkan set ekstra pembatasan untuk konten dalam <iframe>
scope<th>Menentukan apakah sebuah cell header header untuk kolom atau beberapa kolom, baris atau beberapa baris
scoped<style>Menentukan bahwa gaya hanya berlaku untuk elemen induk ini dan elemen – elemen anak (child elements)
selected<option>Menentukan pilihan default setelah halaman dimuat
shape<area>Menentukan bentuk area
size<input>, <select>Menentukan lebar, dalam karakter (untuk <input>) atau menentukan jumlah pilihan yang terlihat (untuk <select>)
sizes<img>, <link>, <source>Menentukan ukuran sumber daya terkait
span<col>, <colgroup>Menentukan jumlah kolom yang dijangkau
src<audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video>Menentukan url media yang akan ditampilkan
srcdoc<iframe>Menentukan konten HTML halaman yang akan ditunjukkan di <iframe>
srclang<track>Menentukan bahasa teks di track (diperlukan jika jenis = “subtitles”)
srcset<img>, <source>Menentukan URL gambar untuk digunakan dalam situasi yang berbeda
start<ol>Menentukan nilai awal dari daftar / list
step<input>Menentukan interval nomor legal untuk sebuah field input
target<a>, <area>, <base>, <form>Menentukan target untuk tempat untuk membuka dokumen terkait atau di mana untuk mengirimkan formulir
type<button>, <embed>, <input>, <link>, <menu>, <object>, <script>, <source>, <style>Menentukan jenis elemen
usemap<img>, <object>Menentukan gambar sebagai client-side image-map
value<button>, <input>, <li>, <option>, <meter>, <progress>, <param>Menentukan nilai dari elemen
width<canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>Menentukan lebar elemen
wrap<textarea>Menentukan bagaimana teks dalam area teks harus dibungkus ketika formulir dikirim
onblurSemua elemen yang terlihat.Script akan dijalankan ketika elemen kehilangan fokus
onchangeSemua elemen yang terlihat.Script akan dijalankan ketika nilai dari elemen berubah
onclickSemua elemen yang terlihat.Script akan dijalankan ketika elemen sedang diklik
oncontextmenuSemua elemen yang terlihat.Script akan dijalankan ketika konteks menu dipicu
oncopySemua elemen yang terlihat.Script akan dijalankan bila konten dari elemen sedang disalin
oncutSemua elemen yang terlihat.Script akan dijalankan bila konten dari elemen sedang dipotong
ondblclickSemua elemen yang terlihat.Script akan dijalankan ketika elemen sedang diklik 2x
ondragSemua elemen yang terlihat.Script akan dijalankan pada akhir operasi drag (selesai ditarik)
ondragendSemua elemen yang terlihat.Script akan dijalankan pada akhir operasi drag (selesai ditarik)
ondragenterSemua elemen yang terlihat.Script akan dijalankan ketika elemen ditarik ke target yang benar / valid
ondragleaveSemua elemen yang terlihat.Script akan dijalankan ketika elemen meniggalkan target yang valid
ondragoverSemua elemen yang terlihat.Script akan dijalankan ketika elemen diseret melebihi target yang valid
ondragstartSemua elemen yang terlihat.Script akan dijalankan pada awal operasi drag / penarikan
ondropSemua elemen yang terlihat.Script akan dijalankan ketika elemen dragged sedang dropped.
onfocusSemua elemen yang terlihat.Script akan dijalankan ketika elemen mendapat fokus
oninputSemua elemen yang terlihat.Script akan dijalankan ketika elemen mendapat input pengguna
oninvalidSemua elemen yang terlihat.Script akan dijalankan ketika elemen tidak valid
onkeydownSemua elemen yang terlihat.Script akan dijalankan ketika pengguna menekan tombol
onkeypressSemua elemen yang terlihat.Script akan dijalankan ketika pengguna menekan tombol
onkeyupSemua elemen yang terlihat.Script akan dijalankan ketika pengguna menekan tombol
onmousedownSemua elemen yang terlihat.Script akan dijalankan ketika tombol mouse ditekan ke bawah pada elemen
onmousemoveSemua elemen yang terlihat.Script untuk dijalankan selama pointer mouse bergerak pada sebuah elemen
onmouseoutSemua elemen yang terlihat.Script akan dijalankan ketika pointer mouse bergerak keluar dari elemen
onmouseoverSemua elemen yang terlihat.Script akan dijalankan ketika mouse pointer bergerak di atas sebuah elemen
onmouseupSemua elemen yang terlihat.Script akan dijalankan ketika tombol mouse dilepaskan di atas elemen
onmousewheelSemua elemen yang terlihat.Script akan dijalankan ketika roda wheel sedang digulir melalui elemen
onpasteSemua elemen yang terlihat.Script akan dijalankan ketika pengguna menempelkan (paste) beberapa konten dalam elemen
onscrollSemua elemen yang terlihat.Script akan dijalankan ketika elemen scrollbar sedang digulir
onselectSemua elemen yang terlihat.Script akan dijalankan ketika elemen dipilih
onwheelSemua elemen yang terlihat.Script akan dijalankan ketika roda mouse digulung ke atas atau ke bawah elemen

Langganan Artikel Terbaru

Dapatkan update terbaru blog ini lewat email anda

@