Langsung ke konten utama

Macam Macam Tag dan Fungsinya dalam HTML


Tag adalah sesuatu yang digunakan untuk menandai elemen-elemen dalam suatu dokumen HTML.Tag html biasanya terdiri dari tag pembuka dan tag penutup, tag pembuka <nama tag> dan tag penutup </namatag> namun ada beberapa hanya mengunakan 1 tag dengan mengabungkan tag pembuka dan tag penutup contoh <br/> contoh tag dngan 1 tag:

1. <br/> break ganti baris
2. <hr/> membuat garis horisontal
3. <img/> menampilkan gambar

Usahakan untuk menutup semua tag. Penulisan untuk semua Tag bebas, maksudnya kita bisa menggunakan huruf besar, huruf kecil, bahkan dicampur ( tidak case sensitive ). Tapi untuk mengantisipasi standar penulisan Tag, sebaiknya kita menggunakan huruf kecil semua.
Tag dalam HTML mempunyai berbagai jenis, yaitu Tag Tag dasar, Tag Tag pemformatan, Tag Tag Computer-Output, Tag Tag Citation, Quotation, dan Definition dan masih banyak lainnya.

1. Tag Dasar

Tag awal
Kegunaan
<html>
Untuk mendefinisikan sebuah dokumen HTML.
<body>
Untuk mendefinisikan body atau isi sebuah dokumen.
<h1> sampai <h6>
Untuk mendefinisikan heading 1 sampai 6
<p>
Untuk mendefinisikan sebuah paragraf
<br>
Untuk membuat baris baru
<hr>
Untuk memisah antar bagian atau paragraf ( horizontal rule )
<!-- diakhiri dengan -->
Untuk mendefinisikan komentar dalam source code

2. Tag Pemformatan

Tag awal
Kegunaan
<b>
Definisi text yang ditebalkan
<big>
Definisi text yang besar ukuranya
<em>
Definisi text yang ditekan (miring)
<i>
Definisi text yang miring (italic)
<small>
Definisi text yang kecil ukuranya
<u>
Definisi text yang bergaris bawah
<sub>
Definisi text yang jadi subscript
<sup>
Definisi text yang jadi superscript
<ins>
Definisi text yang disisipkan
<del>
Definisi text yang dihapus bergaris tengah

3. Tag Computer Output

Tag awal
Kegunaan
<code>
Definisi text computer code
<kbd>
Definisi text keyboard
<emsamp
Definisi contoh computer code
<tt>
Definisi text teletype
<var>
Definisi variabel
<pre>
Definisi text preformated

4. Tag Citation, Quotation, Definition

Tag awal
Kegunaan
<abbr>
Definisi suatu singkatan
<acronym>
Definisi suatu akronim
<address>
Definisi penulisan alamat
<bdo>
Definisi arah penulisan
<blockquote>
Definisi quotation panjang
<q>
Definisi quotation pendek
<cite>
Definisi suatu citation
<dfn>
Definisi istilah ( term )

5. Tag Link

Tag awal
Kegunaan
<a>
Mendefinisikan suatu link

6. Tag Image

Tag awal
Kegunaan
<img>
Definisi sebuah image dalam dokumen
<map>
Definisi sebuah image map
<area>
Definisi suatu area dalam image map

7. Tag Symbol

Kode Nomor HTML
 Kode Nama HTML
 Karakter/Simbol
 Deskripsi
&#32;

Spasi
&#33;
!
 Tanda seru
&#34;
 &quot;
 "
 Kutip ganda
&#35;
#
 Simbol pagar
&#36;
$
 Simbol dollar
&#37;
%
 Simbol persen
&#38;
 &amp;
 &
 Simbol dan
&#39;
'
 Kutip satu
&#40;
(
 Kurung buka
&#41;
)
 Kurung tutup
&#42;
*
 Tanda bintang
&#43;
+
 Tanda tambah
&#44;
,
 Tanda koma
&#45;
-
 Tanda kurang
&#46;
.
 Tanda titik
&#47;
/
 Garis miring
&#48;
0
 Nol
&#49;
1
 Satu
&#50;
2
 Dua
&#51;
3
 Tiga
&#52;
4
 Empat
&#53;
5
 Lima
&#54;
6
 Enam
&#55;
7
 Tujuh
&#56;
8
 Delapan
&#57;
9
 Sembilan
&#58;
:
 Titik dua
