1. Struktur Halaman
| Tag | Deskripsi |
|---|---|
| <html> | Mendefinisikan root dari dokumen HTML. Semua elemen harus berada di dalam elemen ini. |
| <!DOCTYPE> | Mendefinisikan tipe dokumen (HTML5: <!DOCTYPE html>). |
| <head> | Memberikan metadata tentang dokumen (judul, charset, link CSS, dll.). |
| <title> | Membuat judul untuk dokumen HTML (ditampilkan di tab browser). |
| <body> | Mendefinisikan isi dokumen HTML. Tempat semua elemen yang tampil di browser. |
2. Semantik dan Teks
| Tag | Deskripsi |
|---|---|
| <h1> to <h6> | Membuat header atau judul, dari ukuran terbesar (<h1>) hingga terkecil (<h6>). |
| <p> | Membuat paragraf teks. |
| <blockquote> | Membuat kutipan panjang. Teks akan ditampilkan menjorok ke dalam. |
| <cite> | Membuat referensi atau kutipan (misalnya, nama buku). |
| <abbr> | Mendefinisikan singkatan dengan penjelasan (gunakan atribut title untuk uraian). |
| <mark> | Menyoroti teks penting (highlight). |
| <strong> | Membuat teks tebal (secara semantik menunjukkan penekanan penting). |
| <b> | Membuat teks tebal tanpa arti semantik. |
| <em> | Membuat teks miring untuk penekanan. |
| <i> | Membuat teks miring tanpa arti semantik. |
| <code> | Merepresentasikan kode program. |
| <pre> | Membuat teks dengan format tetap (preformatted text). |
| <del> | Memberi garis tengah pada teks (untuk teks yang dihapus). |
| <ins> | Membuat teks bergaris bawah (untuk teks yang ditambahkan). |
| <sub> | Memberikan efek subscript pada teks. |
| <sup> | Memberikan efek superscript pada teks. |
3. Daftar
| Tag | Deskripsi |
|---|---|
| <ul> | Mendefinisikan daftar tidak berurutan (bullet list). |
| <ol> | Mendefinisikan daftar berurutan (numbered list). |
| <li> | Membuat item dalam daftar. |
4. Formulir
| Tag | Deskripsi |
|---|---|
| <form> | Mendefinisikan formulir untuk mengirimkan data. |
| <input> | Mendefinisikan input untuk berbagai tipe data. |
| <textarea> | Membuat area teks multiline untuk input. |
| <select> | Membuat daftar drop-down. |
| <option> | Membuat item dalam daftar drop-down. |
| <button> | Membuat tombol untuk diklik. |
5. Tabel
| Tag | Deskripsi |
|---|---|
| <table> | Membuat tabel. |
| <tr> | Membuat baris dalam tabel. |
| <th> | Membuat sel header dalam tabel. |
| <td> | Membuat sel dalam tabel. |
| <caption> | Menambahkan keterangan pada tabel. |
6. Multimedia
| Tag | Deskripsi |
|---|---|
| <img> | Menampilkan gambar. |
| <audio> | Memutar file audio. |
| <video> | Memutar file video. |
| <embed> | Menyematkan konten media eksternal. |
7. Metadata
| Tag | Deskripsi |
|---|---|
| <meta> | Mendefinisikan metadata tentang dokumen HTML. |
| <link> | Menghubungkan dokumen dengan file eksternal (seperti CSS). |
| <style> | Menambahkan gaya CSS langsung dalam dokumen HTML. |
8. Layout & Container
| Tag | Deskripsi |
|---|---|
| <div> | Container umum untuk mengelompokkan elemen HTML. |
| <span> | Container inline untuk teks atau elemen kecil. |
| <header> | Bagian header halaman atau section. |
| <footer> | Bagian footer halaman atau section. |
| <main> | Konten utama dokumen HTML (hanya satu per halaman). |
| <section> | Mengelompokkan konten berdasarkan topik. |
| <article> | Konten independen seperti artikel, postingan, atau card. |
| <aside> | Konten sampingan seperti sidebar atau catatan. |
9. Navigasi
| Tag | Deskripsi |
|---|---|
| <nav> | Menandai area navigasi seperti menu atau breadcrumb. |
| <menu> | Daftar menu (jarang dipakai, tapi masih valid). |
10. Link & Interaksi
| Tag | Deskripsi |
|---|---|
| <a> | Membuat hyperlink ke halaman lain atau anchor. |
| <details> | Konten yang bisa dibuka dan ditutup. |
| <summary> | Judul atau ringkasan untuk elemen <details>. |
11. Media & Grafik
| Tag | Deskripsi |
|---|---|
| <figure> | Container untuk media seperti gambar atau diagram. |
| <figcaption> | Keterangan atau caption untuk <figure>. |
| <canvas> | Area gambar berbasis JavaScript. |
| <svg> | Grafik vektor berbasis XML. |
| <iframe> | Menampilkan halaman lain di dalam halaman. |
12. Form Lanjutan
| Tag | Deskripsi |
|---|---|
| <label> | Label untuk elemen input form. |
| <fieldset> | Mengelompokkan elemen form. |
| <legend> | Judul untuk elemen <fieldset>. |
| <datalist> | Daftar opsi autocomplete untuk input. |
| <output> | Menampilkan hasil perhitungan. |
13. Script & Interaksi
| Tag | Deskripsi |
|---|---|
| <script> | Menyisipkan atau memanggil JavaScript. |
| <noscript> | Konten alternatif jika JavaScript dimatikan. |
| <template> | Template HTML yang tidak langsung dirender. |
14. Utility & Tambahan
| Tag | Deskripsi |
|---|---|
| <br> | Pindah baris. |
| <hr> | Garis pemisah horizontal. |
| <small> | Teks kecil seperti catatan atau disclaimer. |
| <time> | Menandai tanggal atau waktu. |
| <address> | Informasi kontak penulis atau pemilik konten. |
