In this article, we will learn about HTML URL Encoding in detail. HTML URL is an acronym of Uniform Resource Locator to global or IP address on the World Wide Web. The web server gets the page using the URL for the web browser.
Example:?https://www.google.com is one of the URLs.
ASCII character set is important for HTML URL Encoding. URL is sent to the internet using the ASCII Character set. Non-ASCII character is restricted because they may create conflict in finding the page path to the server. Because of this problem, HTML uses URL Encoding.
HTML URL Encoding converts the Non-ASCII character into a format that can send to the internet. Users can be converted using “%” to continue with two hexadecimal digits.
How to Perform URL Encoding in HTML?
- HTML language creates URL using tag and href attribute. For Example, . Write the file name if you make any website and want to go from one page to another. .
- Some characters are restricted to web address names because of conflict creation; non-ascii character replaces with “% ” to continue with two hexadecimal digits.
- URL does not hold space. It takes the place of the plus sign (+) or %20. In the form of the HTML page, space occurs in the “input” text output, then plus sign shows. Indirectly space occurred in a URL name, then %20 shows.
- URL tags contain uppercase letters(A- Z), lowercase letters(a- z), decimal digits(1-9), and some special characters.
If I put space in the form, then the URL Encoding comes as HTML+CSS.
<a href="my file.html">
If we give space in any URL, URL Encoding will occur as my%20file.html.
- Reserved Characters: There are some characters with some meaning in the URL address, and we can use naming purposes. We can use both ways, like plus (/) sign used for a separate URL part. Another hand, we can / encode by %2f without meaning in the name of the address.
- Unsafe Characters: Many characters misunderstand the URL address, like space in the URL name. Instead of take space in URL address name , write . Then the URL name seems “pa ge.html”.
- Non-ASCII Control Characters: These Characters Include the Set of An 80-Ff Hex Value, Which Is a Need to Convert in Format.
- ASCII Control Characters: There Are Not Working Inside of the URL.
Examples of HTML URL Encoding
Following are the examples of HTML URL Encoding explained in detail:
1. Reserved Characters Encoding
Following is the Table Utilized for Encoding Reserved Characters.
|
$ | & | + | , | / | : | ; | = | ? | @ | ||||||||||||||||||||||
URL Encode | 24% | 26% | %2b | %2c | %2f | %3a | %3b | %3d | %3f | 40% |
Characters | space | “ | < | > | # | % | { | } | | | ^ | ~ | [ | ] | |
URL Encode | 20% | 22% | %3c | %3e | 23% | 25% | %7b | %7d | %7c | %5c | %5e | %7e | %5b | %5d |
Characters | space | “ | < | > | # | % | { | } | | | ^ | ~ | [ | ] | |
URL Encode | 20% | 22% | %3c | %3e | 23% | 25% | %7b | %7d | %7c | %5c | %5e | %7e | %5b | %5d |
3.?Non-ASCII Control Character
Following is the Table Utilized for Encoding Non-ASCII Characters.
Character | URL Encode | Character | URL Encode | Character | URL Encode | Character | URL Encode |
€ | %80 | ? | %98 | ? | %ab | ? | %bf |
? | %82 | ? | %99 | ? | %ac | à | %c0 |
? | %83 | ? | %9a | - a | %aa | á | %c1 |
? | %84 | ? | %9b | ? | %ae | ? | %c2 |
… | %85 | ? | %9c | ˉ | %af | ? | %c3 |
? | %86 | ? | %9d | ° | %b0 | ? | %c4 |
? | %87 | ? | %9e | ± | %b1 | ? | %c5 |
? | %88 | ? | %9f | 2 | %b2 | ? | %v6 |
‰ | %89 | ?× | %d7 | 3 | %b3 | ? | %c7 |
? | %8a | ? | %a1 | ′ | %b4 | è | %c8 |
? | %8b | ¢ | %a2 | μ | %b5 | é | %c9 |
? | %8c | £ | %a3 | ? | %b6 | ê | %ca |
? | %8e | ¤ | %a4 | · | %b7 | ? | %cb |
‘ | %91 | ¥ | %a5 | ? | %b8 | ì | %cc |
’ | %92 | | | %a6 | 1 | %b9 | í | %cd |
“ | %93 | § | %a7 | o | %ba | ? | %ce |
” | %94 | ¨ | %a8 | ? | %bb | ? | %cf |
? | %95 | ? | %a9 | ? | %bc | D | %d0 |
– | %96 | — | %97 | ? | %bd | ? | %d1 |
? | %e3 | T | %de | ? | %be | ò | %d2 |
? | %e6 | ? | %df | ? | %d8 | ó | %d3 |
? | %e4 | à | %e0 | Y | %dd | ? | %d4 |
4. ASCII Control Characters
Following is the Table Utilized for Encoding Ascii Characters.
ASCII Character | URL-Encoding |
NUL – null character | %00 |
SOH – the start of the header | %01 |
STX – the start of the text | %02 |
ETX – end of the text | %03 |
EOT – end of the transmission | %04 |
ENQ – enquiry | %05 |
ACK – acknowledge | %06 |
BEL – bell (ring) | %07 |
BS – backspace | %08 |
HT- horizontal tab | %09 |
LF- line feed | %0A |
VT- vertical tab | %0B |
FF- form feed | %0C |
CR- carriage return | %0D |
SO- shift out | %0E |
SI- shift in | %0F |
DLE- data link escape | %10 |
DC1- device control 1 | %11 |
DC2- device control 2 | %12 |
DC3- device control 3 | %13 |
DC4- device control 4 | %14 |
NAK- negative acknowledge | %15 |
SYN- synchronize | %16 |
ETB- end transmission block | %17 |
CAN- cancel | %18 |
EM – end of medium | %19 |
SUB- substitute | %1A |
ESC- escape | %1B |
FS -file separator | %1C |
GS- group separator | %1D |
RS- record separator | %1E |
US- unit separator | %1F |
Importance of URL Encoding in HTML
If the URL is reserved, Unsafe, and Not ASCII Characters, the URL address becomes more complicated and ununderstandable. When a web browser searches URL addresses, the Web Server searches the name or path of the URL. If the URL name is not ASCII, finding the URL Importance of URL Encoding in HTML is difficult.
URL address must be easy to find, universally accepted, and understandable for all web browsers and servers. Some characters misunderstand URL because they are used for some purpose if it is not used for any purpose. That time conflict might have occurred, and the path does not reach the user.
To overcome all difficulties and make it easy to use Non-ASCII characters converted into ASCII code using % to come up with two hexadecimal.
Conclusion
URL Encoding in HTML knows how to convert the Non-ASCII set of characters to a valid ASCII set of format. It is universally accepted, and a web browser works without any errors. Encoding URLs can be run quickly and safely. To avoid conflict between naming and the purpose of naming, URL encoding is necessary.
The above is the detailed content of HTML URL Encoding. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

