Iklan bawah header

Pengertian Tag HTML Lengkap Dengan Penjelasan dan Contohnya

tag html

Hai semua, kali ini kita akan belajar mengenai tag HTML.

Bagi yang belum tahu apa itu tag HTML, tag HTML adalah Sebuah markup dari sebuah elemen di HTML yang biasanya terdiri dari pembuka dan penutup. Untuk penulisannya sendiri tag dibuat dengan kurung siku (<...>), lalu di dalamnya berisi nama tag dan juga bisa ditambahkan dengan atribut.

Tag HTML ditulis secara berpasangan antara tag pembuka dan tag penutup. Namun, ada beberapa diantaranya yang tidak memiliki pasangan penutup. Untuk menuliskan tag penutup hanya dengan menambahkan garis miring (/) di depan nama tag.

Setiap tag mempunyai fungsinya masing-masing. Ada yang digunakan untuk membuat judul, membuat paragraf, membuat link, membuat heading dan lainnya.

Pada awalnya HTML hanya memiliki 18 tag saja. Dan sekarang HTML sudah punya sekitar 250 tag.

Wah! banyak juga ya.

Apakah semua tag ini harus kita hafal?

Tentu saja tidak, saya juga tidak bisa menghafal semuanya. Cukup kalian ketahui tag-tag dasar saja.

Berikut ini adalah daftar tag-tag dasar yang perlu kalian ingat.

Nama Tag Keterangan/Fungsi
<html> Tag untuk membuat sebuah dokumen HTML
<head> Tag untuk membuat bagian head
<body> Tag untuk membuat tubuh dari sebuah halaman
<h1> sampai <h6> Tag untuk membuat heading pada artikel
<p> Tag untuk membuat sebuah paragraf
<!-- --> Tag untuk membuat komentar

Cara Menulis Tag HTML yang Benar!

Beberapa orang mungkin sering melakukan kesalahan dalam menuliskan tag, ada yang lupa untuk memberikan tag penutup, ada yang salah dalam mengetikan nama tag, dan semacamnya.

Mungkin beberapa saran berikut ini bisa kalian ikuti agar bisa menuliskan tag dengan benar.

1. Tag-tag Wajib

Ada beberapa tag yang harus ada atau wajib ada di HTML. Tag ini harus ditulis, kalau tidak kode HTML akan menjadi error menurut validator W3C.

Berikut ini Tag-tag yang wajib ada di HMTL:

  • <!DOCTYPE html> - Untuk deklarasi type dokumen;
  • <html> - Tag utama pada HTML;
  • <head> - Untuk membuat bagian head atau kepala dari dokumen;
  • <title> - Untuk membuat judul web;
  • <body> - Untuk membuat bagian tubuh atau body dari dokumen.

2. Gunakan Huruf Kecil

Hindari penggunaan huruf besar dalam menuliskan nama tag dan alangkah baiknya gunakan huruf kecil saja.

Huruf kecil akan lebih mudah diketik dan juga akan membuat kode HTML akan terlihat lebih bersih dan rapi.

Contoh (bagus):


<body>
<p>Belajar mengenai tag di html</p>
</body>
 

Contoh (buruk):


<BODY>
<P>
Belajar mengenai tag di html
</P>
</BODY>

Tapi khusus untuk tag <!DOCTYPE html> harus dituliskan dengan huruf besar. Sebenarnya juga bisa dituliskan dengan huruf kecil dan akan valid menurut validator W3C.

Untuk dokumen XHTML, menuliskan DOCTYPE dengan huruf kecil akan mengakibatkan error.

3. Menutup Tag dengan Benar

Tag HTML nantinya akan dituliskan secara bertumpuk. Artinya, di dalam tag masih ada tag lagi. Terkadang kita sering melakukan kesalah dalam menutup tag yang bertumpuk ini. Akibatnya, kode HTML menjadi error atau tidak valid.

Tapi jangan khawatir, saya punya resepnya agar kamu mudah mengingatnya. Berikut penulisan tag dengan benar.

Contoh (benar):


 <i>
 <b><u>
 Belajar mengenai tag di html
 </u>
 </b></i>
 

Contoh (salah):


 <i>
 <b><u>
 Belajar mengenai tag di html
 </i></b>
 </u>
 

Tag-tag Pada HTML beserta Fungsinya

Saya akan memberikan daftar referensi tag-tag HTML.  Referensi tag HTML yang saya tuliskan dibawah ini juga termasuk tag HTML5 yang terakhir di release oleh W3C. Dibawah ini akan disebutkan kegunaan dari masing-masing tag dan juga penggunaan tag yang harus dihindari karena memang sudah tidak disupport HTML5.

