{"id":77,"date":"2023-06-28T12:48:11","date_gmt":"2023-06-28T12:48:11","guid":{"rendered":"https:\/\/staging.brightwhiz.com\/?post_type=topic&#038;p=77"},"modified":"2023-06-28T12:48:29","modified_gmt":"2023-06-28T12:48:29","slug":"html-url-encoding","status":"publish","type":"topic","link":"http:\/\/local.tutorials\/topic\/html-url-encoding\/","title":{"rendered":"HTML &#8211; URL Encoding"},"content":{"rendered":"\n<p>URL encoding, also known as percent-encoding, is a mechanism used to represent special characters, reserved characters, and non-ASCII characters within a URL. When working with HTML, it&#8217;s important to properly encode URLs to ensure that they are correctly interpreted by web browsers and servers. In this post, we will explore HTML URL encoding and provide a reference guide to help you encode URLs effectively.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Reserved Characters<\/h2>\n\n\n\n<p>Certain characters have special meanings in URLs and must be encoded to be included as part of the URL itself. Here are some commonly used reserved characters and their corresponding URL-encoded values:<\/p>\n\n\n\n<ul>\n<li>Space: <code>%20<\/code><\/li>\n\n\n\n<li>Ampersand (<code>&amp;<\/code>): <code>%26<\/code><\/li>\n\n\n\n<li>Plus (<code>+<\/code>): <code>%2B<\/code><\/li>\n\n\n\n<li>Question Mark (<code>?<\/code>): <code>%3F<\/code><\/li>\n\n\n\n<li>Slash (<code>\/<\/code>): <code>%2F<\/code><\/li>\n\n\n\n<li>Hash (<code>#<\/code>): <code>%23<\/code><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Non-ASCII Characters<\/h2>\n\n\n\n<p>URLs are primarily designed to handle ASCII characters. When you need to include non-ASCII characters, such as accented letters or characters from other languages, they must be encoded using UTF-8 and then percent-encoded. For example:<\/p>\n\n\n\n<ul>\n<li>\u00e9: <code>%C3%A9<\/code><\/li>\n\n\n\n<li>\u00f1: <code>%C3%B1<\/code><\/li>\n\n\n\n<li>\u6f22: <code>%E6%BC%A2<\/code><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">URL Encoding in HTML<\/h2>\n\n\n\n<p>In HTML, you can use character entities or the <code>encodeURIComponent()<\/code> JavaScript function to encode URLs. Here&#8217;s an example using character entities:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-markup\">&lt;a href=&quot;https:\/\/example.com\/search?q=coffee%20beans&amp;category=food&quot;&gt;Search for coffee beans&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<p>In the above example, the space in the query parameter is encoded as <code>%20<\/code>, and the ampersand is encoded as <code>&amp;amp;<\/code>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Common URL Encoding Examples<\/h2>\n\n\n\n<p>To help you with URL encoding, here are some common characters and their URL-encoded equivalents:<\/p>\n\n\n\n<ul>\n<li><code>:<\/code> (Colon): <code>%3A<\/code><\/li>\n\n\n\n<li><code>@<\/code> (At symbol): <code>%40<\/code><\/li>\n\n\n\n<li><code>$<\/code> (Dollar sign): <code>%24<\/code><\/li>\n\n\n\n<li><code>,<\/code> (Comma): <code>%2C<\/code><\/li>\n\n\n\n<li><code>=<\/code> (Equal sign): <code>%3D<\/code><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">JavaScript <code>encodeURIComponent()<\/code>:<\/h2>\n\n\n\n<p>In JavaScript, you can use the <code>encodeURIComponent()<\/code> function to encode a URL component. It encodes all characters except the alphanumeric characters (<code>A-Z<\/code>, <code>a-z<\/code>, <code>0-9<\/code>), hyphen (<code>-<\/code>), underscore (<code>_<\/code>), period (<code>.<\/code>), and tilde (<code>~<\/code>).<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">const searchTerm = &#039;coffee beans&#039;;\nconst encodedTerm = encodeURIComponent(searchTerm);\nconsole.log(encodedTerm); \/\/ Output: coffee%20beans<\/code><\/pre>\n\n\n\n<p>The above example demonstrates how to encode the <code>searchTerm<\/code> variable using encodeURIComponent().<\/p>\n\n\n\n<p>By properly encoding URLs, you ensure that special characters and non-ASCII characters are correctly interpreted by web browsers and servers, avoiding potential issues with URL parsing and processing.<\/p>\n\n\n\n<p>Remember to encode URLs whenever necessary, especially when including dynamic data or user input in your URLs.<\/p>\n\n\n\n<p>Example usage:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-markup\">&lt;a href=&quot;https:\/\/example.com\/search?q=coffee%20beans&amp;category=food&quot;&gt;Search for coffee beans&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<p>In the above example, the URL is properly encoded to include the space as <code>%20<\/code> and the ampersand as <code>&amp;amp;<\/code>.<\/p>\n\n\n\n<p>URL encoding is an essential aspect of web development, allowing you to work with URLs containing special characters and non-ASCII characters reliably. Use this reference guide to ensure proper encoding and improve the robustness of your web applications.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>URL encoding, also known as percent-encoding, is a mechanism used to represent special characters, reserved characters, and non-ASCII characters within a URL. When working with HTML, it&#8217;s important to properly encode URLs to ensure that they are correctly interpreted by web browsers and servers. In this post, we will explore HTML URL encoding and provide [&hellip;]<\/p>\n","protected":false},"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":[],"categories":[2],"tags":[],"subject":[7,9],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>HTML - URL Encoding Reference<\/title>\n<meta name=\"description\" content=\"URL encoding or percent-encoding, is used to represent special characters, reserved characters, and non-ASCII characters within a URL\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/local.tutorials\/topic\/html-url-encoding\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML - URL Encoding Reference\" \/>\n<meta property=\"og:description\" content=\"URL encoding or percent-encoding, is used to represent special characters, reserved characters, and non-ASCII characters within a URL\" \/>\n<meta property=\"og:url\" content=\"http:\/\/local.tutorials\/topic\/html-url-encoding\/\" \/>\n<meta property=\"og:site_name\" content=\"Brightwhiz.com Tutorials and Courses\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/brightwhiz\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-28T12:48:29+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@brightwhizmag\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"http:\/\/local.tutorials\/topic\/html-url-encoding\/\",\"url\":\"http:\/\/local.tutorials\/topic\/html-url-encoding\/\",\"name\":\"HTML - URL Encoding Reference\",\"isPartOf\":{\"@id\":\"http:\/\/local.tutorials\/#website\"},\"datePublished\":\"2023-06-28T12:48:11+00:00\",\"dateModified\":\"2023-06-28T12:48:29+00:00\",\"description\":\"URL encoding or percent-encoding, is used to represent special characters, reserved characters, and non-ASCII characters within a URL\",\"breadcrumb\":{\"@id\":\"http:\/\/local.tutorials\/topic\/html-url-encoding\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/local.tutorials\/topic\/html-url-encoding\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/local.tutorials\/topic\/html-url-encoding\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/local.tutorials\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Topics\",\"item\":\"http:\/\/local.tutorials\/topic\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"HTML &#8211; URL Encoding\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/local.tutorials\/#website\",\"url\":\"http:\/\/local.tutorials\/\",\"name\":\"Brightwhiz.com Tutorials and Courses\",\"description\":\"\",\"publisher\":{\"@id\":\"http:\/\/local.tutorials\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/local.tutorials\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"http:\/\/local.tutorials\/#organization\",\"name\":\"Brightwhiz.com\",\"url\":\"http:\/\/local.tutorials\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/local.tutorials\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/staging.brightwhiz.com\/wp-content\/uploads\/2022\/03\/brightwhiz-com-logo-orange.png\",\"contentUrl\":\"https:\/\/staging.brightwhiz.com\/wp-content\/uploads\/2022\/03\/brightwhiz-com-logo-orange.png\",\"width\":706,\"height\":135,\"caption\":\"Brightwhiz.com\"},\"image\":{\"@id\":\"http:\/\/local.tutorials\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/brightwhiz\",\"https:\/\/twitter.com\/brightwhizmag\",\"https:\/\/www.instagram.com\/glamorglaze\/\",\"https:\/\/www.pinterest.com\/sobbayi\/\",\"https:\/\/www.youtube.com\/c\/Sobbayi\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML - URL Encoding Reference","description":"URL encoding or percent-encoding, is used to represent special characters, reserved characters, and non-ASCII characters within a URL","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/local.tutorials\/topic\/html-url-encoding\/","og_locale":"en_US","og_type":"article","og_title":"HTML - URL Encoding Reference","og_description":"URL encoding or percent-encoding, is used to represent special characters, reserved characters, and non-ASCII characters within a URL","og_url":"http:\/\/local.tutorials\/topic\/html-url-encoding\/","og_site_name":"Brightwhiz.com Tutorials and Courses","article_publisher":"https:\/\/www.facebook.com\/brightwhiz","article_modified_time":"2023-06-28T12:48:29+00:00","twitter_card":"summary_large_image","twitter_site":"@brightwhizmag","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"http:\/\/local.tutorials\/topic\/html-url-encoding\/","url":"http:\/\/local.tutorials\/topic\/html-url-encoding\/","name":"HTML - URL Encoding Reference","isPartOf":{"@id":"http:\/\/local.tutorials\/#website"},"datePublished":"2023-06-28T12:48:11+00:00","dateModified":"2023-06-28T12:48:29+00:00","description":"URL encoding or percent-encoding, is used to represent special characters, reserved characters, and non-ASCII characters within a URL","breadcrumb":{"@id":"http:\/\/local.tutorials\/topic\/html-url-encoding\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/local.tutorials\/topic\/html-url-encoding\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/local.tutorials\/topic\/html-url-encoding\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/local.tutorials\/"},{"@type":"ListItem","position":2,"name":"Topics","item":"http:\/\/local.tutorials\/topic\/"},{"@type":"ListItem","position":3,"name":"HTML &#8211; URL Encoding"}]},{"@type":"WebSite","@id":"http:\/\/local.tutorials\/#website","url":"http:\/\/local.tutorials\/","name":"Brightwhiz.com Tutorials and Courses","description":"","publisher":{"@id":"http:\/\/local.tutorials\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/local.tutorials\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/local.tutorials\/#organization","name":"Brightwhiz.com","url":"http:\/\/local.tutorials\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/local.tutorials\/#\/schema\/logo\/image\/","url":"https:\/\/staging.brightwhiz.com\/wp-content\/uploads\/2022\/03\/brightwhiz-com-logo-orange.png","contentUrl":"https:\/\/staging.brightwhiz.com\/wp-content\/uploads\/2022\/03\/brightwhiz-com-logo-orange.png","width":706,"height":135,"caption":"Brightwhiz.com"},"image":{"@id":"http:\/\/local.tutorials\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/brightwhiz","https:\/\/twitter.com\/brightwhizmag","https:\/\/www.instagram.com\/glamorglaze\/","https:\/\/www.pinterest.com\/sobbayi\/","https:\/\/www.youtube.com\/c\/Sobbayi"]}]}},"_links":{"self":[{"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/topic\/77"}],"collection":[{"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/topic"}],"about":[{"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/types\/topic"}],"replies":[{"embeddable":true,"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/comments?post=77"}],"wp:attachment":[{"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/media?parent=77"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/categories?post=77"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/tags?post=77"},{"taxonomy":"subject","embeddable":true,"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/subject?post=77"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}