Dokumentasi HTML
Referensi HTML yang ringkas dan penuh contoh. Baca konsepnya, lihat kodenya, lalu praktikkan di perjalanan Coddy.
Mulai kursusMemulai
- Doctype`<!DOCTYPE html>` adalah baris pertama setiap dokumen HTML. Baris ini memberi tahu browser untuk menampilkan halaman dalam standards mode, bukan quirks mode. Pelajari sintaksnya, apa akibat doctype lama, dan cara memeriksa mode-nya.
- TagTag HTML menandai konten supaya browser tahu apa setiap bagiannya: heading, paragraf, link, gambar. Pelajari cara kerja tag dan elemen, tag mana yang tidak punya tag penutup, cara kerja nesting, dan tag mana yang paling sering kamu pakai.
- AtributAtribut menambahkan informasi ke elemen HTML: ke mana link mengarah, gambar apa yang ditampilkan, class CSS mana yang berlaku. Pelajari sintaksnya, atribut global yang diterima semua elemen, class dan id, atribut boolean, dan atribut data-*.
- KomentarKomentar HTML adalah teks di antara <!-- dan --> yang tidak ditampilkan browser. Pelajari sintaksnya, komentar multi baris, menonaktifkan kode dengan komentar, shortcut di editor, kenapa komentar tidak bisa bersarang, dan kenapa komentar tidak pernah bersifat pribadi.
- DivTag <div> adalah container blok umum yang tidak punya makna sendiri. Pelajari cara mengelompokkan konten dengannya, memberinya gaya dengan class, membuat layout dengan div dan flexbox, dan kapan tag semantik atau tombol adalah pilihan yang lebih baik.
- SpanTag <span> adalah container inline umum: tag ini membungkus beberapa kata di dalam satu baris supaya kamu bisa mengatur gayanya atau memakainya di script tanpa memutus baris. Pelajari cara memakainya, bedanya dengan div, dan kapan tag yang lebih spesifik lebih cocok.
Teks
- HeadingHTML punya enam level heading, <h1> sampai <h6>, yang membentuk kerangka sebuah halaman. Pelajari ukuran default-nya, cara mengurutkan heading, berapa banyak tag h1 yang dipakai, cara mengubah ukurannya dengan CSS, dan bagaimana screen reader memakainya.
- Baris BaruPakai <br> untuk memulai baris baru di dalam blok teks. Pelajari kapan <br> tepat dipakai dan kapan paragraf lebih baik, cara mempertahankan newline dari teksmu, cara membuat kata panjang bisa dipenggal dengan <wbr>, dan cara mencegah baris terpenggal.
- SpasiBrowser menggabungkan deretan spasi apa pun di HTML menjadi satu. Pelajari cara menambahkan spasi ekstra dengan , fungsi non-breaking space, cara mempertahankan spasi dan tab dengan <pre> dan white-space, dan kapan jarak dengan CSS lebih tepat.
- Huruf Tebal dan MiringBuat teks tebal di HTML dengan <strong> atau <b>, dan miring dengan <em> atau <i>. Pelajari tag mana yang dipakai kapan, cara menggabungkan tebal dan miring, dan cara membuat teks tebal atau miring dengan CSS.
- Garis BawahBeri garis bawah pada teks di HTML dengan <u> atau text-decoration di CSS, dan coret teks dengan <s> atau <del>. Pelajari arti setiap tag, bagaimana <ins> dan <del> menandai suntingan, dan kenapa garis bawah pada teks yang bukan link membingungkan pembaca.
- SuperscriptTulis teks superscript dengan <sup> dan teks subscript dengan <sub>: pangkat, bilangan urutan, penanda catatan kaki dan rumus kimia. Pelajari penggunaan umumnya, cara mencegahnya merenggangkan jarak baris, dan kapan karakter Unicode atau MathML lebih cocok.
- Garis HorizontalBuat garis horizontal di HTML dengan tag <hr>. Pelajari maknanya, cara mengubah warna, ketebalan, lebar, dan gayanya dengan CSS, cara membuat pemisah dengan teks di tengah, dan cara membuat garis vertikal.
- Teks Rata TengahBuat teks rata tengah di HTML dengan property CSS text-align: center. Pelajari di mana menaruhnya, kenapa tidak berfungsi di span, cara menengahkan teks secara vertikal di dalam kotak, cara meratakan teks ke awal, akhir, atau kedua sisi, dan cara membuat indentasi paragraf.
Tautan dan Gambar
- Link (a href)Cara elemen <a> membuat link: atribut href, URL absolut dan relatif, melompat ke bagian halaman dengan #id, link unduhan, link kartu, dan kesalahan yang membuat link rusak.
- Buka Link di Tab BaruTambahkan target="_blank" ke sebuah link untuk membukanya di tab baru. Halaman ini membahas rel="noopener" dan noreferrer, cara memberi tahu pengguna bahwa link membuka tab baru, nilai target lainnya, dan cara melakukannya dari JavaScript.
- Link Email (mailto)Buat link yang membuka email baru dengan href="mailto:", isi subject, body, cc dan bcc, encode semuanya dengan benar, lalu buat link untuk menelepon dengan tel: dan sms:.
- Button LinkCara yang benar untuk membuat tombol yang menuju halaman lain adalah link yang diberi gaya seperti tombol. Lihat kenapa tombol di dalam link dan navigasi lewat onclick bermasalah, kapan tombol form adalah pilihan yang tepat, dan cara memberi gaya serta menonaktifkan link tombol.
- GambarCara menambahkan gambar di HTML dengan tag <img>: src dan alt, mengatur ukuran gambar dengan width dan height, gambar responsif, memotong gambar dengan object-fit, keterangan dengan figure, lazy loading, dan celah di bawah gambar.
Daftar dan Tabel
- ListCara membuat list di HTML: bullet point dengan <ul>, list bernomor dengan <ol> (start, reversed, huruf dan angka Romawi), nested list, description list, serta cara mengatur atau menghapus bullet dengan CSS.
- TabelCara membuat tabel di HTML: baris dengan <tr>, sel dengan <td>, sel header dengan <th> dan scope, caption, thead, tbody dan tfoot, baris belang-belang, dan tabel yang bisa digulir di layar kecil.
- Border TabelCara menambahkan border ke tabel HTML dengan CSS: garis tunggal dengan border-collapse, border-spacing, garis baris saja, border bagian dalam saja, sudut membulat, dan kenapa atribut border sudah usang.
- Colspan dan RowspanGabungkan sel tabel ke samping melintasi kolom dengan colspan dan ke bawah melintasi baris dengan rowspan. Pelajari cara menghitung sel supaya tabel tetap rapi, membuat header berkelompok, dan menjaga tabel dengan sel gabungan tetap mudah dibaca screen reader.
Formulir
- FormCara membuat form di HTML: elemen form, atribut name, action dan method (GET vs POST), mengelompokkan dengan fieldset dan legend, validasi bawaan dengan required dan pattern, dan menangani submit di JavaScript.
- Tipe InputSemua type tag <input> HTML di satu tempat: text, email, password, number, range, date dan time, color, file, hidden dan sisanya, beserta apa yang divalidasi masing-masing, keyboard yang dibukanya di ponsel, dan atribut yang mereka pakai bersama.
- ButtonCara membuat tombol di HTML dengan elemen <button>: tiga type-nya (submit, button, reset), mengirim value bersama form, tombol disabled, ikon, dan styling CSS yang tetap mempertahankan cincin fokus.
- CheckboxCara membuat checkbox di HTML dengan <input type="checkbox">: label, atribut checked, apa yang dikirim form saat dicentang dan saat tidak, grup checkbox, pilih semua dengan status indeterminate, dan styling.
- Radio ButtonCara kerja radio button di HTML: mengelompokkan dengan atribut name, pilihan default dengan checked, grup yang wajib diisi, membaca nilai yang dipilih di JavaScript, perilaku keyboard, dan mengatur gayanya menjadi lingkaran kustom atau kartu.
- Select DropdownCara membuat dropdown di HTML dengan <select> dan <option>: value, opsi default atau placeholder, required, grup opsi, pilihan ganda, membaca dan mengatur nilainya di JavaScript, serta mengatur gaya panahnya.
- TextareaCara membuat kolom teks multibaris dengan <textarea>: rows dan cols, teks default di antara tag, mengubah ukuran dan membesar otomatis, maxlength dengan penghitung karakter, pindah baris di teks yang dikirim, dan styling.
- LabelCara elemen <label> memberi nama field form: menghubungkannya dengan for dan id atau dengan membungkus, area klik yang lebih besar untuk checkbox dan radio, petunjuk dan pesan error, label tersembunyi, dan kesalahan yang memutus hubungannya.
HTML Semantik
- HTML SemantikHTML semantik berarti memilih tag berdasarkan isi kontennya, bukan tampilannya. Pelajari tag layout semantik (header, nav, main, article, aside, footer), apa yang diberikannya kepada screen reader dan mesin pencari, dan cara memeriksa struktur halamanmu.
- HeaderElemen <header> berisi pembuka sebuah halaman atau bagian: logo, judul, navigasi, nama penulis. Pelajari cara membuat header situs, perbedaan <header> dengan <head> dan heading, cara memakainya di dalam artikel, dan cara membuatnya sticky.
- FooterElemen <footer> menutup sebuah halaman atau bagian: hak cipta, kontak, link, info penulis. Pelajari cara membuat footer situs dengan kolom link, cara menjaganya tetap di bawah pada halaman yang pendek, dan cara kerja footer di dalam artikel.
- NavElemen <nav> menandai sekumpulan link navigasi utama. Pelajari cara membuat navbar dengan <nav> dan sebuah list, cara menandai halaman yang sedang dibuka, cara memberi label pada beberapa nav di satu halaman, dan cara membuat tombol menu mobile.
- SectionElemen <section> mengelompokkan konten dengan satu tema di bawah heading-nya sendiri. Pelajari kapan memakai <section>, kapan <article> atau <div> lebih tepat, bagaimana ketiganya disarangkan, dan bagaimana section yang diberi label menjadi landmark.
Head dan Tag Meta
- Tag TitleElemen <title> menamai halaman di tab browser, di bookmark dan di hasil pencarian. Pelajari di mana letaknya, seberapa panjang sebaiknya, bedanya dengan <h1> dan atribut title, dan cara mengubahnya dengan JavaScript.
- Meta ViewportTag meta viewport memberi tahu ponsel untuk menyusun halaman selebar layar, bukan selebar desktop. Pelajari tag standarnya, fungsi setiap nilainya, kenapa CSS responsif bergantung padanya, dan nilai mana yang sebaiknya dihindari.
- RedirectArahkan satu halaman ke halaman lain dengan tag meta refresh di HTML biasa, dengan JavaScript, atau di server. Pelajari sintaks meta refresh, cara refresh halaman otomatis, kenapa redirect 301 di server adalah pilihan yang lebih baik, dan apa yang dilakukan mesin pencari dengan masing-masing cara.
- FaviconFavicon adalah ikon kecil di tab browser. Pelajari tag link yang menambahkannya, file dan ukuran yang perlu disediakan (ICO, SVG, PNG, apple-touch-icon), cara membuat favicon SVG atau emoji, cara mengubahnya dengan JavaScript, dan kenapa favicon lama terus muncul.
- Atribut langAtribut lang memberi tahu browser, screen reader, dan alat terjemahan bahasa apa yang dipakai kontenmu. Pelajari di mana menaruhnya, kode apa yang dipakai (en, en-US, pt-BR), cara menandai frasa dalam bahasa lain, dan hal-hal terlihat yang diubahnya.
Media dan Interaktif
- Tag iframeElemen <iframe> menampilkan halaman web lain di dalam halamanmu. Pelajari atribut yang kamu butuhkan (src, title, width, height), cara menyematkan video YouTube dan peta, cara membuat iframe responsif, bagaimana sandbox membatasi apa yang bisa dilakukannya, dan kenapa beberapa situs menolak dimuat di dalam iframe.
- Tag VideoElemen <video> memutar file video dengan pemutar bawaan browser. Pelajari markup-nya, atribut yang penting (controls, autoplay, muted, loop, playsinline, poster, preload), format cadangan dengan <source>, subtitle dengan <track>, ukuran responsif dan cara mengendalikan pemutaran dengan JavaScript.
- Tag AudioElemen <audio> memutar file suara dengan pemutar bawaan browser. Pelajari markup-nya, atributnya (controls, autoplay, loop, muted, preload), format yang sebaiknya dipakai, kenapa autoplay dengan suara diblokir, dan cara membuat tombol play sendiri dengan JavaScript.
- Details dan SummaryElemen <details> dan <summary> membuat bagian yang bisa dibuka tutup tanpa JavaScript: summary selalu terlihat dan mengkliknya menampilkan atau menyembunyikan sisanya. Pelajari markup-nya, atribut open dan name, accordion, memberi gaya tanda panah, dan event toggle.
