Sebelumnya kita telah belajar apa itu html dan membuat kode html dasar.
Pada tutorial html tahap kedua ini, kita akan belajar mengenal tag-tag yang ada di dalam html beserta fungsinya, agar nantinya kita tidak salah dalam menggunakan tag tersebut.
Tidak perlu kita hafal semuanya karena memang ada beberapa tag yang jarang digunakan atau bisa di gantikan dengan tag lain penggunaanya.
advertisement
Yuk kita mulai,
Daftar Isi
Apa Itu Tag Pada HTML?
Tag adalah sebuah markup atau penanda batas awal dan akhir dari sebuah area di html yang disebut element.
Batas awal di tandai dengan <nama tag> dan batas akhir di tandai dengan </nama tag>.
Namun ada beberapa tag yang tidak memiliki konten dan tag penutup,
Dan terkadang tag juga berisi attribute seperti id, class, name dan lainnya,
Sampai disini semoga kalian semua paham apa itu tag pada html.
Jenis-Jenis Tag Html
Kali ini kita akan belajar mengenali tag tag html beserta fungsinya. Agar lebih mudah tag tag tersebut dikelompokan berdasarkan kegunaannya.
Tag Wajib
Tag wajib adalah tag dasar yang harus di tulis ketika membuat file html.
| Tag | Keterangan |
| <html> | Digunakan sebagai root dokumen dari kerangka html |
| <head | Digunakan untuk meletekan informasi sebuah halaman web |
| <body> | Digunakan untuk meletakan konten yang akan di tampilkan di web browser |
Tag Struktur
Tag struktur adalah tag yang digunakan untuk menyusun sebuah halaman web
| Tag | Keterangan |
| <a> | Digunakan sebagai root dokumen dari kerangka html |
| <article | Digunakan untuk meletekan informasi sebuah halaman web |
| <aside> | Digunakan untuk meletakan konten yang akan di tampilkan di web browser |
| <br/> | Digunakan untuk membuat break line atau membuat bari baru |
| <details> | Digunakan untuk menandakan bahwa konten yan ada didalamnya berupa rincian informasi |
| <h1>sd<h6> | Digunakan untuk membuat heading atau judul dan sub judul |
| <header> | Digunakan untuk membuat area header |
| <hgroup> | Digunakan untuk membuat membungkus sebuah heading tag yang lebih dari satu dalam satu area |
| <hr/> | Digunakan untuk membuat garis horizontal |
| <nav> | Digunakan untuk membuat area navigasi menu |
| <footer> | Digunakan untuk membuat area footer |
| <p> | Digunakan untuk membuat paragraf |
| <section> | Digunakan untuk membuat bagian bagian yang tidak di definisikan dari sebuah halaman |
| <span> | Digunakan untuk menampilkan baris tulisan |
| <summary> | Digunakan untuk membuat ringkasan dari elemen <details> |
Tag Meta
Tag meta adalah tag yang digunakan untuk mendeskripsikan halaman web dan di tempatkan didalam tag head,
| Tag | Keterangan |
| <base> | Digunakan untuk mendefinisikan base url atau root url dari halaman web yang nantinya setiap link yang ada di sebuah halaman merujuk pada tag tersebut |
| <link> | Digunakan untuk menimport css dan font tertentu |
| <meta> | Digunakan untuk memuat sebuah informasi dari halaman web seperti keyword, description dan lainnya |
| <style> | Digunakan untuk membungkus styling halaman web |
| <titile> | Digunakan untuk memberikan judul dari halaman web |
Tag Form
Tag form adalah tag yang digunakan untuk membuat sebuah form input yang akan diisi oleh user,
advertisement
| Tag | Keterangan |
| <Form> | Digunakan untuk membuat area form |
| <Input> | Digunakan untuk membuat kolom input user |
| <Textarea> | Digunakan untuk membuat teks inputan yang panjang dan lebih dari satu baris |
| <Select> | Digunakan untuk membuat dropdown atau pilihan |
| <Option> | DIgunakan untuk membuat item pilihan dari tag <select> |
| <Label> | Digunakan untuk membuat label teks |
| <Button> | Digunakan untuk membuat tombol |
| <Details> | Digunakan untuk membuat rincian informasi dari sebuah inputan dari tag <input> |
| <Fieldset> | Digunakan untuk membuat group area dari teg input |
| <Keygen> | Digunakan untuk membuat kunci enkripsi |
| <Meter> | Digunakan untuk inputan dalam bentuk skala |
| <Legend> | Diigunakan untuk membuat judul group dari tag <fieldset> |
| <Optgroup> | Digunakan untuk membuat group pada tag <option> |
Tag Teks Format
Tag format adalah tag yang digunakan untuk memformat teks atau isi dari element, seperti menebalkan, membuat garis bawah, teks miring dan lainnya,
| Tag | Keterangan |
| <abbr> | Digunakan ketika kita ingin menandai sebuah text bahwa text tersebut dalam bentuk frasa atau singkatan |
| <acronym> | Hampir sama seperti abbr namun versi lawas (Not Supported In HTML5) |
| <address> | Digunakan ketika kita ingin menandai sebuah alamat lengkap |
| <b> | Digunakan ketika kita ingin menebalkan sebuah tulisan |
| <bdi> | Digunakan untuk menandai bahwa sebuah text berbeda format dari text sebelum dan setelahnya |
| <bdo> | Digunakan untuk merubah teks, seperti arabic teks |
| <blockquote> | Digunakan untuk membuat sebuah blok kutipan |
| <cite> | Digunakan untuk membuat refrensi |
| <code> | Digunakan untuk membuat blok kode |
| <del> | Digunakan untuk membuat teks yang dicoret |
| <dfn> | Digunakan untuk membuat teks definisi yang di cetak miring |
| <em> | Digunakan untuk mempertegas sebuah teks |
| <i> | Digunakan untuk membuat icon atau teks miring |
| <ins> | Digunakan untuk menandai bahwa teks tesebut ditambahkan kedalam dokumen |
| <kbd> | Digunakan untuk menandi teks keyboard |
| <mark> | Digunakan untuk membuat menghighlight sebuah teks |
| <output> | Digunakan untuk mendefinisikan sebuah teks output |
| <pre> | Digunakan untuk membuat blok teks, dan biasa digunakan untuk membungkus tag <code> |
| <progress> | Digunakan untuk mendefinisikan bahwa sebuah progress |
| <q> | Digunakan untuk mendifiniskan sebuah kutipan pendek |
| <s> | Digunakan untuk mencoret teks yang panjang |
| <samp> | Digunakan untuk mendefiniskan sebuah sampel output sebuah program komputer |
| <small> | Digunakan untuk membuat teks berukuran kecil |
| <strong> | Digunakan untuk menebalkan sebuah teks |
| <sub> | Digunakan untuk membuat subscript teks |
| <sup> | Digunakan untuk membuat superscipt teks |
| <u> | Digunakan untuk membuat teks bergaris bawah |
| <var> | Digunakan untuk mendefinisikan sebuah variable |
| <wbr> | Digunakan untuk menentukan dimana sebuah teks tanpa spasi harus di wrap atau di break line |
| <time> | Digunakan untuk mendefinisakan tanggal pada sebuah acara tertentu |
Tag List
Seperti namanya, tag list digunakan untuk membuat sebuah list yang tersusun berbaris
| Tag | Keterangan |
| <dl> | Digunakan untuk membuat deskripsi list |
| <dt> | Digunakan untuk membuat judul item dari deskripsi list |
| <dd> | Digunakan untuk membuat detail item dari deskripsi list |
| <ol> | Digunakan untuk membuat order list atau list dalam bentuk urutan |
| <ul> | Digunakan untuk membuat unorder list atau list dalam bentuk bukan urutan |
| <li> | Digunakan untuk membuat item dari tag <ol> atau <ul> |
Tag Tabel
Tag table digunakan ketika kita ingin membuat sebuah tabel data di sebuah halaman web
| Tag | Keterangan |
| <table> | Digunakan untuk membuat sebuah tabel |
| <thead> | Digunakan untuk mendefinisikan header dari sebuah tabel |
| <tbody> | Digunakan untuk mendefinisikan isi dari sebuah tabel |
| <tfooter> | Digunakan untuk mendefinisikan footer dari sebuah tabel |
| <tr> | Digunakan untuk membuat sebuah baris |
| <th> | Digunakan untuk membuat sebuah header kolom |
| <td> | Digunakan untuk membuat cell dari tabel |
| <caption> | Digunakan untuk membuat sebuah caption pada tabel |
| <col> | Digunakan untuk mendesain kolom pada tabel |
| <colgroup> | Digunakan untuk mengelompokan kolom pada tabel |
Tag Script
Tag script adalah tag yang digunakan untuk scripting halaman web menggunakan javascript
| Tag | Keterangan |
| <script> | Digunakan untuk meletakan kode javascript |
| <noscript> | Digunakan sebagai teks alternate ketika browser tidak mendukung javascript, atau javascript di disable |
Tag Embed
Tag embed adalah tag yang digunakan untuk menyisipkan sebuah konten seperti video, halaman web lain dan lainnya.
| Tag | Keterangan |
| <audio> | Digunakan untuk menyisipkan sebuah audio |
| <canvas> | Digunakan untuk menggambar sebuah grapik, tabel, garis,kurva dan lain-lan. |
| <embed> | Digunakan untuk menyisipkan sebuah file external berupa gambar, html, pdf dan lain lain |
| <figure> | Digunakan untuk membuat membungkus tag <img> |
| <figcaption> | Digunakan untuk membuat caption pada tag <figure> |
| <iframe> | Digunakan untuk menyisipkan halam web lain |
| <img> | Digunakan untuk menampilkan sebuah gambar |
| <map> | Digunakan untuk membuat peta dari sebuah tag <img> |
| <area> | Digunakan untuk membuat sebuah peta area dari tag <map> |
| <object> | Sama seperti embed namun file di definisikan sebagai objek |
| <param> | Digunakan untuk membuat sebuah parameter seperti kontrol pada tag <object> |
| <source> | Digunakan untuk menentukan source file pada tag <audio> dan <video> |
| <video> | Digunakan untuk menyisipkan sebuah video |
| <svg> | Digunakan untuk menggambar grapik dalam format svg |
Kita tidak akan menghafal semuanya, karena memang ada beberapa yang jarang digunakan dan fungsinya bisa digantikan oleh css.
advertisement
Next tutorial kita akan belajar apa itu elemen. Jika kalian merasa artikel ini bermanfaat silahkan bagikan. Dan jika ada petanyaan atau hal yang ingin di sampaikan silahkan tulis di kolom komentar
Silahkan berkomentar dengan baik dan bijak!