&#59;
;
 Titik koma
&#60;
 &lt;
 <
 Kurang dari
&#61;
=
 Sama dengan
&#62;
 &gt;
 >
 Lebih dari
&#63;
?
 Tanda tanya
&#64;
@
 Simbol [at]
&#65;
A
&#66;
B
&#67;
C
&#68;
D
&#69;
E
&#70;
F
&#71;
G
&#72;
H
&#73;
I
&#74;
J
&#75;
K
&#76;
L
&#77;
M
&#78;
N
&#79;
O
&#80;
P
&#81;
Q
&#82;
R
&#83;
S
&#84;
T
&#85;
U
&#86;
V
&#87;
W
&#88;
X
&#89;
Y
&#90;
Z
&#91;
[
 Kurung siku buka
&#92;
\
 Garis miring terbalik/backslash
&#93;
]
 Kurung siku tutup
&#94;
^
 Tanda sisipan/sirkumfleksa
&#95;
_
 Garis bawah
&#96;
`
 Tanda petik
&#97;
a
&#98;
b
&#99;
c
&#100;
d
&#101;
e
&#102;
f
&#103;
g
&#104;
h
&#105;
i
&#106;
j
&#107;
k
&#108;
l
&#109;
m
&#110;
n
&#111;
o
&#112;
p
&#113;
q
&#114;
r
&#115;
s
&#116;
t
&#117;
u
&#118;
v
&#119;
w
&#120;
x
&#121;
y
&#122;
z
&#123;
{
 Kurung kurawal buka
&#124;
|
 Garis tegak/pipe
&#125;
}
 Kurung kurawal tutup
&#126;
~
 Simbol ekuivalen
&#160;
 &nbsp;
Non-breaking space
&#161;
 &iexcl;
 ¡
 Tanda seru terbalik
&#162;
 &cent;
 ¢
 Simbol sen
&#163;
 &pound;
 £
 Simbol pondsterling
&#164;
 &curren;
 ¤
 Simbol mata uang
&#165;
 &yen;
 ¥
 Simbol yen
&#166;
 &brvbar;
 ¦
 Garis tegak terputus
&#167;
 &sect;
 §
 Simbol bagian/seksi
&#168;
 &uml;
 ¨
 Titik dua di atas huruf vokal
&#169;
 &copy;
 ©
 Simbol hak cipta (Copyright)
&#170;
 &ordf;
 ª
 Indikator ordinal feminin
&#171;
 &laquo;
 «
 Panah kiri ganda
&#172;
 &not;
 ¬
 Simbol bukan
&#173;
 &shy;
 ­
 Tanda penghubung halus
&#174;
 &reg;
 ®
 Simbol merek dagang terdaftar (Registered trademark)
&#175;
 &macr;
 ¯
 Garis atas
&#176;
 &deg;
 °
 Simbol derajat
&#177;
 &plusmn;
 ±
 Simbol lebih kurang
&#178;
 &sup2;
 ²
 Pangkat dua, kuadrat, persegi
&#179;
 &sup3;
 ³
 Pangkat tiga, kubik
&#180;
 &acute;
 ´
 Aksen akut
&#181;
 &micro;
 µ
 Simbol mikro
&#182;
 &para;
Simbol pilcrow, simbol paragraf
&#183;
 &middot;
 ·
 Titik tengah, koma Georgia
&#184;
 &cedil;
 ¸
 Spasi cedilla
&#185;
 &sup1;
 ¹
 Pangkat satu
&#186;
 &ordm;
 º
 Indikator ordinal maskulin
&#187;
 &raquo;
 »
 Panah kanan ganda
&#188;
 &frac14;
 ¼
 Satu per empat
&#189;
 &frac12;
 ½
 Satu per dua, setengah
&#190;
 &frac34;
 ¾
 Tiga per empat
&#191;
 &iquest;
 ¿
 Tanda tanya terbalik
&#192;
 &Agrave;
 À
&#193;
 &Aacute;
 Á
&#194;
 &Acirc;
 Â
&#195;
 &Atilde;
 Ã
&#196;
 &Auml;
 Ä
&#197;
 &Aring;
 Å
&#198;
 &AElig;
 Æ
&#199;
 &Ccedil;
 Ç
&#200;
 &Egrave;
 È
&#201;
 &Eacute;
 É
&#202;
 &Ecirc;
 Ê
&#203;
 &Euml;
 Ë
&#204;
 &Igrave;
 Ì
&#205;
 &Iacute;
 Í
&#206;
 &Icirc;
 Î
&#207;
 &Iuml;
 Ï
&#208;
 &ETH;
 Ð
&#209;
 &Ntilde;
 Ñ
&#210;
 &Ograve;
 Ò
&#211;
 &Oacute;
 Ó
&#212;
 &Ocirc;
 Ô
&#213;
 &Otilde;
 Õ
&#214;
 &Ouml;
 Ö
&#215;
 &times;
 ×
 Simbol perkalian
&#216;
 &Oslash;
 Ø
&#217;
 &Ugrave;
 Ù
&#218;
 &Uacute;
 Ú
&#219;
 &Ucirc;
 Û
&#220;
 &Uuml;
 Ü
&#221;
 &Yacute;
 Ý
&#222;
 &THORN;
 Þ
&#223;
 &szlig;
 ß
&#224;
 &agrave;
 à
&#225;
 &aacute;
 á
&#226;
 &acirc;
 â
&#227;
 &atilde;
 ã
&#228;
 &auml;
 ä
&#229;
 &aring;
 å
&#230;
 &aelig;
 æ
&#231;
 &ccedil;
 ç
&#232;
 &egrave;
 è
&#233;
 &eacute;
 é
&#234;
 &ecirc;
 ê
&#235;
 &euml;
 ë
&#236;
 &igrave;
 ì
&#237;
 &iacute;
 í
&#238;
 &icirc;
 î
&#239;
 &iuml;
 ï
&#240;
 &eth;
 ð
&#241;
 &ntilde;
 ñ
&#242;
 &ograve;
 ò
&#243;
 &oacute;
 ó
&#244;
 &ocirc;
 ô
&#245;
 &otilde;
 õ
&#246;
 &ouml;
 ö
&#247;
 &divide;
 ÷
 Simbol pembagian
&#248;
 &oslash;
 ø
&#249;
 &ugrave;
 ù
&#250;
 &uacute;
 ú
&#251;
 &ucirc;
 û
&#252;
 &uuml;
 ü
&#253;
 &yacute;
 ý
&#254;
 &thorn;
 þ
&#255;
 &yuml;
 ÿ
&#338;
 &OElig;
 Œ
&#339;
 &oelig;
 œ
&#352;
 &Scaron;
 Š
&#353;
 &scaron;
 š
&#376;
 &Yuml;
 Ÿ
&#402;
 &fnof;
 ƒ
&#710;
 &circ;
 ˆ
&#732;
 &tilde;
 ˜
&#913;
 &Alpha;
 Α
 Alpha
&#914;
 &Beta;
 Β
 Beta
&#915;
 &Gamma;
 Γ
 Gamma
&#916;
 &Delta;
 Δ
 Delta
&#917;
 &Epsilon;
 Ε
 Epsilon
&#918;
 &Zeta;
 Ζ
 Zeta
&#919;
 &Eta;
 Η
 Eta
&#920;
 &Theta;
 Θ
 Theta
&#921;
 &Iota;
 Ι
 Iota
&#922;
 &Kappa;
 Κ
 Kappa
&#923;
 &Lambda;
 Λ
 Lambda
&#924;
 &Mu;
 Μ
 Mu
&#925;
 &Nu;
 Ν
 Nu
&#926;
 &Xi;
 Ξ
 Xi
&#927;
 &Omicron;
 Ο
 Omicron
&#928;
 &Pi;
 Π
 Pi
&#929;
 &Rho;
 Ρ
 Rho
&#931;
 &Sigma;
 Σ
 Sigma
&#932;
 &Tau;
 Τ
 Tau
&#933;
 &Upsilon;
 Υ
 Upsilon
&#934;
 &Phi;
 Φ
 Phi
&#935;
 &Chi;
 Χ
 Chi
&#936;
 &Psi;
 Ψ
 Psi
&#937;
 &Omega;
 Ω
 Omega
&#945;
 &alpha;
 α
 alpha
&#946;
 &beta;
 β
 beta
&#947;
 &gamma;
 γ
 gamma
&#948;
 &delta;
 δ
 delta
&#949;
 &epsilon;
 ε
 epsilon
&#950;
 &zeta;
 ζ
 zeta
&#951;
 &eta;
 η
 eta
&#952;
 &theta;
 θ
 theta
&#953;
 &iota;
 ι
 iota
&#954;
 &kappa;
 κ
 kappa
&#955;
 &lambda;
 λ
 lambda
&#956;
 &mu;
 μ
 mu
&#957;
 &nu;
 ν
 nu
&#958;
 &xi;
 ξ
 xi
&#959;
 &omicron;
 ο
 omicron
&#960;
 &pi;
 π
 pi
&#961;
 &rho;
 ρ
 rho
&#962;
 &sigmaf;
 ς
 sigmaf
&#963;
 &sigma;
 σ
 sigma
&#964;
 &tau;
 τ
 tau
&#965;
 &upsilon;
 υ
 upsilon
&#966;
 &phi;
 φ
 phi
&#967;
 &chi;
 χ
 chi
&#968;
 &psi;
 ψ
 psi
&#969;
 &omega;
 ω
 omega
&#977;
 &thetasym;
 ϑ
 Simbol theta
&#978;
 &upsih;
 ϒ
 Simbol upsilon
&#982;
 &piv;
 ϖ
 Simbol pi
&#8194;
 &ensp;
  
 Spasi en
&#8195;
 &emsp;
  
 Spasi em
&#8201;
 &thinsp;
  
 Spasi tipis
&#8204;
 &zwnj;
 ‌
 Zero width non-joiner
&#8205;
 &zwj;
 ‍
 Zero width joiner
&#8206;
 &lrm;
 ‎
 Tanda kiri ke kanan
&#8207;
 &rlm;
 ‏
 Tanda kanan ke kiri
&#8211;
 &ndash;
 –
 Garis en
&#8212;
 &mdash;
 —
 Garis em
&#8216;
 &lsquo;
 ‘
 Kutip kiri tunggal
&#8217;
 &rsquo;
 ’
 Kutip kanan tunggal
&#8218;
 &sbquo;
 ‚
 Kutip rendah tunggal
&#8220;
 &ldquo;
 “
 Kutip kiri ganda
&#8221;
 &rdquo;
 ”
 Kutip kanan ganda
&#8222;
 &bdquo;
 „
 Kutip rendah ganda
&#8224;
 &dagger;
 †
 Salib
&#8225;
 &Dagger;
 ‡
 Salib ganda
&#8226;
 &bull;
 •
 Peluru
&#8230;
 &hellip;
 …
 Ellipsis horisontal
&#8240;
 &permil;
 ‰
 Per mil
&#8242;
 &prime;
 ′
 Menit
&#8243;
 &Prime;
 ″
 Detik
&#8249;
 &lsaquo;
 ‹
 Panah kiri tunggal
&#8250;
 &rsaquo;
 ›
 Panah kanan tunggal
&#8254;
 &oline;
 ‾
 Garis atas
&#8364;
 &euro;
 €
 Simbol Euro
&#8482;
 &trade;
 ™
 Merek dagang
&#8592;
 &larr;
 ←
 Panah kiri
&#8593;
 &uarr;
 ↑
 Panah atas
&#8594;
 &rarr;
 →
 Panah kanan
&#8595;
 &darr;
 ↓
 Panah bawah
&#8596;
 &harr;
 ↔
 Panah kiri kanan
&#8629;
 &crarr;
 ↵
 Simbol Enter/Carriage return
&#8704;
 &forall;
 ∀
&#8706;
 &part;
 ∂
&#8707;
 &exist;
 ∃
&#8709;
 &empty;
 ∅
&#8711;
 &nabla;
 ∇
&#8712;
 &isin;
 ∈
&#8713;
 &notin;
 ∉
&#8715;
 &ni;
 ∋
&#8719;
 &prod;
 ∏
&#8721;
 &sum;
 ∑
&#8722;
 &minus;
 −
&#8727;
 &lowast;
 ∗
&#8730;
 &radic;
 √
&#8733;
 &prop;
 ∝
&#8734;
 &infin;
 ∞
&#8736;
 &ang;
 ∠
&#8743;
 &and;
 ∧
&#8744;
 &or;
 ∨
&#8745;
 &cap;
 ∩
&#8746;
 &cup;
 ∪
&#8747;
 &int;
 ∫
&#8756;
 &there4;
 ∴
&#8764;
 &sim;
 ∼
&#8773;
 &cong;
 ≅
&#8776;
 &asymp;
 ≈
&#8800;
 &ne;
 ≠
&#8801;
 &equiv;
 ≡
&#8804;
 &le;
 ≤
&#8805;
 &ge;
 ≥
&#8834;
 &sub;
 ⊂
&#8835;
 &sup;
 ⊃
&#8836;
 &nsub;
 ⊄
&#8838;
 &sube;
 ⊆
&#8839;
 &supe;
 ⊇
&#8853;
 &oplus;
 ⊕
&#8855;
 &otimes;
 ⊗
&#8869;
 &perp;
 ⊥
&#8901;
 &sdot;
 ⋅
&#8968;
 &lceil;
 ⌈
&#8969;
 &rceil;
 ⌉
&#8970;
 &lfloor;
 ⌊
&#8971;
 &rfloor;
 ⌋
&#9674;
 &loz;
 ◊
&#9824;
 &spades;
 ♠
&#9827;
 &clubs;
 ♣
&#9829;
 &hearts;
 ♥
&#9830;
 &diams;
 ♦

Sumber:
http://rijal007.blogspot.co.id/2012/07/macam-macam-tag-dan-fungsinya-dalam-html_18.html
http://elabee.me/artikel/kode-html-karakter-dan-simbol-khusus
Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Loop/Perulangan For dan Foreach

1.   Apakah loop itu? Coding terkadang bisa menjadi sebuah perkerjaan yang melelahkan, dan terkadang dikarenakan kita harus melakukan sebuah hal yang sama berkali-kali. Contohnya ketika kita ingin menuliskan tahun kabisat, mungkin anda berpikir untnuk melakukannya seperti berikut: echo 2004; echo 2008; echo 2012; // dan seterusnya Tapi ada cara yang lebih baik! Loop (pengulangan) adalah sepotong code yang berguna untuk mengulang sederet instruksi untuk anda. Sebagai contoh, jika kita ingin menuliskan echo berkali-kali seperti contoh diatas, kita bisa menggunakan code disamping kanan. Contoh: for ($tahun = 2004; $tahun < 2050; $tahun = $tahun + 4) {   echo $tahun . "\n"; } 2.   Syntax dari For Keren kan? Sekarang mari kita perhatikan syntaxnya. Disini adalah contoh yang akan mencetak angka dari satu hingga 9: for ($i = 0; $i < 10; $i++) {     echo $i; } Sebuah loop for dimulai dengan for . Ini memberitahukan PHP untuk bersi
Posting Komentar
Baca selengkapnya

Hak Akses direktori atau Folder /var/www/ php di Ubuntu

Hak Akses direktori atau Folder /var/www/ php adalat tempat Untuk menyimpan atau menjalankan file PHP di Linux kita harus menyimpannya di folder /var/www, tentunya kita tidak dengan mudah membuat file atau folder di www seperti kita memakai easyphp,xampp, dll yg biasa kita jalankan di windus. Tapi dengan sedikit kemampuan mencari-cari tutorial tentang php di Linux via oM google, akhirnya dapat juga cara untuk dapat mengakses file tersebut. Kita dapat mengakses atau membuat folder dengan mudah di /var/www/ dengan cara : Buka terminal yang ada di Applications->Accessories->Terminal atau ctrl+alt+t ketikkan sudo su chmod 777 -R /var/www/ masukkan password anda sekian postingan tentang membuka hak akses di php
Posting Komentar
Baca selengkapnya

Array Lanjutan

Array asosiatif Array asosiatif adalah array yang tidak menggunakan angka sebagai kunci di setiap nilainya. Jika tidak ditentukan kunci dari sebuah elemen di array, PHP akan otomatis memberikan kuncinya berupa angka. Lihat code di samping. Kami telah mendeklarasikan dua variabel sebagai array. Apakah anda bisa menebak array mana yang merupakan array asosiatif? Betul, $array_saya adalah array asosiatif. Kedua array tersebut memiliki isi yang sama. Perbedaannya adalah bagaimana kita mengakses elemen-elemen di array tersebut. Contoh: // membuat array biasa $array_kamu = array(1610, 'VOC Belanda', 350); // membuat array asosiatif $array_saya = array( 'tahun' => 1610, 'organisasi' => 'VOC Belanda', 'total' => 350); // cara mencetak array biasa echo $array_kamu[0]; echo "\n"; echo $array_kamu[1]; echo "\n"; // cara mencetak array asosiatif echo $array_saya[ 'tahun&#
Posting Komentar
Baca selengkapnya