Daftar URL Encoding pada HTML

Sebuah Uniform Resource Locator (URL) secara sederhana adalah sebuah alamat dari situs untuk mengakses konten website. Tetapi hanya beberapa karakter yang diperbolehkan untuk digunakan pada URL seperti alpabet A-Z dan a-z, angka 0-9 dan beberapa karakter khusus. Karakter-karakter tersebut dapat dipergunakan sebagaimana bentuknya tetapi, beberapa karakter lain yang tidak disebutkan baru bisa digunakan sebagai URL apabila diubah sebagai encoding karakter. URL encoding adalah proses konversi URL menjadi sebuah format yang valid yang dapat dikenali atau diterima oleh web browser. URL encoding berfungsi sebagai pengambil tempat atau pengganti semua karakter yang tidak diperbolehkan pada url dengan tanda '%' yang diikuti dengan digit hexadecimal. Dua nilai hexadecimal merepresentasikan nilai numerik dari karakter pada sekumpulan karakter ASCII. Contohnya tanda space pada keyboard tidak bisa digunakan sebagai alamat url dan harus diganti dengan '%20' atau tanda '+' ketika encoding. Sama halnya dengan tanda '$' yang diganti dengan '%24'.

Ilustrasi URL Encoding HTML

Sebelum memahami lebih dalam materi tentang Daftar URL Encoding pada HTML, terlebih dahulu pelajari materi tentang: Tag Usang Deprecated pada HTML [klik], Membuat Hyperlink pada HTML [klik], dan Membuat Komentar Dengan HTML [klik].

Karakter terbalik: Terdapat beberapa karakter yang terkadang memiliki makna khusus pada URL dan dapat digunakan dengan dua cara. Contohnya karakter '/' adalah reserved karakter dan memiliki arti khusus jika tetap digunakan dalam bentuk delimeter '/' yang berfungsi untuk memilisahkan path dari URL. Jika diubah dalam bentuk encoding menjadi '%2F'.

Baca Juga:

• 5 Contoh Program Penggunaan SVG Dasar pada HTML [klik]
• 10 Bentuk Ilustrasi yang Sering Dibuat Menggunakan Canvas pada HTML [klik]
• 7 Contoh Penggunaan Elemen Kode Komputer pada HTML [klik]
• 46 Karakter Utama Entitas Reserved pada HTML [klik]

Terdapat banyak sekali reserved karakter seperti terdapat pada list tabel 1 berikut ini:

Tabel 1 Karekter Reserved

Character	Encoded Form
!	%21
*	%2A
‘	%27
(	%28
)	%29
;	%3B
:	%3A
@	%40
&	%26
=	%3D
+	%2B
$	%24
,	%2C
/	%2F
?	%3F
#	%23
[	%5B
]	%5D

Beberapa karakter ada yang harus digunakan dalam bentuk encoding sementara beberapa lainnya ada yang tidak perlu. Berikut ini memperlihatkan klasifikasi dari kelompok karakter yang harus dilakukan encoding.

• safe karakter: Alfanumerik 0-9, a-z dan A-Z, spesial karakter $, -, _, ., +, !, *, ‘, (, ), dan reserved karakter digunakan untuk tujuan cadangan. Karakter ini tidak terlalu dibutuhkan untuk dilakukan encoding.
• ASCII karakter kontrol: karakter ini antara 00-1F dalam hex (0-31 decimal) dan 7F (127 decimal). Karakter-karakter ini perlu dilakukan encoding.
• Non-ASCII karakter kontrol: termasuk 80-FF dalam hex (128-255 decimal). Karakter-karakter ini perlu dilakukan encoding.
• Reserved karakter: karakter ini digunakan untuk tujuan khusus dan memerlukan encoding.
• Karakter unsafe: karakter ini rentan mengalami kesalahpahaman pada URL karena berbagai alasan sehingga memerlukan encoding. Karakter '<' dan '>' termasuk tidak aman (unsafe) karena digunakan sebagai delimeter pada URL dalam text bebas, serta qoute mark(" ") juga termasuk tidak aman karena digunakan untuk URL pada beberapa sistem.

Berikut ini diberikan daftar karakter unsafe diperlihatkan pada tabel 2:

Tabel 2 Karakter Unsafe

Character	Encoded Form
space	%20
“	%22
<	%3C
>	%3E
#	%23
%	%25
{	%7B
}	%7D
|	%7C
\	%5C
^	%5E
~	%7E
[	%5B
]	%5D

Daftar lengkap karakter-karakter encoding URL diperlihatkan pada tabel 3 sebagai berikut:

Tabel 3 Karakter URL Encoding

