Kumpulan Kode Tag HTML Lengkap Dengan Fungsinya
Selasa, 01 November 2016
16 Komentar
Kumpulan Kode Tag HTML Lengkap Dengan Fungsinya - Setelah sebelumnya kita mengetahui apa yang dimaksud dengan HTML, kini kita saatnya mengenal beberapa kode tag yang ada pada HTML. Sesuai dengan perkembangannya versi html yang terbaru adalah HTML5, disini juga saya sudah memberikan tanda checklist pada versi HTML5 yang paling baru.
Baca Juga : Apa Itu HTML ? Inilah Pengertian dan Fungsinya
Jika Anda belum membaca atau mengerti mengenai pengertian html silahkan untuk membacanya terlebih dahulu, setelah itu baru kita mengenal jenis-jenis kode yang ada pada html. Sebuah halaman web page di susun dengan html sehingga terlihat lebih rapih, apalagi jika di tambahkan dengan kode CSS maka tampilan web akan lebih menarik lagi.
Dalam pembuatan halaman website tentu kode HTML sangat berpengaruh besar, walaupun Anda menggunakan CMS Wordpress yang sebagian besar di dominasi dengan script PHP tetap saja web browser akan menerjemahkannya atau membacanya kedalam bentuk kode HTML. Jadi peran kode html di dalam sebuah website sangatlah penting.
Baca Juga : Contoh Sederhana Penerapan Kode HTML
Nah, untuk Anda yang ingin bisa membuat sebuah halaman website yang sederhana Anda dapat belajar mengenal kode HTML disini, saya akan update artikel ini dan menjelaskan setiap kode tag pada html. Untuk sementara Anda dapat melihat dan mempelajari fungsi dasar dari masing-masing kode html sesuai dengan abjad dibawah ini :
Catatan :
Tanda ✓ (checklist) menandakan bahwa itu adalah kode HTML5 terbaru
Semoga kumpulan kode tag html lengkap dengan fungsinya bisa Anda pelajari secara bertahap sehingga Anda akan mudah dalam memahami kode html. Sehingga kita bisa dengan mudah memahami arti dari setiap kode html yang ada pada template blogger yang sedang kita gunakan. Dan berharap dengan mempelajari kode html ini kita dapat membuat halaman web yang sederhana dan dapat berkembang secara terus-menerus.
Baca Juga : Apa Itu HTML ? Inilah Pengertian dan Fungsinya
Jika Anda belum membaca atau mengerti mengenai pengertian html silahkan untuk membacanya terlebih dahulu, setelah itu baru kita mengenal jenis-jenis kode yang ada pada html. Sebuah halaman web page di susun dengan html sehingga terlihat lebih rapih, apalagi jika di tambahkan dengan kode CSS maka tampilan web akan lebih menarik lagi.
Dalam pembuatan halaman website tentu kode HTML sangat berpengaruh besar, walaupun Anda menggunakan CMS Wordpress yang sebagian besar di dominasi dengan script PHP tetap saja web browser akan menerjemahkannya atau membacanya kedalam bentuk kode HTML. Jadi peran kode html di dalam sebuah website sangatlah penting.
Baca Juga : Contoh Sederhana Penerapan Kode HTML
Nah, untuk Anda yang ingin bisa membuat sebuah halaman website yang sederhana Anda dapat belajar mengenal kode HTML disini, saya akan update artikel ini dan menjelaskan setiap kode tag pada html. Untuk sementara Anda dapat melihat dan mempelajari fungsi dasar dari masing-masing kode html sesuai dengan abjad dibawah ini :
| Kumpulan Kode Tag HTML dan Fungsinya | |||
|---|---|---|---|
| Tag | HTML5 | Deskripsi | |
| <! --...--> | Mendefinisikan komentar | ||
| <!DOCTYPE> | Mendefinisikan jenis dokumen | ||
| <a> | Mendefinisikan hyperlink | ||
| <abbr> | Mendefinisikan sebuah singkatan atau akronim | ||
| <acronym> | Tidak didukung di HTML5. Gunakan <abbr> sebagai gantinya. Mendefinisikan akronim | ||
| <address> | Mendefinisikan informasi kontak untuk penulis/pemilik dokumen | ||
| <applet> | Tidak didukung di HTML5. Gunakan <embed> atau <object> gantinya. Mendefinisikan sebuah applet tertanam | ||
| <area> | Mendefinisikan sebuah area inside sebuah image-map | ||
| <article> | ✓ | Mendefinisikan sebuah artikel | |
| <aside> | ✓ | Mendefinisikan konten selain dari konten halaman | |
| <audio> | ✓ | Mendefinisikan konten suara | |
| <b> | Mendefinisikan teks tebal | ||
| <base> | Menentukan basis URL/target untuk semua URL relatif dalam dokumen | ||
| <basefont> | Tidak didukung di HTML5. Gunakan CSS sebagai gantinya. Menentukan warna default, ukuran, dan font untuk semua teks dalam dokumen | ||
| <bdi> | ✓ | Isolat/memisahkan bagian dari teks yang mungkin diformat dalam arah yang berbeda dari teks lain di luar itu | |
| <bdo> | Mengganti arah teks saat ini | ||
| <big> | Tidak didukung di HTML5. Gunakan CSS sebagai gantinya. Mendefinisikan teks besar | ||
| <blockquote> | Mendefinisikan bagian yang dikutip dari sumber lain | ||
| <body> | Mendefinisikan tubuh dokumen | ||
| <br> | Mendefinisikan satu baris tunggal | ||
| <button> | Mendefinisikan sebuah tombol diklik | ||
| <canvas> | ✓ | Digunakan untuk menggambar grafik, dengan cepat, melalui scripting (biasanya JavaScript) | |
| <caption> | Mendefinisikan sebuah caption tabel | ||
| <center> | Tidak didukung di HTML5. Gunakan CSS sebagai gantinya. Mendefinisikan teks berada ditengah | ||
| <cite> | Mendefinisikan judul karya | ||
| <code> | Mendefinisikan sebuah bagian dari kode komputer | ||
| <col> | Menentukan sifat kolom untuk setiap kolom dalam <colgroup> elemen | ||
| <colgroup> | Menentukan kelompok dari satu atau lebih kolom dalam sebuah tabel untuk memformat | ||
| <datalist> | ✓ | Menentukan daftar pilihan yang telah ditentukan untuk kontrol input | |
| <dd> | Mendefinisikan deskripsi/nilai istilah dalam daftar deskripsi | ||
| <del> | Mendefinisikan teks yang telah dihapus dari dokumen | ||
| <details> | ✓ | Mendefinisikan rincian tambahan bahwa pengguna dapat melihat atau menyembunyikan | |
| <dfn> | Merupakan contoh mendefinisikan istilah | ||
| <dialog> | ✓ | Mendefinisikan sebuah kotak dialog atau jendela | |
| <dir> | Tidak didukung di HTML5. Gunakan <ul> sebagai gantinya. Mendefinisikan daftar direktori | ||
| <div> | Mendefinisikan sebuah bagian dalam sebuah dokumen | ||
| <dl> | Mendefinisikan daftar deskripsi | ||
| <dt> | Mendefinisikan istilah/nama dalam daftar deskripsi | ||
| <em> | Mendefinisikan menekankan teks | ||
| <embed> | ✓ | Mendefinisikan sebuah wadah untuk aplikasi eksternal (non-HTML) | |
| <fieldset> | Grup terkait unsur-unsur dalam bentuk | ||
| <figcaption> | ✓ | Mendefinisikan sebuah caption untuk <figure> elemen | |
| <figure> | ✓ | Menentukan konten mandiri | |
| <font> | Tidak didukung di HTML5. Gunakan CSS sebagai gantinya. Mendefinisikan font, warna, dan ukuran untuk teks | ||
| <footer> | ✓ | Mendefinisikan footer untuk dokumen atau bagian | |
| <form> | Mendefinisikan sebuah form HTML untuk input pengguna | ||
| <frame> | Tidak didukung di HTML5. Mendefinisikan sebuah jendela (frame) dalam sebuah frameset | ||
| <frameset> | Tidak didukung di HTML5. Mendefinisikan satu set frame | ||
| <h1 - h6> | Mendefinisikan judul HTML | ||
| <head> | Mendefinisikan informasi tentang dokumen | ||
| <header> | ✓ | Mendefinisikan sebuah header untuk dokumen atau bagian | |
| <hr> | Mendefinisikan perubahan tematik dalam konten | ||
| <html> | Mendefinisikan root dari suatu dokumen HTML | ||
| <i> | Mendefinisikan teks miring | ||
| <iframe> | Mendefinisikan sebuah frame inline | ||
| <img> | Mendefinisikan gambar | ||
| <input> | Mendefinisikan kontrol input | ||
| <ins> | Mendefinisikan teks yang telah dimasukkan ke dalam dokumen | ||
| <kbd> | Mendefinisikan input keyboard | ||
| <keygen> | ✓ | Mendefinisikan sebuah bidang pasangan kunci Generator (untuk forms) | |
| <label> | Mendefinisikan label untuk sebuah <input> elemen | ||
| <legend> | Mendefinisikan sebuah caption untuk <fieldset> elemen | ||
| <li> | Mendefinisikan sebuah daftar item | ||
| <link> | Mendefinisikan hubungan antara dokumen dan sumber daya eksternal (kebanyakan digunakan untuk link ke style sheet) | ||
| <main> | ✓ | Menentukan konten utama dari dokumen | |
| <map> | Mendefinisikan peta gambar klien | ||
| <mark> | ✓ | Mendefinisikan ditandai/teks yang disorot | |
| <menu> | Mendefinisikan daftar/menu perintah | ||
| <menuitem> | ✓ | Mendefinisikan item perintah/menu bahwa pengguna dapat memanggil dari menu popup | |
| <meta> | Mendefinisikan metadata tentang dokumen HTML | ||
| <meter> | ✓ | Mendefinisikan pengukuran skalar dalam kisaran dikenal (gauge) | |
| <nav> | ✓ | Mendefinisikan navigasi link | |
| <noframes> | Tidak didukung di HTML5. Mendefinisikan sebuah konten alternatif untuk pengguna yang tidak mendukung frame | ||
| <noscript> | Mendefinisikan sebuah konten alternatif untuk pengguna yang tidak mendukung script klien | ||
| <object> | Mendefinisikan sebuah objek tertanam | ||
| <ol> | Mendefinisikan sebuah daftar ordered | ||
| <optgroup> | Mendefinisikan sekelompok opsi terkait dalam daftar drop-down | ||
| <option> | Mendefinisikan pilihan dalam daftar drop-down | ||
| <output> | ✓ | Mendefinisikan hasil perhitungan | |
| <p> | Mendefinisikan sebuah paragraf | ||
| <param> | Mendefinisikan sebuah parameter untuk objek | ||
| <pre> | Mendefinisikan teks terformat | ||
| <progress> | ✓ | Merupakan kemajuan tugas | |
| <q> | Mendefinisikan sebuah kutipan singkat | ||
| <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> | Mendefinisikan teks yang tidak lagi benar | ||
| <samp> | Mendefinisikan contoh output dari program komputer | ||
| <script> | Mendefinisikan sebuah script klien | ||
| <section> | ✓ | Mendefinisikan sebuah bagian dalam sebuah dokumen | |
| <select> | Mendefinisikan sebuah daftar drop-down | ||
| <small> | Mendefinisikan teks kecil | ||
| <source> | ✓ | Mendefinisikan sumber beberapa media untuk elemen media (<video> dan <audio>) | |
| <span> | Mendefinisikan sebuah bagian dalam sebuah dokumen | ||
| <strike> | Tidak didukung di HTML5. Gunakan <del> atau <s> sebagai gantinya. Mendefinisikan teks dicoret | ||
| <strong> | Mendefinisikan teks penting | ||
| <style> | Mendefinisikan informasi style untuk dokumen | ||
| <sub> | Mendefinisikan teks subscript | ||
| <summary> | ✓ | Mendefinisikan sebuah judul terlihat untuk <details> elemen | |
| <sup> | Mendefinisikan teks superscripted | ||
| <table> | Mendefinisikan tabel | ||
| <tbody> | Grup isi tubuh dalam sebuah tabel | ||
| <td> | Mendefinisikan sebuah sel dalam tabel | ||
| <textarea> | Mendefinisikan sebuah input control multiline (area teks) | ||
| <tfoot> | Grup isi footer dalam sebuah tabel | ||
| <th> | Mendefinisikan sebuah header cell dalam sebuah tabel | ||
| <thead> | Grup isi header dalam sebuah tabel | ||
| <time> | ✓ | Mendefinisikan tanggal/waktu | |
| <title> | Mendefinisikan judul untuk dokumen | ||
| <tr> | Mendefinisikan baris dalam sebuah tabel | ||
| <track> | ✓ | Mendefinisikan trek teks untuk elemen media (<video> dan <audio>) | |
| <tt> | Tidak didukung di HTML5. Gunakan CSS sebagai gantinya. Mendefinisikan teletype text | ||
| <u> | Mendefinisikan teks dengan garis bawah | ||
| <ul> | Mendefinisikan sebuah daftar unordered | ||
| <var> | Mendefinisikan variabel | ||
| <video> | Mendefinisikan sebuah video atau film | ||
| <wbr> | Mendefinisikan sebuah kemungkinan line-break | ||
Tanda ✓ (checklist) menandakan bahwa itu adalah kode HTML5 terbaru
Semoga kumpulan kode tag html lengkap dengan fungsinya bisa Anda pelajari secara bertahap sehingga Anda akan mudah dalam memahami kode html. Sehingga kita bisa dengan mudah memahami arti dari setiap kode html yang ada pada template blogger yang sedang kita gunakan. Dan berharap dengan mempelajari kode html ini kita dapat membuat halaman web yang sederhana dan dapat berkembang secara terus-menerus.
ijin bookmark gan untuk kamus hehehe
BalasHapussilahkan mba, semoga bermanfaat...
HapusKumpulan kode atau tag HTML yang sangat sering digunakan beserta dengan penjelasan fungsinya akan sangat bermanfaat dan membantu kita dalam melakukan sesuatu yang berhubungan dengan HTML :)
BalasHapusyup mas, mudah-mudahan ada yang menjadikan blog ini sebagai referensi belajar html, hihi...
HapusBanyak juga ya kang kalau disebutkan satu persatu kode beserta fungsi html ini ?
BalasHapusitu semua daftar kode tag yang ada pada html
HapusLengkap juga kang,, kalau gitumah tak comotlah buat belajar nang rumah... XD
BalasHapussip kang, silahkan di coba atuh
HapusTag HTML-nya lumayan lengkap, penjelasannya cukup dimengerti, tapi hanya kenal beberapa saja dari yang disebutkan di atas, selebihnya gagal paham saya mah :D
BalasHapusemang banyak kode yang asing ya, khususnya kode html5 yang lama, kalau yang terbaru pasti sering lihat lah yang ada di template blogger kita
HapusMempelajari kode tag seperti diatas, awal mulanya pening dan pusing juga. Tapi lama-kelamaan paham dengan sendirinya. Dan kode tag diatas, hampir aku gunakan didalam template atau saat aku membuat artikel baru.
BalasHapusmungkin iframe aku belum menggunakannya.
iya mas, hehe... asal sering atik-atik template blog pasti paham nanti juga ya
HapusHanya beberapa kode aja yang tau. Itu kode html 5 khusus template blog atau browser khusus.
BalasHapushtml5 itu versinya sob, tidak di khususkan untuk template blog ataupun browsernya, jadi kalau blog ada yang masih pakai html versi sebelumnya tidak masalah blog itu akan tetap jalan
Hapuskode html yang lebih lengkap, beserta ceklist kode yang support html5, makasih mas infonya
BalasHapusiya mas sama-sama semoga bisa bermanfaat kode htmlnya :)
Hapus