Belajar Kumpulan Kode Tag HTML Lengkap Dengan Fungsinya
Artikel ini memuat Kumpulan Kode Tag HTML Lengkap Dengan Fungsinya
.png){kind=small}
M. Riyan
---
A+
A-
|
| Belajar Kumpulan Kode Tag HTML Lengkap Dengan Fungsinya |
riyanesia.my.id - Halo
sobat online! Selamat datang dalam dunia yang menakjubkan dari web
development. Jika kalian penasaran tentang bagaimana sebuah halaman web
dibangun, HTML adalah kunci awal yang perlu kamu kuasai. HTML, yang merupakan
singkatan dari HyperText Markup Language, adalah bahasa yang digunakan untuk
membangun struktur dasar setiap halaman web yang kita temui saat menjelajah
internet. Dengan memahami dasar-dasar HTML, kamu akan membuka pintu ke dunia
yang luas dan mendalam dalam menciptakan dan merancang situs web yang
menakjubkan. Oleh karena itu saya ingin membagikan artikel mengenai Kumpulan
Kode Tag HTML Lengkap Dengan Fungsinya
Table of Contents
Pengantar
Pengertian dasar HTML adalah bahwa ini adalah bahasa yang digunakan untuk
mengorganisir dan mengatur konten pada halaman web. Setiap elemen di halaman
web, seperti teks, gambar, tautan, dan banyak lagi, didefinisikan dan diatur
dengan menggunakan kode HTML. Artinya, HTML adalah tulang punggung dari setiap
halaman web yang ada, dan tanpa pemahaman yang kuat tentang bahasa ini, sulit
untuk merancang atau memodifikasi situs web dengan baik.
Saat kamu mulai memahami HTML, kamu akan belajar tentang tag dan elemen HTML.
Tag adalah tanda khusus yang digunakan untuk menandai elemen di halaman web.
Misalnya, tag "<p>" digunakan untuk mengawali sebuah paragraf, tag
"<img>" untuk menyisipkan gambar, dan tag "<a>" untuk membuat
tautan. Elemen-elemen ini membentuk kerangka dasar halaman web, dan dengan
memahaminya, kamu dapat mengendalikan tampilan dan konten halaman sesuai
keinginan.
Penggunaan HTML sangat luas dan beragam. Hal ini tidak hanya penting bagi
pengembang web profesional, tetapi juga bagi siapa pun yang ingin berbagi
informasi atau mempromosikan sesuatu secara online. Kamu dapat membuat halaman
web pribadi, blog, toko online, situs berita, dan banyak lagi. Bahkan, banyak
platform website builder seperti WordPress, Wix, dan lainnya, menggunakan HTML
di balik layar untuk memberi Anda kebebasan dalam merancang halaman web Anda
sesuai keinginan.
Beberapa hal yang perlu kamu ketahui terlebih dahulu
Sebelum kamu memulai perjalanan belajar HTML, ada beberapa hal penting yang
perlu kamu ketahui. Pertama, HTML adalah bahasa yang relatif mudah dipahami,
terutama bagi pemula. Namun, seperti dalam pembelajaran apapun, konsistensi
dan latihan adalah kunci kesuksesan. Jangan takut untuk mencoba-coba,
bereksperimen dengan kode, dan mencari tahu apa yang bekerja dan apa yang
tidak. Selain itu, sangat penting untuk memahami bahwa HTML adalah bahasa yang
berkembang. Versi terbaru HTML, yaitu HTML5, menghadirkan sejumlah fitur baru
yang memungkinkan pembuatan situs web yang lebih dinamis dan interaktif.
Dengan begitu, kamu dapat menjelajahi dan memahami perubahan ini seiring
waktu.
Selain itu, kamu juga perlu memiliki pemahaman tentang CSS (Cascading Style
Sheets) dan JavaScript, dua bahasa lain yang berperan penting dalam
pengembangan web. CSS digunakan untuk mengatur tampilan dan desain halaman
web, sementara JavaScript memungkinkan interaktivitas yang lebih kompleks dan
dinamis. Pemahaman yang baik tentang ketiganya (HTML, CSS, dan JavaScript)
akan memberi kamu kemampuan untuk menciptakan situs web yang menarik,
fungsional, dan mengikuti tren terkini dalam desain web.
Pada artikel kali ini, saya ingin share Kumpulan Kode Tag HTML Lengkap Dengan
Fungsinya, harapanya ini bermanfaat terutama teruntuk untuk kalian yang ingin
bisa membuat sebuah halaman website yang sederhana Anda dapat belajar mengenal
kode HTML disini. Berikut Tabel kumpulan kodeTag HTML beserta dengan fungsinya
masing masing :
Kumpulan Kode Tag HTML Lengkap Dengan 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
Penutup
Dalam kesimpulan, belajar HTML adalah langkah awal yang penting dalam
perjalanan menuju pengembangan web. Dengan pemahaman yang baik tentang
bahasa ini, kamu akan memiliki dasar yang kokoh untuk merancang,
memodifikasi, dan mengoptimalkan halaman web sesuai keinginan. HTML
memainkan peran kunci dalam membangun struktur halaman web, dan itu adalah
fondasi yang harus dimiliki oleh siapa pun yang ingin menjadi seorang web
developer.
Selain itu, dunia web development terus berkembang, dan belajar HTML
adalah pintu masuk yang ideal untuk memahami teknologi-teknologi web yang
lebih canggih seperti CSS, JavaScript, dan banyak lagi. Dengan demikian,
tidak hanya akan memahami HTML, tetapi juga mengikuti tren terbaru dalam
desain dan interaktivitas web. Jadi, jangan ragu untuk memulai perjalanan
belajar HTML, dan jangan lupa untuk berlatih secara teratur untuk
memperkuat pemahaman kamu dalam bahasa ini. Dengan kesabaran dan tekad,
kamu akan siap untuk menciptakan halaman web yang menakjubkan dan memasuki
dunia web development dengan penuh semangat. Selamat belajar!
Referensi:
https://www.caramanual.com/
Posting Komentar
Posting Komentar