HTML URL Encode

❮ Previous Next ❯
Lesson 50 of 58

A URL is another word for a web address. Every time you visit a website like modafvibe.com or google.com, you are using a URL.

What is a URL?

URL stands for Uniform Resource Locator. It is the address that tells your browser where to find a specific page, image, or file on the internet.

Most people type words like “modafvibe.com” because words are easier to remember than numbers. But behind every website name is an IP address (like 192.68.20.50). The domain name system (DNS) translates the name into the number automatically.

Tip: Try typing “modafvibe.com” in your browser. The browser finds the IP address behind that name and loads the website.

URL Structure

A web address like https://modafvibe.com/html/default.asp follows this pattern:

scheme://prefix.domain:port/path/filename

Let us break down each part:

Part Example Description
Scheme https The protocol used (http, https, ftp, file)
Prefix www Subdomain (often www, but can be anything)
Domain modafvibe.com The website name
Port :80 or :443 Technical port number (usually hidden)
Path /html/ Folder location on the server
Filename default.asp The specific file being requested

Common URL Schemes

The scheme tells the browser which protocol to use. Here are the most common ones:

Scheme What It Stands For When to Use
http HyperText Transfer Protocol Regular web pages (not secure)
https Secure HTTP Secure web pages (encrypted, recommended)
ftp File Transfer Protocol Downloading or uploading files
file Local file A file on your own computer
mailto Email link Opens an email program
Tip: Always use https:// for your websites whenever possible. The “s” stands for secure. It encrypts data between your browser and the server, protecting passwords and personal information.

What is URL Encoding?

URLs can only be sent over the internet using the ASCII character set (basic letters, numbers, and a few symbols). If a URL contains special characters like spaces, exclamation marks, or non-English letters, it must be converted or “encoded” first.

For example, try typing “hello world” in the form below. Notice how the space becomes either + or %20 in the URL:

URL Encoding Demo

Common URL Encoded Characters

Here are some common characters and how they are encoded in URLs:

Character URL Encoding Description
Space %20 or + Space between words
! %21 Exclamation mark
" %22 Double quote
# %23 Hash / pound
$ %24 Dollar sign
% %25 Percent sign
& %26 Ampersand
' %27 Single quote
( %28 Left parenthesis
) %29 Right parenthesis
+ %2B Plus sign
, %2C Comma
/ %2F Forward slash
: %3A Colon
; %3B Semicolon
= %3D Equals sign
? %3F Question mark
@ %40 At symbol

Non-ASCII Character Encoding

Characters outside the basic English alphabet (like letters with accents or non-English characters) also need to be encoded. Here are some examples:

Character UTF-8 Encoding Description
€ %E2%82%AC Euro currency symbol
£ %C2%A3 Pound currency symbol
© %C2%A9 Copyright symbol
® %C2%AE Registered trademark
À %C3%80 A with grave accent
é %C3%A9 E with acute accent
ñ %C3%B1 Spanish n with tilde
ü %C3%BC U with umlaut

Complete Example: Creating Links with Encoded URLs

Here is a complete example showing how to create links with special characters in the URL:

URL Encoding Examples

Quick Summary

  • A URL (Uniform Resource Locator) is a web address.
  • URLs can only contain ASCII characters (letters, numbers, and a few symbols).
  • Special characters and spaces must be encoded.
  • Space is encoded as %20 or +.
  • URL encoding replaces non-ASCII characters with % followed by two hexadecimal digits.
  • https:// is the secure version of HTTP. Always use it when possible.
  • The browser automatically encodes URLs when you type special characters in the address bar.

What Just Happened? Let Me Explain

  • URL encoding ensures that special characters do not break the web address.
  • Without encoding, a space in a URL would be misinterpreted as the end of the address.
  • The %20 encoding tells the browser “this is a space character”.
  • When you click a link with a space in the URL, the browser automatically encodes it for you.
  • If you are building links manually (like in a search box), make sure to encode special characters.
Tip: Most programming languages have built-in functions for URL encoding. In JavaScript, use encodeURIComponent(). In PHP, use urlencode().

HTML URL Encoding Reference

Here are the key concepts we covered in this chapter:

Concept Example Description
URL Scheme https:// Protocol used to access the resource
Domain modafvibe.com The website name
Path /html/tutorial Location on the server
Space Encoding %20 Space becomes %20 in URLs
Query String ?key=value Data sent to the server
❮ Previous Next ❯
Lesson 50 of 58