CHARACTER	ENCODED FORM
backspace	%08
tab	%09
linefeed	%0A
c return	%0D
space	%20
!	%21
“	%22
#	%23
$	%24
%	%25
&	%26
‘	%27
(	%28
)	%29
*	%2A
+	%2B
,	%2C
–	%2D
.	%2E
/	%2F
0	%30
1	%31
2	%32
3	%33
4	%34
5	%35
6	%36
7	%37
8	%38
9	%39
:	%3A
;	%3B
<	%3C
=	%3D
>	%3E
?	%3F
@	%40
A	%41
B	%42
C	%43
D	%44
E	%45
F	%46
G	%47
H	%48
I	%49
J	%4A
K	%4B
L	%4C
M	%4D
N	%4E
O	%4F
P	%50
Q	%51
R	%52
S	%53
T	%54
U	%55
V	%56
W	%57
X	%58
Y	%59
Z	%5A
[	%5B
\	%5C
]	%5D
^	%5E
_	%5F
`	%60
a	%61
b	%62
c	%63
d	%64
e	%65
f	%66
g	%67
h	%68
i	%69
j	%6A
k	%6B
l	%6C
m	%6D
n	%6E
o	%6F
p	%70
q	%71
r	%72
s	%73
t	%74
u	%75
v	%76
w	%77
x	%78
y	%79
z	%7A
{	%7B
|	%7C
}	%7D
~	%7E
	%7F
`	%E2%82%AC
	%81
‚	%E2%80%9A
ƒ	%C6%92
„	%E2%80%9E
…	%E2%80%A6
†	%E2%80%A0
‡	%E2%80%A1
ˆ	%CB%86
‰	%E2%80%B0
Š	%C5%A0
‹	%E2%80%B9
Œ	%C5%92
	%C5%8D
Ž	%C5%BD
	%8F
	%C2%90
‘	%E2%80%98
’	%E2%80%99
“	%E2%80%9C
”	%E2%80%9D
•	%E2%80%A2
–	%E2%80%93
—	%E2%80%94
˜	%CB%9C
™	%E2%84
š	%C5%A1
›	%E2%80
œ	%C5%93
	%9D
ž	%C5%BE
Ÿ	%C5%B8
	%C2%A0
¡	%C2%A1
¢	%C2%A2
£	%C2%A3
¤	%C2%A4
¥	%C2%A5
¦	%C2%A6
§	%C2%A7
¨	%C2%A8
©	%C2%A9
ª	%C2%AA
«	%C2%AB
¬	%C2%AC
­	%C2%AD
®	%C2%AE
¯	%C2%AF
°	%C2%B0
±	%C2%B1
²	%C2%B2
³	%C2%B3
´	%C2%B4
µ	%C2%B5
¶	%C2%B6
·	%C2%B7
¸	%C2%B8
¹	%C2%B9
º	%C2%BA
»	%C2%BB
¼	%C2%BC
½	%C2%BD
¾	%C2%BE
¿	%C2%BF
À	%C3%80
Á	%C3%81
Â	%C3%82
Ã	%C3%83
Ä	%C3%84
Å	%C3%85
Æ	%C3%86
Ç	%C3%87
È	%C3%88
É	%C3%89
Ê	%C3%8A
Ë	%C3%8B
Ì	%C3%8C
Í	%C3%8D
Î	%C3%8E
Ï	%C3%8F
Ð	%C3%90
Ñ	%C3%91
Ò	%C3%92
Ó	%C3%93
Ô	%C3%94
Õ	%C3%95
Ö	%C3%96
×	%C3%97
Ø	%C3%98
Ù	%C3%99
Ú	%C3%9A
Û	%C3%9B
Ü	%C3%9C
Ý	%C3%9D
Þ	%C3%9E
ß	%C3%9F
à	%C3%A0
á	%C3%A1
â	%C3%A2
ã	%C3%A3
ä	%C3%A4
å	%C3%A5
æ	%C3%A6
ç	%C3%A7
è	%C3%A8
é	%C3%A9
ê	%C3%AA
ë	%C3%AB
ì	%C3%AC
í	%C3%AD
î	%C3%AE
ï	%C3%AF
ð	%C3%B0
ñ	%C3%B1
ò	%C3%B2
ó	%C3%B3
ô	%C3%B4
õ	%C3%B5
ö	%C3%B6
÷	%C3%B7
ø	%C3%B8
ù	%C3%B9
ú	%C3%BA
û	%C3%BB
ü	%C3%BC
ý	%C3%BD
þ	%C3%BE
ÿ	%C3%BF

Referensi Tambahan:

• 11 Fitur Utama pada Pengenalan HTML5 [klik]
• Cara Sederhana Menggunakan Tag Article pada HTML5 [klik]
• Cara Mudah Mendeskripsikan Objek Menggunakan Tag Aside pada HTML5 [klik]
• Cara Membuat Teks Bidireksional Menggunakan Tag Tag Bdi HTML5 [klik]
• 2 Contoh Cara Memberikan Informasi Tambahan Menggunakan Tag Details HTML5 [klik]
• Cara Sederhana Menambahkan Kotak Dialog pada HTML5 [klik]
• 2 Contoh Cara Mudah Mengatur Figcaption HTML5 [klik]

Artikel ini didedikasikan kepada: Anisa Nurul Firdaus, Ardima Miftaqul Aini, Asti Pangestu, Ayu Putri Kurniasari, dan Bagas Adi Pamungkas.