HTML Cheatsheet – Tag & Atribut Paling Sering Digunakan

#1 <!DOCTYPE html>

Mendefinisikan dokumen sebagai HTML5

#2 <html>

Root dari dokumen HTML

#3 <head>

Bagian metadata dokumen, berisi title, meta, link, script

#4 <title>

Menentukan judul halaman yang muncul di tab browser

#5 <meta>

Menyediakan metadata seperti charset, viewport, description

#6 <link>

Menghubungkan dokumen HTML dengan file eksternal seperti CSS

#7 <style>

Menulis CSS langsung di dokumen HTML

#8 <script>

Menulis atau memanggil JavaScript

#9 <body>

Bagian utama halaman, berisi konten yang terlihat

#10 <h1> sampai <h6>

Tag heading, <h1> paling besar hingga <h6> paling kecil

#11 <p>

Membuat paragraf teks

#12 <a>

Membuat hyperlink, atribut penting: href, target, rel

#13 <img>

Menampilkan gambar, atribut penting: src, alt, width, height, loading

#14 <ul>

Membuat daftar tak berurutan

#15 <ol>

Membuat daftar berurutan

#16 <li>

Item daftar dalam <ul> atau <ol>

#17 <div>

Container blok untuk layout atau styling

#18 <span>

Container inline untuk styling teks

#19 <form>

Membuat form untuk input data, atribut: action, method, enctype

#20 <input>

Elemen input, atribut: type, name, value, placeholder, required, disabled, readonly

#21 <textarea>

Area teks untuk input panjang, atribut: name, rows, cols, maxlength

#22 <button>

Membuat tombol, atribut: type, disabled, name, value

#23 <select>

Dropdown list, atribut: name, multiple

#24 <option>

Opsi dalam <select>, atribut: value, selected, disabled

#25 <label>

Label untuk input, atribut: for

#26 <fieldset>

Mengelompokkan elemen form

#27 <legend>

Judul untuk <fieldset>

#28 <datalist>

Menentukan daftar pilihan untuk <input> dengan list

#29 <keygen>

Membuat key-pair cryptographic (deprecated)

#30 <output>

Menampilkan output form

#31 <progress>

Menampilkan progress bar, atribut: value, max

#32 <meter>

Menampilkan meter, atribut: value, min, max, low, high, optimum

#33 <br>

Membuat baris baru (line break)

#34 <hr>

Membuat garis horizontal

#35 <em>

Menekankan teks (italic semantik)

#36 <strong>

Menekankan teks (bold semantik)

#37 <small>

Menampilkan teks kecil

#38 <i>

Teks italic (presentasi)

#39 <b>

Teks bold (presentasi)

#40 <u>

Teks bergaris bawah

#41 <mark>

Menandai teks (highlight)

#42 <code>

Menandai kode program

#43 <pre>

Menampilkan teks preformat (preserve whitespace)

#44 <blockquote>

Menampilkan kutipan panjang

#45 <cite>

Menampilkan sumber kutipan

#46 <abbr>

Menyediakan singkatan, atribut: title

#47 <time>

Menampilkan tanggal/waktu, atribut: datetime

#48 <ins>

Menandai teks yang ditambahkan

#49 <del>

Menandai teks yang dihapus

#50 <sub>

Teks subscript

#51 <sup>

Teks superscript

#52 <iframe>

Menyematkan halaman lain, atribut: src, width, height, sandbox, allow

#53 <audio>

Memutar audio, atribut: src, controls, autoplay, loop, muted

#54 <video>

Memutar video, atribut: src, controls, width, height, autoplay, loop, muted, poster

#55 <source>

Sumber media dalam <audio>/<video>, atribut: src, type

#56 <canvas>

Area grafis untuk rendering 2D/3D, atribut: width, height

#57 <svg>

Membuat grafik vektor

#58 <circle>

Membuat lingkaran di SVG

#59 <rect>

Membuat persegi panjang di SVG

#60 <line>

Membuat garis di SVG

#61 <polygon>

Membuat poligon di SVG

#62 <polyline>

Membuat garis bersambung di SVG

#63 <path>

Elemen jalur di SVG

#64 <g>

Group elemen di SVG

#65 <text>

Menampilkan teks dalam SVG

#66 <defs>

Menyimpan definisi untuk digunakan di SVG

#67 <clipPath>

Menentukan area clip di SVG

#68 <mask>

Membuat masker di SVG

#69 <symbol>

Membuat simbol di SVG untuk reuse

#70 <use>

Menggunakan simbol SVG

#71 <main>

Konten utama halaman

#72 <header>

Header halaman atau section

#73 <footer>

Footer halaman atau section

#74 <nav>

Navigasi halaman

#75 <section>

Membagi halaman menjadi section

#76 <article>

Konten independen atau artikel

#77 <aside>

Sidebar atau konten tambahan

#78 <figure>

Menampung gambar dan caption

#79 <figcaption>

Caption untuk <figure>

#80 <details>

Membuat elemen yang bisa dibuka/tutup

#81 <summary>

Ringkasan untuk <details>

#82 <dialog>

Membuat dialog/popup

#83 <template>

Template HTML untuk di-clone dengan JavaScript

#84 <script type="module">

Menandai script sebagai module JS

#85 <meta name="description" content="...">

Deskripsi halaman untuk SEO

#86 <meta name="keywords" content="...">

Kata kunci halaman untuk SEO

#87 <meta name="author" content="...">

Menentukan penulis halaman

#88 <address>

Informasi kontak atau alamat

#89 <bdi>

Isolasi arah teks

#90 <bdo>

Override arah teks

#91 <wbr>

Menandai kemungkinan break kata

#92 <map>

Membuat image map

#93 <area>

Menentukan area pada image map

#94 <menu>

Menu kontekstual atau toolbar

#95 <menuitem>

Item dalam menu

#96 <slot>

Placeholder di Web Component

#97 global attributes id

ID unik elemen

#98 global attributes class

Kelas elemen untuk styling

#99 global attributes style

Inline CSS

#100 global attributes title

Tooltip teks

#101 global attributes hidden

Menandai elemen tersembunyi

#102 global attributes contenteditable

Menandai elemen bisa diedit

#103 global attributes draggable

Menandai elemen bisa drag

#104 global attributes spellcheck

Memeriksa ejaan teks

#105 global attributes tabindex

Menentukan urutan tab

#106 global event onclick

Event klik

#107 global event onmouseover

Event mouse hover

#108 global event onmouseout

Event mouse keluar

#109 global event onchange

Event perubahan input

#110 global event oninput

Event input user

#111 global event onkeydown

Event tombol keyboard ditekan

#112 global event onkeyup

Event tombol keyboard dilepas

#113 global event onload

Event halaman selesai load

HTML Cheatsheet – Tag & Atribut Paling Sering Digunakan

Useful links

Company

Newsletter