Berikut daftar dari tag-tag HTML.

Nama Tag Keterangan/Fungsi
Basic
<!DOCTYPE> Untuk menentukan tipe dokumen
<html> Untuk membuat sebuah dokumen HTML
<title> Untuk membuat judul dari sebuah dokumen
<body> Untuk membuat tubuh dari sebuah halaman
<h1> sampai <h6> Untuk membuat heading pada artikel
<p> Untuk membuat sebuah paragraf
<!-- --> Untuk membuat komentar
<br> Memasukan satu baris putus
<hr> Untuk membuat perubahan dasar kata didalam isi
Formatting
<acronym> Untuk membuat sebuah akronim (tidak disupport lagi di HTML5)
<abbr> Untuk membuat sebuah singkatan
<address> Untuk membuat kontak alamat
<b> Untuk membuat huruf bercetak tebal
<bdi> Mengisolasi bagian dari teks yang dapat diformat dalam arah yang berbeda dari teks lain di luarnya (tag baru HTML5)
<bdo> Mengganti arah teks
<big> Untuk membuat teks berhuruf besar (tidak disupport lagi di HTML5)
<blockquote> Untuk membuat sebuah bagian teks yang dikutip dari sumber lain
<center> Untuk membuat jajaran teks menjadi ditengah (tidak disupport lagi di HTML5)
<cite> Untuk membuat judul karya
<code> Untuk membuat potongan code komputer diantara teks
<del> Untuk membuat teks yang telah dihapus dari dokumen
<dfn> Untuk membuat sebuah istilah definisi
<em> Untuk membuat penekanan teks (tidak disupport lagi di HTML5)
<font> Untuk membuat font, warna dan ukuran teks (tidak disupport lagi di HTML5)
<i> Untuk membuat sebuah bagian dari teks yang disesuaikan dengan mood
<ins> Untuk membuat teks yang telah dimasukkan ke dalam dokumen
<kbd> Untuk membuat input keyboard
<mark> Untuk membuat teks yang disorot atau ditandai (tag baru HTML5)
<meter> Untuk membuat pengukuran skalar
<pre> Untuk membuat teks terformat
<progress> Untuk memperlihatkan kemajuan tugas (tag baru di HTML5)
<q> Untuk membuat kutipan pendek
<rp> Untuk membuat apa yang harus ditampilkan di browser yang tidak mendukung penjelasan ruby (tag baru di HTML5)
<rt> Untuk membuat sebuah anotasi / pengucapan karakter (untuk tipografi Asia Timur)
<ruby> Untuk membuat sebuah anotasi ruby (untuk tipografi Asia Timur) (tag baru di HTML5)
<s> Untuk membuat teks yang tidak lagi benar
<samp> Untuk membuat contoh keluaran dari program komputer
<small> Untuk membuat teks kecil
<strike> Untuk membuat teks yang dicoret ditengah (tidak disupport lagi di HTML5)
<strong> Untuk membuat teks penting
<sub> Untuk membuat teks subskrip(seperti dalam penulisan zat kimia)
<sup> Untuk membuat teks superscripted (seperti dalam penulisan akar kuadrat)
<tt> Untuk membuat teks teletype (tidak disupport lagi di HTML5)
<time> Untuk membuat tanggal atau waktu (tag baru di HTML5)
<var> Untuk membuat sebuah variabel
<wbr> Untuk membuat kemungkinan garis-putus
<u> Untuk membuat teks yang memiliki gaya yang berbeda dari teks biasa lainnya
Forms
<form> Untuk membuat sebuah form HTML untuk input pengguna
<input> Untuk membuat sebuah kontrol input
<button> Untuk membuat sebuah tombol yang bisa diklik
<textarea> Untuk membuat sebuah kontrol input multibaris
<select> Untuk membuat sebuah daftar drop-down
<optgroup> Untuk membuat sebuah kelompok pilihan yang terkait dalam daftar drop-down
<option> Untuk membuat pilihan dalam daftar drop-down
<label> Untuk membuat sebuah label untuk sebuah elemen <input>
<fieldset> Grup unsur terkait dalam bentuk
<legend> Untuk membuat caption utnuk sebuah elemen <fieldset>,<details> atau <figure>
<datalist> Menentukan daftar pilihan yang telah ditetapkan untuk kontrol input (tag baru HTML5)
<keygen> Untuk membuat key-pair generator kolom input (tag baru HTML5)
<output> Untuk membuat hasil perhitungan (tag baru HTML5)
Frames
<frame> Untuk membuat sebuah bingkai dalam sebuah frameset (tidak disupport lagi di HTML5)
<frameset> Untuk membuat satu set bingkai (tidak disupport lagi di HTML5)
<noframe> Untuk membuat sebuah konten alternatif untuk pengguna yang tidak mendukung frame (tidak disupport lagi di HTML5)
<iframe> Untuk membuat sebuah bingkai
Images
<img> Untuk membuat gambar
<map> Untuk membuat gambar peta
<area> Untuk membuat area dalam gambar-peta
<canvas> Digunakan untuk menggambar grafik, melalui scripting (javascript) (tag baru HTML5)
<figcaption> Untuk membuat caption untuk elemen <figure> (tag baru HTML5)
<figure> Menentukan konten mandiri (tag baru HTML5)
Audio/Video
<audio> Untuk membuat isi suara (tag baru HTML5)
<source> Untuk membuat sumber beberapa media untuk elemen media (<audio> dan <video>) (tag baru HTML5)
<track> Untuk membuat trek teks untuk elemen media (<audio> dan <video>) (tag baru HTML5)
<video> Untuk menampilkan sebuah video atau film (tag baru HTML5)
Links
<a> Untuk membuat hyperlink
<link> Untuk membuat hubungan antara dokumen dan sumber daya eksternal (paling sering digunakan untuk link ke style sheet)
<nav> Untuk membuat navigasi link (tag baru HTML5)
List
<ol> Untuk membuat daftar dengan nomor
<ul> Untuk membuat daftar dengan selain nomor
<li> Untuk membuat sebuah item daftar
<dir> Untuk membuat sebuah daftar direktori (tidak disupport lagi di HTML5)
<dl> Untuk membuat sebuah daftar definisi
<dt> Untuk membuat sebuah istilah (item) dalam daftar definisi
<dd> Mendefinisikan deskripsi item dalam daftar definisi
<menu> Untuk membuat deskripsi dari item dalam daftar deskripsi
<command> Untuk membuat sebuah tombolperintah bahwa seorang pengguna dapat meminta (tag baru HTML5)
Tables
<table> Untuk membuat tabel
<caption> Untuk mebuat sebuah caption pada tabel
<th> Untuk membuat sebuah sel header pada tabel
<tr> Untuk membuat baris dalam sebuah tabel
<td> Untuk membuat sel dalam sebuah tabel
<thead> mengelompokan isi header dalam sebuah tabel
<tbody> Mengelompokan isi tubuh dalam sebuah tabel
<tfoot> mengelompokan isi footer dalam sebuah tabel
<col> Menentukan properti kolom untuk setiap kolom dalam elemen <colgroup>
<colgroup> Menentukan kelompok dari satu atau lebih kolom dalam sebuah tabel untuk diformat
Style/Sections
<style> Untuk membuat informasi style untuk dokumen
<div> Untuk membuat sebuah bagian dalam dokumen
<span> Untuk membuat sebuah bagian dalam dokumen
<header> Untuk membuat bagian header dalam sebuah dokumen
<footer> Untuk membuat bagian footer dalam sebuah dokumen
<hgroup> Pengelompokan elemen heading (<h1> sampai dengan <h6>)
<section> Untuk membuat bagian dalam dokumen
<article> Untuk membuat sebuah artikel
<aside> Untuk membuat konten selain dari konten halaman
<details> Untuk membuat rincian tambahan yang pengguna dapat lihat atau sembunyikan
<dialog> Untuk mebuat sebuah kotak dialog
<summary> Untuk membuat sebuah judul terlihat
Meta Info
<head> Untuk membuat informasi tentang dokumen
<meta> Untuk membuat metadata tentang dokumen HTML
<base> Menentukan URL dasar / target untuk semua URL relatif dalam dokumen
<basefont> Menentukan standar warna, font, dan ukuran untuk semua teks dalam dokumen (tidak disupport lagi di HTML5)
Programming
<script> Untuk membuat script di sisi klien
<noscript> Untuk membuat sebuah konten alternatif bagi pengguna yang tidak mendukung script di sisi klien
<applet> Untuk membuat sebuah java applet yang ditanam (tidak disupport lagi di HTML5)
<embed> Untuk membuat sebuah wadah untuk aplikasi eksternal (non-HTML)
<object> Untuk membuat sebuah objek yang ditanam
<param> Untuk membuat sebuah parameter untuk objek

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel