Kumpulan Lengkap Tag HTML Dan Cara Penggunaannya

Belajar Dasar Aja Dulu

1

Beberapa kumpulan tag pada HTML yang bisa dan biasa digunakan saat pembuatan dokumen HTML. Sebelum baca lebih jauh, harap diketahui tag pada HTML ada yang disebut dengan tag pembuka dan tag penutup. Kedua ini harus ada bersamaan di sisi luar dari isi/konten file HTML. Contohnya kita memberikan judul dengan tag h1, maka tulisan judul berada diantara tag h1 pembuka dan tag h1 penutup artinya tag h1 pembuka dan penutup berada di sisi luar dari isi. Lihat gambar:

contoh tag h1 rio bermano

ads by posciety

Bagaimana membedakan tag pembuka dan tag penutup? Tag pembuka adalah tulisan normal tanpa tambahan karakter apapun di dalam tag, sedangkan tag penutup ditandai dengan garis miring (/). Bisa dilihat pada gambar di atas di akhirnya ada </h1> artinya tag h1 diberi garis miring (/) sebelum penulisannya maka itu adalah tag penutup. Mari kita kenali lebih jauh lagi macam-macam tag HTML yang umum digunakan.

Bagian Dasar

  • !DOCTYPE html [Merupakan deklarasi dari html 5 & penulisan deklarasi dalam huruf besar ataupun kecil tidak menjadi masalah]
  • <html> </html> [Digunakan untuk membuat sebuah dokumen html]
  • <head> </head> [Memberikan informasi pada sebuah dokumen tersebut, pada pembuatan website biasa digunakan untuk insert file seperti CSS]
  • <title> </title> [Memberika judul pada dokumen html tersebut]
  • <body> </body> [Menggambarkan isi dari halaman atau dokumen html tersebut]
  • <header> </header> [Digunakan untuk menampilkan tajuk kepala atau bagian header (atas), tag ini hanya bisa digunakan pada html 5. Secara default jika tidak diatur, maka browser akan menampilkan bagian header ini berupa blok]
  • <footer> </footer> [Digunakan untuk memberikan bagian kaki pada sebuah dokumen html, biasanya digunakan untuk informasi atau hak cipta]

Lihat contoh penggunaannya pada artikel Cara Membuat Website Sendiri.

Bagian Tulisan (Text Format, Heading):

  • <h1> </h1> [Digunakan untuk heading atau judul dan biasa diartikan sebagai text yang sangat penting karena h1 ini memiliki ukuran yang sangat besar dibanding tag sejenisnya]
  • <h2> </h2> [Merupakan tulisan penting atau judul kedua setelah kakaknya yaitu h1, ukurannya lebih kecil dari h1]
  • <h3> </h3> [Merupakan tulisan penting atau judul ketiga setelah kakaknya yaitu h2, ukurannya lebih kecil dari h2]
  • <h4> </h4> [Merupakan tulisan penting atau judul keempat setelah kakaknya yaitu h3, ukurannya lebih kecil dari h3]
  • <h5> </h5> [Merupakan tulisan penting atau judul kelima setelah kakaknya yaitu h4, ukurannya lebih kecil dari h4]
  • <h6> </h6> [Merupakan tulisan penting atau judul keenam setelah kakaknya yaitu h5, ukurannya lebih kecil dari h5]
  • <p> </p> [Digunakan untuk membuat sebuah paragraf]
  • <strong> </strong> [Merupakan tag frasa, digunakan untuk mempertebal tulisan biasa digunakan untuk tulisan penting pada paragraf] Selengkapnya
  • <b> </b> [Sama seperti strong, menjadi lebih tebal, biasa digunakan untuk text yang penting] Selengkapnya
  • <em> </em> [Digunakan pada teks yang bersifat menekankan, tag ini bertekstur miring] Selengkapnya
  • <i> </i> [Sama seperti em yang memiringkan tulisan] Selengkapnya
  • <mark> </mark> [Digunakan untuk memberi tanda pada tulisan (highlight), seperti kalian mencoret beberapa text menggunakan stabilo pada lembaran buku. Ini hanya berlaku ketika digunakan di html 5] Selengkapnya
  • <code> </code> [Digunakan untuk menampilkan beberapa kode komputer]
  • <small> </small> [Digunakan untuk membuat text berukuran kecil, ini biasa digunakan ketika ingin memasukkan tulisan kecil diantara text yang berukuran besar misalnya h1 / h2, dll]
  • <u> </u> [Digunakan untuk memberikan garis bawah pada text] Selengkapnya
  • <ins> </ins> [Digunakan untuk memberikan garis bawah pada text, biasa digunakan untuk text yang disisipkan] Selengkapnya
  • <sub> </sub> [Digunakan untuk membuat teks sedikit lebih rendah posisinya, biasa digunakan untuk rumus pada matematika atau kimia]
  • <sup> </sup> [Digunakan untuk membuat text sedikit lebih tinggi posisinya, biasa digunakan untuk angka atau pangkat pada matematika]
  • <samp> </samp> [Merupakan tag frasa, digunakan untuk menampilkan contoh output dari program komputer. Tag ini kaku layaknya bahasa program komputer, tapi bisa dipercantik lagi menggunakan CSS]
  • <del> </del> [Digunakan untuk menampilkan garis tengah pada text, bermaksud untuk memberi tanda bahwa file pada tulisan tersebut sudah dihapus] Selengkapnya
  • <strike> </strike> [Digunakan untuk menampilkan garis tengah pada text, bermaksud untuk memberi tanda bahwa file pada tulisan tersebut sudah dihapus] Selengkapnya
  • <kbd> </kbd> [Digunakan untuk memberikan text seperti input keyboard. Text ini kaku tapi bisa dipercantik lagi menggunakan CSS]
  • <var> </var> [Digunakan untuk membuat text variabel, text ini bisa lebih menarik lagi jika dihias menggunakan CSS]

