Apa itu Tag? Apa yang
dimaksud dengan Tag pada HTML?
Tag adalah suatu
penanda untuk menandai elemen-elemen dalam suatu dokumen HTML dan Fungsi Tag
adalah untuk memberikan instruksi atau memberitahu kepada browser bagaimana
suatu objek di tampilkan berdasarkan Tag yang di gunakan, objek disini bisa
berupa teks, video, audio dan gambar.
Bagaimana Cara
menggunakan Tag pada HTML?
Penggunaan Tag
itu berada diantara dua karakter < dan > dengan
demikian perintah tersebut dapat dikenali oleh browser dan memberitahu web
browser bagaimana suatu objek ditampilkan. Secara umum penggunaan tag
pada HTML itu berpasang- pasangan dimulai dengan <tag_pembuka> Isi dari konten </tag_penutup>, namun ada juga tag yang dalam penulisannya berdiri sendiri
seperti <nama_tag/> tag tersebut disebut dengan Void Element.
Contoh
Menggunakan Tag pada HTML yang SALAH
Code :
<h1> Isi Konten </p> Belajar HTML di CodePolitan
sangat menyenangkan
Tampilan :Perhatikan tag pembuka di atas adalah H1 dan tag penutupnya
adalah P, penulisan seperti itu merupakan contoh yang SALAH,
karena tag pembuka H1 menjadi tidak memiliki tag penutup sehingga
semua tulisan yang masuk dikategorikan sebagai dokumen H1.
Contoh
Menggunakan Tag pada HTML yang BENAR
Code :
<h1> Isi Konten </h1> Belajar HTML di CodePolitan
sangat menyenangkan
Tampilan :Perhatikan tag pembuka di atas adalah H1 dan tag penutupnya
adalah H1, penulisan seperti itu merupakan contoh yang BENAR,
karena tag pembuka H1 memiliki tag penutup H1 sehingga penulisan yang terkena
dampak H1 hanyalah tulisan yang berada pada elemen H1 saja.
Kumpulan Tag pada
HTML
Karena banyak sekali
Tag dan atribut pada HTML, saya akan bantu untuk mendefinisikan kegunaan Macam-
macam Tag secara satu persatu, pada tabel dibawah ini:
|
Tag
|
Penjelasan
|
|
|
<!--...-->
|
Mendefinisikan
Komentar
|
|
|
<!DOCTYPE>
|
Mendefinisikan
tipe atau jenis dokumen
|
|
|
<a>
|
Mendefinisikan
hyperlink
|
|
|
<abbr>
|
Mendefinisikan
sebuah singkatan atau akronim
|
|
|
<acronym>
|
Tag
ini tidak didukung pada HTML5. Gunakan <abbr> sebagai penggantinya pada
HTML5. Mendefinisikan akronim
|
|
|
<address>
|
Mendefinisikan
informasi kontak penulis atau pemilik dokumen
|
|
|
<applet>
|
Tag
ini tidak didukung pada HTML5. Gunakan <embed> atau <object>
sebagai penggantinya pada HTML5. Mendefinisikan embedded applet
|
|
|
<area>
|
Mendefinisikan
sebuah area didalam image-map
|
|
|
<article>
|
Mendefinisikan
sebuah artikel
|
|
|
<aside>
|
Mendefinisikan
selain dari konten halaman
|
|
|
<audio>
|
Mendefinisikan
konten suara
|
|
|
<b>
|
Mendefinisikan
teks bold atau cetak tebal
|
|
|
<base>
|
Menentukan
basis URL atau target untuk semua URL relatif dalam dokumen
|
|
|
<basefont>
|
Tag
ini tidak didukung pada HTML5. Gunakan CSS sebagai penggantinya pada
HTML5. Menentukan warna default, ukuran, dan font untuk semua teks dalam
dokumen
|
|
|
<bdi>
|
Isolat
bagian teks yang mungkin diformat dalam arah yang berbeda dari teks lain di
luar itu sendiri
|
|
|
<bdo>
|
Mengganti
arah teks saat ini
|
|
|
<big>
|
Tag
ini tidak didukung pada HTML5. Gunakan CSS sebagai penggantinya pada
HTML5. Mendefinisikan teks besar
|
|
|
<blockquote>
|
Mendefinisikan
bagian yang dikutip dari sumber lain
|
|
|
<body>
|
Mendefinisikan
tubuh atau badan dokumen
|
|
|
<br>
|
Mendefinisikan
satu baris tunggal atau sama dengan fungsi enter
|
|
|
<button>
|
Mendefinisikan
sebuah tombol
|
|
|
<canvas>
|
Digunakan
untuk menggambar grafik, dengan cepat, melalui scripting (biasanya
JavaScript)
|
|
|
<caption>
|
Mendefinisikan
caption dari sebuah tabel
|
|
|
<center>
|
Tag
ini tidak didukung pada HTML5. Gunakan CSS sebagai penggantinya pada
HTML5. Mendefinisikan teks yang posisinya berada ditengah
|
|
|
<cite>
|
Mendefinisikan
Judul karya
|
|
|
<code>
|
Mendefinisikan
bagian dari code pada komputer
|
|
|
<col>
|
Menentukan
sifat kolom untuk setiap kolom dalam <colgroup> element
|
|
|
<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>
|
Tag
ini tidak didukung pada HTML5. Gunakan <ul> sebagai penggantinya pada
HTML5. 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 eksternal (non-HTML) aplikasi
|
|
|
<fieldset>
|
Sebauh
Grup untuk pengelompokan dalam form
|
|
|
<figcaption>
|
Mendefinisikan
sebuah caption untuk <figure> element
|
|
|
<figure>
|
Menentukan
konten mandiri
|
|
|
<font>
|
Tag
ini tidak didukung pada HTML5. Gunakan CSS sebagai penggantinya pada
HTML5. Mendefinisikan font, warna, dan ukuran dari sebuah teks
|
|
|
<footer>
|
Mendefinisikan
sebuah footer dari sebuah dokumen atau section
|
|
|
<form>
|
Mendefinisikan
sebuah form HTML untuk input pengguna
|
|
|
<frame>
|
Tag
ini tidak didukung pada HTML5. Mendefinisikan sebuah jendela (frame)
dalam sebuah frameset
|
|
|
<frameset>
|
Tag
ini tidak didukung pada HTML5. Mendefinisikan sebuah satu set frames
|
|
|
<h1>
sampai <h6>
|
Mendefinisikan
headings pada HTML
|
|
|
<head>
|
Mendefinisikan
informasi tentang dokumen
|
|
|
<header>
|
Mendefinisikan
sebuah header untuk dokumen atau bagian dokumen
|
|
|
<hr>
|
Mendefinisikan
perubahan tematik dalam konten atau memberikan garis pada dokumen
|
|
|
<html>
|
Mendefinisikan
root dari sebuah dokumen HTML
|
|
|
<i>
|
Mendefinisikan
sebuah bagian dari teks dengan suara alternatif atau suasana hati
|
|
|
<iframe>
|
Mendefinisikan
sebuah frame inline
|
|
|
<img>
|
Mendefinisikan
sebuah image
|
|
|
<input>
|
Mendefinisikan
sebuah input control
|
|
|
<ins>
|
Mendefinisikan
teks yang telah dimasukkan ke dalam dokumen
|
|
|
<kbd>
|
Mendefinisikan
input keyboard
|
|
|
<keygen>
|
Mendefinisikan
sebuah key-pair generator field (for forms)
|
|
|
<label>
|
Mendefinisikan
sebuah label dari sebuah <input> element
|
|
|
><legend>
|
Mendefinisikan
sebuah caption dari sebuah <fieldset> element
|
|
|
<li>
|
Mendefinisikan
sebuah daftar item
|
|
|
<link>
|
Mendefinisikan
hubungan antara dokumen dengan sumber daya eksternal (digunakan untuk link ke
style sheet)
|
|
|
<main>
|
Menentukan
konten utama dari dokumen
|
|
|
<map>
|
Mendefinisikan
client-side image-map
|
|
|
<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 sebuah dokumen HTML
|
|
|
<meter>
|
Mendefinisikan
pengukuran skalar dalam kisaran dikenal (gauge)
|
|
|
<nav>
|
Mendefinisikan
navigasi untuk links
|
|
|
<noframes>
|
Tag
ini tidak didukung pada HTML5. Mendefinisikan sebuah konten alternatif
untuk pengguna yang tidak mendukung frame
|
|
|
<noscript>
|
Mendefinisikan
sebuah konten alternatif untuk pengguna yang tidak mendukung script sisi
klien
|
|
|
<object>
|
Mendefinisikan
sebuah embedded objek
|
|
|
<ol>
|
Mendefinisikan
sebuah daftar tersusun
|
|
|
<optgroup>
|
Mendefinisikan
sekelompok opsi terkait dalam daftar drop-down
|
|
|
<option>
|
Mendefinisikan
sebuah option dari sebuah daftar drop-down
|
|
|
<output>
|
Mendefinisikan
hasil dari sebuah perhitungan
|
|
|
<p>
|
Mendefinisikan
sebuah paragraph
|
|
|
<param>
|
Mendefinisikan
sebuah parameter untuk sebuah object
|
|
|
<pre>
|
Mendefinisikan
teks preformatted
|
|
|
<progress>
|
Menggambarkan
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 sudah tidak benar
|
|
|
<samp>
|
Mendefinisikan
contoh output dari program komputer
|
|
|
<script>
|
Mendefinisikan
sebuah script dari sisi klien
|
|
|
<section>
|
Mendefinisikan
sebuah section didalam sebuah dokumen
|
|
|
<select>
|
Mendefinisikan
sebuah daftar drop-down
|
|
|
<small>
|
Mendefinisikan
teks kecil
|
|
|
<source>
|
Mendefinisikan
lebih dari satu sumber media untuk elemen media seperti (<video> dan
<audio>)
|
|
|
<span>
|
Mendefinisikan
sebuah section didalam sebuah dokumen
|
|
|
<strike>
|
Tag
ini tidak didukung pada HTML5. Gunakan <del> atau <s> sebagai
penggantinya pada HTML5. Mendefinisikan teks strikethrough
|
|
|
<strong>
|
Mendefinisikan
teks yang penting
|
|
|
<style>
|
Mendefinisikan
informasi style untuk sebuah dokumen
|
|
|
<sub>
|
Mendefinisikan
teks subscripted
|
|
|
<summary>
|
Mendefinisikan
sebuah judul yang terlihat dalam sebuah <details> element
|
|
|
<sup>
|
Mendefinisikan
teks superscripted
|
|
|
<tabel>
|
Mendefinisikan
sebuah tabel
|
|
|
<tbody>
|
Grup
isi tubuh dalam sebuah tabel
|
|
|
<td>
|
Mendefinisikan
sebuah cell didalam sebuah tabel
|
|
|
<teksarea>
|
Mendefinisikan
sebuah input control multiline atau teks area
|
|
|
<tfoot>
|
Grup
isi footer dalam sebuah tabel
|
|
|
<th>
|
Mendefinisikan
sebuah header cell didalam sebuah tabel
|
|
|
<thead>
|
Grup
header dalam sebuah tabel
|
|
|
<time>
|
Mendefinisikan
sebuah tanggal atau waktu
|
|
|
<title>
|
Mendefinisikan
sebuah title untuk dokumen
|
|
|
<tr>
|
Mendefinisikan
sebuah row didalam sebuah tabel
|
|
|
<track>
|
Mendefinisikan
trek teks untuk elemen media yang (<video> dan <audio>)
|
|
|
<tt>
|
Tag
ini tidak didukung pada HTML5. Gunakan CSS sebagai penggantinya pada
HTML5. Mendefinisikan teletype teks
|
|
|
<u>
|
Mendefinisikan
teks yang harus berbeda dari teks biasa
|
|
|
<ul>
|
Mendefinisikan
sebuah unordered list
|
|
|
<var>
|
Mendefinisikan
sebuah variable
|
|
|
<video>
|
Mendefinisikan
sebuah video atau movie
|
|
|
<wbr>
|
Mendefinisikan
sebuah kemungkinan line-break
|
|
Apa itu Atribut? Apa
yang dimaksud dengan Atribut pada Tag HTML?
Elemen, Tag dan
atribut pada HTML sebenarnya saling berkaitan, hanya saja disini atribut
memiliki tugas khusus untuk memberikan informasi atau sifat tambahan yang akan
diberikan kepada tag dan elemen yang mengandung atribut tersebut.
Bagaimana Cara
menggunakan Atribut pada Tag HTML?
Penulisan Atribut
selalu diletakan dalam <tag_pembuka> setelah nama tag, sebagai contoh: <tag_pembukaname="value">. Dari tag dan atribut tersebut yang dimaksud dengan atribut
adalah name="value". Informasi ini
berupa instruksi tambahan yang tersusun dari dua bagian yaitu atribut Name dan
atribut Value dalam penulisannya atribut value harus
ditulis diantara tanda kutip ganda atau tanda kutip tunggal.
Apa yang dimaksud
dengan atribut Name dan atribut Value?
Atribut Name adalah
nama informasi atau nama sifat apa yang akan di tambahkan kepada tag dan
elemen yang mengandung atribut tersebut. Sedangkan Atribut Value adalah
Nilai dari sebuah informasi atau nilai sifat apa yang akan di berikan
kepada tag dan elemen yang mengandung atribut tersebut.
Kapan kita harus
menggunakan tanda kutip tunggal atau tanda kutip ganda?
Dalam penggunaanya
tanda kutip tunggal dan ganda sama saja tergantung kepada programmernya
mau pilih yang mana asal konsisten, namun ada aturan pembungkusan tanda
kutip dalam beberapa kondisi ketika value dalam
atribut itu harus bernilai tanda kutip , proses pembungkusan
tersebut dapat ditulis seperti berikut ini:
<p title='isi "konten" CodePolitan'> Atau <p title="isi 'konten'
CodePolitan">
Contoh Menambahkan
Atribut dalam Tag pada HTML yang SALAH
Code :
<img
src="https://static.cdn-cdpl.com/wp-images/2016/05/Tag-dan-Atribut-pada-HTML-1.png"
width="300 height=200">
Tampilan : Perhatikan tag yang digunakan adalah tag IMG, "SRC"
disana merupakan atribut name dan "https://static.cdn-cdpl.com/wp-images/2016/05/Tag-dan-Atribut-pada-HTML-1.png"
adalah atribut value yang sudah ditulis dengan benar. Lalu
letak salahnya dimana? perhatikan penulisan atribut width pada code
diatas width="300 height=200", dengan cara penulisan seperti itu informasi tambahan yang
diberikan melalui atribut tersebut tidak dapat dibaca oleh web browser sehingga
tampil pada web browser tidak ada perubahan atau merupakan tampilan dari
ukuran yang sebenarnya.
Contoh Menambahkan Atribut
dalam Tag pada HTML yang BENAR
Code :
<img
src="https://static.cdn-cdpl.com/wp-images/2016/05/Tag-dan-Atribut-pada-HTML-1.png"
width="300" height="200">
Tampilan : Perhatikan tag yang digunakan adalah tag IMG, "SRC"
disana merupakan atribut name dan "https://static.cdn-cdpl.com/wp-images/2016/05/Tag-dan-Atribut-pada-HTML-1.png"
adalah atribut value yang sudah ditulis dengan benar.
Perhatikan penulisan atribut width pada code diatas width="300"
height="200", dengan cara
penulisan seperti ini informasi tambahan yang diberikan melalui atribut
tersebut dapat dibaca oleh web browser sehingga tampil pada web browser berubah
sesuai dengan atribut name dan atribut value yang diberikan.
Kumpulan Atribut pada
HTML yang sering digunakan
|
Atribut
|
Penjelasan
|
|
alt
|
Menentukan
teks alternatif untuk gambar, ketika gambar tidak dapat ditampilkan
|
|
disable
|
Menentukan
bahwa elemen input harus dinonaktifkan
|
|
href
|
enentukan
URL (Alamat web) untuk link
|
|
id
|
Menentukan
ID link untuk elemen
|
|
src
|
Menentukan
URL (Alamat web) untuk gambar
|
|
style
|
menentukan
style CSS inline untuk suatu elemen
|
|
title
|
Menampilkan
tool tip tentang informasi tambahan pada elemen
|
sebenarnya masih
banyak lagi atribut yang bisa digunakan pada HTML, namun tergantung kepada tag
apa yang digunakan, karena beberapa tag memiliki atribut khususnya masing-
masing.
