Pada tutorial html tahap kedua ini, kita akan belajar mengenal tag-tag yang ada di dalam html 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.
Yuk kita mulai,
Daftar isi
- 1 Apa Itu Tag Html
- 2 Jenis-Jenis Tag Html
- 2.1 Tag Wajib
- 2.2 Tag Struktur
- 2.3 Tag Meta
- 2.4 Tag Form
- 2.5 Tag Teks Format
- 2.6 Tag List
- 2.7 Tag Tabel
- 2.8 Tag Script
- 2.9 Tag Embed
Apa Itu Tag?
Tag adalah sebuah markup atau penanda batas awal dan akhir dari sebuah elemen html.
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 atribut seperti id, class, name dan lainnya,
Sampai disini semoga teman-teman semua paham apa itu tag.
Jenis-Jenis Tag Html
Pada kesempatan kali kita akan belajar mengenali tag-tag html. Tag-tag tersebut di kelompokan berdasarkan fungsi dan kegunaannya.
Berikut adalah tag-tagnya
Tag Wajib
Tag wajib adalah tag dasar yang harus di tulis ketika membuat file html.
| Tag | Keterangan |
|---|---|
| <html> | Digunakan untuk membuat root dokumen html |
| <head> | Digunanak untuk meletkan informasi halaman web |
| <body> | Digunakan untuk meletakan konten yang akan di tampilkan di web browser |
Tag Struktur
Tag struktur adalah tag yang digunakan untun menyusun sebuah halaman web
| Tag | Keterangan | Sering digunakan |
|---|---|---|
| <a> | Digunakan untuk membuat hyperlink | ✔ |
| <article> | Digunanak untuk membuat artikel | ✔ |
| <aside> | Biasanya di gunakan untuk sidebar atau menunjukan bahwa elemen tersebut bukan elemen utama | ✔ |
| <br> | Digunakan untuk membuat baris baru | ✔ |
| <details> | Digunakan untuk membuat rincian informasi | |
| <div> | Digunakan untuk membuat divisi bagian dari dokumen html | ✔ |
| <h1> - <h6> | Digunakan untuk membuat heading (bagian dari seo) | ✔ |
| <header> | Digunakan untuk membuat bagian dari header halaman | ✔ |
| <hgroup> | Digunakan untuk membuat header group | |
| <hr> | Digunakan untuk membuat separator horizontal | ✔ |
| <nav> | Digunakan untuk membuat navigasi menu halaman | ✔ |
| <footer> | Digunakan untuk membuat footer halaman | ✔ |
| <p> | Digunakan untuk membuat paragraf | ✔ |
| <section> | Digunakan untuk membuat bagian-bagian dari halaman web | ✔ |
| <span> | Digunakan untuk 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 | Sering digunakan |
|---|---|---|
| <base> | Digunanak untuk membuat base url yang akan di gunakan untuk setiap link yang ada di halaman | |
| <basefont> | Digunanak untuk memuat font halaman | |
| <link> | Digunakan untuk membuat mengimport css, font dan lainnya | ✔ |
| <meta> | Digunakan untuk memuat informasi halaman | ✔ |
| <style> | Digunakan untuk membuat internal css | ✔ |
| <title> | Digunakan untuk memuat judul informasi halaman | ✔ |
Tag Form
Tag form adalah tag yang digunakan untuk membuat formulir inputan
| Tag | Keterangan | Sering digunakan |
|---|---|---|
| <form> | Digunakan untuk membuat form area | ✔ |
| <input> | Digunanak untuk membuat inputan user (text, checkbox, radio botton dll) | ✔ |
| <textarea> | Digunakan untuk membuat inputan berupa teks baris | ✔ |
| <select> | Digunakan untuk membuat daftar pilihan | ✔ |
| <option> | Digunakan untuk membuat item dari tag <select> | ✔ |
| <label> | Digunakan untuk membuat label dari form input | ✔ |
| <button> | Digunakan untuk membuat tombol | ✔ |
| <datalist> | Digunakan untuk membuat opsi pilihan dari tag <input> | |
| <fieldset> | Digunakan untuk membuat group pada field. | |
| <keygen> | Digunakan untuk membuat kunci enkripso | |
| <meter> | Digunakan untuk membuat inputan skala | |
| <legend> | Digunakan untuk membuat judul 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 | Sering digunakan |
|---|---|---|
| <abbr> | Digunakan untuk menentukan bentuk singkat dari kata atau frasa yang lebih panjang | |
| <acronym> | Digunakan untuk membuat singkatan(hampir sama seperti abbr) | |
| <address> | Digunakan untuk memuat teks alamat | |
| <b> | Digunakan untuk menebalkan teks | |
| <bdi> | Merupakan teks yang diisolasi dari sekitarnya untuk keperluan pemformatan teks dua arah | |
| <bdo> | Digunakan untuk mengganti arah teks | |
| <big> | Digunakan untuk menampilkan teks dengan ukuran besar | |
| <blockquote> | Digunakan untuk membuat kutipan | ✔ |
| <center> | Digunakan untuk membuat teks di tengah | |
| <cite> | Digunakan untuk menunjukkan kutipan atau referensi ke sumber lain (bentuk miring). | |
| <code> | Digunakan untuk meletakan kode programan | |
| <del> | Digunakan untuk menentukan blok teks yang dihapus | |
| <dfn> | Digunakan untuk mebuat definisi | |
| <em> | Digunakan untuk membuat teks yang dianggap penting | |
| <font> | Digunakan untuk mengatur font teks | |
| <i> | Digunakan untuk membuat icon dan teks miring | ✔ |
| <ins> | Digunakan untuk menentukan blok teks yang talah dimasukan kedalam dokumen | |
| <kbd> | Digunakan untuk menentukan teks inputan dari keyboard | |
| <mark> | Digunakan untuk membuat highligt tejs | |
| <output> | Digunakan untuk menampilkan hasil dari kalkulasi | |
| <pre> | Digunakan untuk membuat blok teks | ✔ |
| <progress> | Digunakan untuk menampilkan progress | |
| <q> | Digunakan untuk menampilkan kutipan | ✔ |
| <rp> | Digunakan untuk memberikan tanda kurung mundur untuk browser yang tidak mendukung anotasi ruby. | |
| <rt> | Digunakan untuk menentukan pelafalan karakter yang disajikan dalam penjelasan ruby. | |
| <ruby> | Digunakan untuk membuat anotasi bahasa pemrograman ruby | |
| <s> | Digunakan untuk menampilkan teks yang dicoret | |
| <samp> | Digunakan untuk membuat teks sampel | |
| <small> | Digunakan untuk membuat teks dengan ukuran kecil | |
| <strike> | Digunakan untuk menampilkan teks dengan gaya ketat | |
| <strong> | Digunakan untuk membuat teks yang tebal | |
| <sub> | Digunakan untuk membuat sub teks (contoh: H2O) | |
| <sup> | Digunakan untuk mendefinisikan teks pangkat (contoh: E=mc2) | |
| <tt> | Digunakan untuk membuat teks style teletipe | |
| <u> | Digunakan untuk membuat teks bergaris bawah | |
| <var> | Digunakan untuk menentukan variabel | |
| <wbr> | Digunakan untuk membuat breakline ketika diperlukan |
Tag List
Tag list adalah tag yang digunakan untuk membuat sebuah daftar
| Tag | Keterangan | Sering digunakan |
|---|---|---|
| <dd> | Digunakan untuk membuat penjelasan dari list item | |
| <dl> | Digunakan untuk membuat deskripsi list | |
| <dt> | Digunakan untuk membuat definisi untuk item dari <dl> | |
| <li> | Digunakan untuk membuat item dari <ol> atau <ul> | ✔ |
| <ol> | Digunakan untuk membuat list countable | ✔ |
| <ul> | Digunakan untuk membuat list uncountable | ✔ |
Tag Tabel
Tag tabel adalah tag yang digunakan untuk membuat sebuah tabel
| Tag | Keterangan | Sering digunakan |
|---|---|---|
| <table> | Digunakan untuk membuat tabel | ✔ |
| <tr> | Digunanak untuk untuk membuat baris cell baru | ✔ |
| <td> | Digunakan untuk untuk membuat kolom cell baru | ✔ |
| <thead> | Digunakan untuk membuat membungkus bagian judul kolom | |
| <tbody> | Digunakan untuk membungkus bagian dari isi dari tabel | |
| <tfoot> | Digunakan untuk untuk membungkus bagian footer dari tabel | |
| <th> | Digunakan untuk membuat kolom judul tabel | ✔ |
| <caption> | Digunakan untuk membuat judul/informasi singkat dari tabel | |
| <col> | Digunakan untuk membuat styling dari kolom | |
| <colgroup> | Digunakan untuk mengelompokan tag <col> |
Tag Script
Tag script adalah tag yang digunakan untuk meletakan kode javascript
| Tag | Keterangan | Sering digunakan |
|---|---|---|
| <noscript> | Digunakan untuk mendisable kode yang dibungkus tag tersebut | |
| <script> | Digunanak untuk meletkan kode javascript | ✔ |
Tag Embed
Tag embed adalah tag yang digunakan untuk menyisipkan sebuah konten seperti video, halaman web lain dan lainnya.
| Tag | Keterangan | Sering digunakan |
|---|---|---|
| <applet> | Digunakan untuk menyisipkan java applet | |
| <area> | Digunanak untuk menyisipkan area image map | |
| <audio> | Digunakan untuk meletakan audio | ✔ |
| <canvas> | Digunakan untuk menggambar grafik | |
| <embed> | Digunakan untuk meyisipkan aplikasi eksternal | |
| <figcaption> | Digunakan untuk untuk memberikan keterangan pada tag figure | |
| <figure> | Digunakan untuk membuat figure | |
| <frame> | Digunakan untuk membuat bingkai | |
| <fameset> | Digunakan untuk membuat koleksi dari tag frame | |
| <iframe> | Digunakan untuk menyisipkan halaman web lain | ✔ |
| <img> | Digunakan untuk menampilkan gambar | ✔ |
| <map> | Digunakan untuk menampilkan peta dari gambar | ✔ |
| <noframes> | Digunakan sebagai keterangan ketika browser tidak mendukung tag frame | |
| <object> | Digunakan untuk meletakan sebuah objek | |
| <param> | Digunakan untuk memberikan parameter untuk java applet | |
| <source> | Digunakan sebagai keterangan audio, video dan tag embed lainnya | |
| <time> | Digunakan untuk menampilakan waktu dan tanggal | |
| <video> | Digunakan untuk menyisipkan file video | ✔ |
| <svg> | Digunakan untuk menyisipkan gambar svg | ✔ |
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
0 Komentar untuk " Tutorial Lengkap Belajar Html # Mengenal Tag-Tag Html"
Silahkan berkomentar dengan baik dan bijak!