Bagian Media (Gambar, Audio, Video):

  • <img data-src=””> [Digunakan untuk memasukkan gambar, sedangkan src adalah nama file gambar yang akan dimasukkan (pastikan kalian juga memasukkan urutan letak gambar tersebut] Selengkapnya
  • <audio controls> </audio> [Digunakan untuk memasukkan audio, sedangkan controls adalah pengendalian pada audio tersebut seperti play/pause/stop]
  • <source src=”” type=”audio/wav”> [Digunakan untuk menampilkan audio pada audio player (tag diatas), maka tag ini disisipkan diantara tag pembuka <audio> dan penutup </audio>. src adalah nama file audio yang akan dimainkan (pastikan kalian juga menyertakan letak audio tersebut disimpan secara berurutan), sedangkan type adalah jenis dari audio tersebut misalnya .wav/.mp3]
  • <video controls> </video> [Digunakan untuk menampilkan video, sedangkan controls untuk pengendalian seperti play/pause/stop. Diantara tag ini kalian masukkan tag source seperti pada audio diatas. Dan video kalian akan muncul sesuai ukuran asli video yang disispkan di source, untuk mengatur ukuran lebar dan tinggi video silahkan berikan width=”” dan height=”” didalam tag pembuka <video> (pastikan kalian menulis setelah tulisan video, maka akan seperti ini <video width=”” height=”” controls>]
  • <iframe> </iframe> [Digunakan untuk menampilkan video, ini sama dengan tag video diatas. Tag ini lebih umum yang biasa digunakan pada media sosial untuk menyematkan (embed) post, video, dll. Untuk menampilkan video silahkan tambahkan src didalam tag pembuka iframe setelah tulisan iframe maka akan seperti ini <iframe src=””>. Pada src masukkan video yang akan disisipkan seperti penjelasan tag video diatas, defaultnya video akan tampil sesuai ukuran video. Maka atur width=”” dan height=”” dan simpan seperti penjelasan tag video diatas.]
  • Untuk penjelasan audio dan video. Kalian dapat membuatnya autoplay (mulai otomatis ketika laman loading), menghilangkan logo youtube (jika video disematkan dari youtube), menghilangkan tombol fullscreen, dll. Caranya ada disini. Lihat juga cara penggunaan tag media disini.
Artikel Lainnya
Lihat Komentar (1)

Website ini menggunakan cookie untuk pengalaman yang lebih baik Setuju & Tutup Selengkapnya