The web page structure needs to be supported by core HTML elements. 1. The overall structure of the page is composed of , , which is the root element, which stores meta information and displays the content; 2. The content organization relies on title (-), paragraph () and block tags (such as ,) to improve organizational structure and SEO; 3. Navigation is implemented through and implemented, commonly used organizations are linked and supplemented with aria-current attribute to enhance accessibility; 4. Form interaction involves , , and , to ensure the complete user input and submission functions. Proper use of these elements can improve page clarity, maintenance and search engine optimization.

When using HTML5SSE, the methods to deal with reconnection and errors include: 1. Understand the default reconnection mechanism. EventSource retrys 3 seconds after the connection is interrupted by default. You can customize the interval through the retry field; 2. Listen to the error event to deal with connection failure or parsing errors, distinguish error types and execute corresponding logic, such as network problems relying on automatic reconnection, server errors manually delay reconnection, and authentication failure refresh token; 3. Actively control the reconnection logic, such as manually closing and rebuilding the connection, setting the maximum number of retry times, combining navigator.onLine to judge network status to optimize the retry strategy. These measures can improve application stability and user experience.

Doctype is a statement that tells the browser which HTML standard to use to parse the page. Modern web pages only need to be written at the beginning of the HTML file. Its function is to ensure that the browser renders the page in standard mode rather than weird mode, and must be located on the first line, with no spaces or comments in front of it; there is only one correct way to write it, and it is not recommended to use old versions or other variants; other such as charset, viewport, etc. should be placed in part.

Client-sideformvalidationcanbedonewithoutJavaScriptbyusingHTMLattributes.1)Userequiredtoenforcemandatoryfields.2)ValidateemailsandURLswithtypeattributeslikeemailorurl,orusepatternwithregexforcustomformats.3)Limitvaluesusingmin,max,minlength,andmaxlen

Use tags in HTML to group options in the drop-down menu. The specific method is to wrap a group of elements and define the group name through the label attribute, such as: 1. Contains options such as apples, bananas, oranges, etc.; 2. Contains options such as carrots, broccoli, etc.; 3. Each is an independent group, and the options within the group are automatically indented. Notes include: ① No nesting is supported; ② The entire group can be disabled through the disabled attribute; ③ The style is restricted and needs to be beautified in combination with CSS or third-party libraries; plug-ins such as Select2 can be used to enhance functions.

To use HTML button elements to achieve clickable buttons, you must first master its basic usage and common precautions. 1. Create buttons with tags and define behaviors through type attributes (such as button, submit, reset), which is submitted by default; 2. Add interactive functions through JavaScript, which can be written inline or bind event listeners through ID to improve maintenance; 3. Use CSS to customize styles, including background color, border, rounded corners and hover/active status effects to enhance user experience; 4. Pay attention to common problems: make sure that the disabled attribute is not enabled, JS events are correctly bound, layout occlusion, and use the help of developer tools to troubleshoot exceptions. Master this

HTML5, CSS and JavaScript should be efficiently combined with semantic tags, reasonable loading order and decoupling design. 1. Use HTML5 semantic tags, such as improving structural clarity and maintainability, which is conducive to SEO and barrier-free access; 2. CSS should be placed in, use external files and split by module to avoid inline styles and delayed loading problems; 3. JavaScript is recommended to be introduced in front, and use defer or async to load asynchronously to avoid blocking rendering; 4. Reduce strong dependence between the three, drive behavior through data-* attributes and class name control status, and improve collaboration efficiency through unified naming specifications. These methods can effectively optimize page performance and collaborate with teams.

It is more convenient to submit form data using HTML5's FormData API. 1. It can automatically collect form fields with name attribute or manually add data; 2. It supports submission in multipart/form-data format through fetch or XMLHttpRequest, which is suitable for file upload; 3. When processing files, you only need to append the file to FormData and send a request; 4. Note that the same name field will be overwritten, and JSON conversion and no nesting structure need to be handled.
