[{"data":1,"prerenderedAt":1101},["ShallowReactive",2],{"guide-html-encoding-vs-url-encoding":3},{"id":4,"title":5,"body":6,"date":1093,"description":1094,"extension":1095,"meta":1096,"navigation":81,"path":1097,"readingTime":91,"seo":1098,"stem":1099,"__hash__":1100},"guides\u002Fguides\u002Fhtml-encoding-vs-url-encoding.md","HTML Encoding vs URL Encoding: When to Use Each",{"type":7,"value":8,"toc":1077},"minimark",[9,14,18,21,25,33,121,140,144,155,245,258,262,365,369,374,384,446,459,493,503,507,510,587,591,594,655,661,665,671,751,758,839,843,846,997,1000,1004,1026,1030,1050,1054,1057,1073],[10,11,13],"h2",{"id":12},"two-encoding-systems-one-document","Two Encoding Systems, One Document",[15,16,17],"p",{},"Web pages are full of URLs. URLs often appear inside HTML attributes. That means a single string might pass through two different encoding layers — HTML entity encoding and URL percent-encoding — before it reaches the browser.",[15,19,20],{},"Understanding where each encoding applies prevents broken links, malformed markup, and security vulnerabilities.",[10,22,24],{"id":23},"what-is-html-encoding","What Is HTML Encoding?",[15,26,27,28,32],{},"HTML encoding (entity encoding) replaces characters that have special meaning in HTML with entity codes. Its job is to protect the ",[29,30,31],"strong",{},"HTML parser"," from misinterpreting data as markup.",[34,35,40],"pre",{"className":36,"code":37,"language":38,"meta":39,"style":39},"language-html shiki shiki-themes github-light github-dark","\u003C!-- Without encoding: broken markup -->\n\u003Cp>5 > 3 & 2 \u003C 4\u003C\u002Fp>\n\n\u003C!-- With encoding: safe content -->\n\u003Cp>5 > 3 & 2 < 4\u003C\u002Fp>\n","html","",[41,42,43,52,76,83,89],"code",{"__ignoreMap":39},[44,45,48],"span",{"class":46,"line":47},"line",1,[44,49,51],{"class":50},"sJ8bj","\u003C!-- Without encoding: broken markup -->\n",[44,53,55,59,62,65,68,71,73],{"class":46,"line":54},2,[44,56,58],{"class":57},"sVt8B","\u003C",[44,60,15],{"class":61},"s9eBZ",[44,63,64],{"class":57},">5 > 3 & 2 ",[44,66,58],{"class":67},"s7hpK",[44,69,70],{"class":57}," 4\u003C\u002F",[44,72,15],{"class":61},[44,74,75],{"class":57},">\n",[44,77,79],{"class":46,"line":78},3,[44,80,82],{"emptyLinePlaceholder":81},true,"\n",[44,84,86],{"class":46,"line":85},4,[44,87,88],{"class":50},"\u003C!-- With encoding: safe content -->\n",[44,90,92,94,96,99,103,106,109,112,115,117,119],{"class":46,"line":91},5,[44,93,58],{"class":57},[44,95,15],{"class":61},[44,97,98],{"class":57},">5 ",[44,100,102],{"class":101},"sj4cs",">",[44,104,105],{"class":57}," 3 ",[44,107,108],{"class":101},"&",[44,110,111],{"class":57}," 2 ",[44,113,114],{"class":101},"<",[44,116,70],{"class":57},[44,118,15],{"class":61},[44,120,75],{"class":57},[15,122,123,124,126,127,126,130,126,133,126,136,139],{},"Key targets: ",[41,125,58],{},", ",[41,128,129],{},">",[41,131,132],{},"&",[41,134,135],{},"\"",[41,137,138],{},"'",".",[10,141,143],{"id":142},"what-is-url-encoding","What Is URL Encoding?",[15,145,146,147,150,151,154],{},"URL encoding (percent-encoding) replaces characters that are unsafe or reserved in URIs with ",[41,148,149],{},"%XX"," sequences. Its job is to protect the ",[29,152,153],{},"URL parser"," from misinterpreting data as URL structure.",[34,156,160],{"className":157,"code":158,"language":159,"meta":39,"style":39},"language-javascript shiki shiki-themes github-light github-dark","\u002F\u002F Without encoding: broken query\n\u002Fapi\u002Fsearch?q=hello world&page=2\n\n\u002F\u002F With encoding: safe URL\n\u002Fapi\u002Fsearch?q=hello%20world&page=2\n","javascript",[41,161,162,167,203,207,212],{"__ignoreMap":39},[44,163,164],{"class":46,"line":47},[44,165,166],{"class":50},"\u002F\u002F Without encoding: broken query\n",[44,168,169,173,176,178,181,184,187,190,193,195,198,200],{"class":46,"line":54},[44,170,172],{"class":171},"szBVR","\u002F",[44,174,175],{"class":57},"api",[44,177,172],{"class":171},[44,179,180],{"class":57},"search",[44,182,183],{"class":171},"?",[44,185,186],{"class":57},"q",[44,188,189],{"class":171},"=",[44,191,192],{"class":57},"hello world",[44,194,132],{"class":171},[44,196,197],{"class":57},"page",[44,199,189],{"class":171},[44,201,202],{"class":101},"2\n",[44,204,205],{"class":46,"line":78},[44,206,82],{"emptyLinePlaceholder":81},[44,208,209],{"class":46,"line":85},[44,210,211],{"class":50},"\u002F\u002F With encoding: safe URL\n",[44,213,214,216,218,220,222,224,226,228,231,234,237,239,241,243],{"class":46,"line":91},[44,215,172],{"class":171},[44,217,175],{"class":57},[44,219,172],{"class":171},[44,221,180],{"class":57},[44,223,183],{"class":171},[44,225,186],{"class":57},[44,227,189],{"class":171},[44,229,230],{"class":57},"hello",[44,232,233],{"class":171},"%",[44,235,236],{"class":57},"20world",[44,238,132],{"class":171},[44,240,197],{"class":57},[44,242,189],{"class":171},[44,244,202],{"class":101},[15,246,247,248,126,250,126,252,126,255,257],{},"Key targets: space, ",[41,249,132],{},[41,251,189],{},[41,253,254],{},"#",[41,256,183],{},", non-ASCII characters.",[10,259,261],{"id":260},"side-by-side-comparison","Side-by-Side Comparison",[263,264,265,281],"table",{},[266,267,268],"thead",{},[269,270,271,275,278],"tr",{},[272,273,274],"th",{},"Aspect",[272,276,277],{},"HTML Encoding",[272,279,280],{},"URL Encoding",[282,283,284,296,313,332,343,354],"tbody",{},[269,285,286,290,293],{},[287,288,289],"td",{},"Purpose",[287,291,292],{},"Protect HTML parser",[287,294,295],{},"Protect URL parser",[269,297,298,301,306],{},[287,299,300],{},"Character set",[287,302,303],{},[41,304,305],{},"\u003C > & \" '",[287,307,308,309,312],{},"Space, ",[41,310,311],{},"& = # ? \u002F %",", non-ASCII",[269,314,315,318,327],{},[287,316,317],{},"Format",[287,319,320,323,324],{},[41,321,322],{},"&name;"," or ",[41,325,326],{},"&#NNN;",[287,328,329,331],{},[41,330,149],{}," (hex byte)",[269,333,334,337,340],{},[287,335,336],{},"Primary context",[287,338,339],{},"HTML text and attributes",[287,341,342],{},"URL paths and query strings",[269,344,345,348,351],{},[287,346,347],{},"Security role",[287,349,350],{},"Prevents HTML\u002FXSS injection",[287,352,353],{},"Prevents URL injection",[269,355,356,359,362],{},[287,357,358],{},"Decoding tool",[287,360,361],{},"Browser HTML parser",[287,363,364],{},"Browser URL parser",[10,366,368],{"id":367},"common-confusion-points","Common Confusion Points",[370,371,373],"h3",{"id":372},"urls-inside-html-attributes","URLs inside HTML attributes",[15,375,376,377,323,380,383],{},"When you place a URL inside an ",[41,378,379],{},"href",[41,381,382],{},"src"," attribute, both layers matter — but they serve different purposes.",[34,385,387],{"className":36,"code":386,"language":38,"meta":39,"style":39},"\u003C!-- BAD: unencoded ampersand splits the query -->\n\u003Ca href=\"\u002Fsearch?q=red&color=blue\">Search\u003C\u002Fa>\n\n\u003C!-- GOOD: URL-encode the value, HTML-encode the attribute if needed -->\n\u003Ca href=\"\u002Fsearch?q=red%26blue\">Search\u003C\u002Fa>\n",[41,388,389,394,418,422,427],{"__ignoreMap":39},[44,390,391],{"class":46,"line":47},[44,392,393],{"class":50},"\u003C!-- BAD: unencoded ampersand splits the query -->\n",[44,395,396,398,401,405,407,411,414,416],{"class":46,"line":54},[44,397,58],{"class":57},[44,399,400],{"class":61},"a",[44,402,404],{"class":403},"sScJk"," href",[44,406,189],{"class":57},[44,408,410],{"class":409},"sZZnC","\"\u002Fsearch?q=red&color=blue\"",[44,412,413],{"class":57},">Search\u003C\u002F",[44,415,400],{"class":61},[44,417,75],{"class":57},[44,419,420],{"class":46,"line":78},[44,421,82],{"emptyLinePlaceholder":81},[44,423,424],{"class":46,"line":85},[44,425,426],{"class":50},"\u003C!-- GOOD: URL-encode the value, HTML-encode the attribute if needed -->\n",[44,428,429,431,433,435,437,440,442,444],{"class":46,"line":91},[44,430,58],{"class":57},[44,432,400],{"class":61},[44,434,404],{"class":403},[44,436,189],{"class":57},[44,438,439],{"class":409},"\"\u002Fsearch?q=red%26blue\"",[44,441,413],{"class":57},[44,443,400],{"class":61},[44,445,75],{"class":57},[15,447,448,449,451,452,455,456,458],{},"The ",[41,450,132],{}," in ",[41,453,454],{},"q=red&color=blue"," is a query separator, not an HTML entity. But HTML parsers also interpret ",[41,457,132],{}," as the start of an entity. To avoid ambiguity:",[34,460,462],{"className":36,"code":461,"language":38,"meta":39,"style":39},"\u003C!-- Safest: URL-encode the data, then use & for attribute ampersands -->\n\u003Ca href=\"\u002Fsearch?tags=html%26css&sort=newest\">Search\u003C\u002Fa>\n",[41,463,464,469],{"__ignoreMap":39},[44,465,466],{"class":46,"line":47},[44,467,468],{"class":50},"\u003C!-- Safest: URL-encode the data, then use & for attribute ampersands -->\n",[44,470,471,473,475,477,479,482,484,487,489,491],{"class":46,"line":54},[44,472,58],{"class":57},[44,474,400],{"class":61},[44,476,404],{"class":403},[44,478,189],{"class":57},[44,480,481],{"class":409},"\"\u002Fsearch?tags=html%26css",[44,483,108],{"class":101},[44,485,486],{"class":409},"sort=newest\"",[44,488,413],{"class":57},[44,490,400],{"class":61},[44,492,75],{"class":57},[15,494,495,496,499,500,502],{},"Here ",[41,497,498],{},"html%26css"," is URL-encoded so the server reads it as the literal string \"html&css\". The ",[41,501,108],{}," separates query parameters inside an HTML attribute.",[370,504,506],{"id":505},"html-content-inside-urls","HTML content inside URLs",[15,508,509],{},"Sometimes you need to pass HTML as a URL parameter. This requires URL encoding first, because the URL parser runs before the HTML parser.",[34,511,513],{"className":157,"code":512,"language":159,"meta":39,"style":39},"\u002F\u002F WRONG: raw HTML in a URL will break parsing\nconst url = `\u002Fpreview?html=\u003Cp>Hello\u003C\u002Fp>`\n\n\u002F\u002F CORRECT: URL-encode the HTML value\nconst html = '\u003Cp>Hello\u003C\u002Fp>'\nconst url = `\u002Fpreview?html=${encodeURIComponent(html)}`\n\u002F\u002F \"\u002Fpreview?html=%3Cp%3EHello%3C%2Fp%3E\"\n",[41,514,515,520,534,538,543,555,581],{"__ignoreMap":39},[44,516,517],{"class":46,"line":47},[44,518,519],{"class":50},"\u002F\u002F WRONG: raw HTML in a URL will break parsing\n",[44,521,522,525,528,531],{"class":46,"line":54},[44,523,524],{"class":171},"const",[44,526,527],{"class":101}," url",[44,529,530],{"class":171}," =",[44,532,533],{"class":409}," `\u002Fpreview?html=\u003Cp>Hello\u003C\u002Fp>`\n",[44,535,536],{"class":46,"line":78},[44,537,82],{"emptyLinePlaceholder":81},[44,539,540],{"class":46,"line":85},[44,541,542],{"class":50},"\u002F\u002F CORRECT: URL-encode the HTML value\n",[44,544,545,547,550,552],{"class":46,"line":91},[44,546,524],{"class":171},[44,548,549],{"class":101}," html",[44,551,530],{"class":171},[44,553,554],{"class":409}," '\u003Cp>Hello\u003C\u002Fp>'\n",[44,556,558,560,562,564,567,570,573,575,578],{"class":46,"line":557},6,[44,559,524],{"class":171},[44,561,527],{"class":101},[44,563,530],{"class":171},[44,565,566],{"class":409}," `\u002Fpreview?html=${",[44,568,569],{"class":403},"encodeURIComponent",[44,571,572],{"class":409},"(",[44,574,38],{"class":57},[44,576,577],{"class":409},")",[44,579,580],{"class":409},"}`\n",[44,582,584],{"class":46,"line":583},7,[44,585,586],{"class":50},"\u002F\u002F \"\u002Fpreview?html=%3Cp%3EHello%3C%2Fp%3E\"\n",[370,588,590],{"id":589},"double-encoding-trap","Double encoding trap",[15,592,593],{},"Applying the wrong encoding twice garbles your data:",[34,595,597],{"className":157,"code":596,"language":159,"meta":39,"style":39},"\u002F\u002F Double URL encoding\nencodeURIComponent(encodeURIComponent('a&b'))\n\u002F\u002F \"a%2526b\" — the server reads \"a%26b\" instead of \"a&b\"\n\n\u002F\u002F Double HTML encoding\nencodeHtml(encodeHtml('5 > 3'))\n\u002F\u002F \"5 > 3\" — renders as \"5 > 3\" instead of \"5 > 3\"\n",[41,598,599,604,620,625,629,634,650],{"__ignoreMap":39},[44,600,601],{"class":46,"line":47},[44,602,603],{"class":50},"\u002F\u002F Double URL encoding\n",[44,605,606,608,610,612,614,617],{"class":46,"line":54},[44,607,569],{"class":403},[44,609,572],{"class":57},[44,611,569],{"class":403},[44,613,572],{"class":57},[44,615,616],{"class":409},"'a&b'",[44,618,619],{"class":57},"))\n",[44,621,622],{"class":46,"line":78},[44,623,624],{"class":50},"\u002F\u002F \"a%2526b\" — the server reads \"a%26b\" instead of \"a&b\"\n",[44,626,627],{"class":46,"line":85},[44,628,82],{"emptyLinePlaceholder":81},[44,630,631],{"class":46,"line":91},[44,632,633],{"class":50},"\u002F\u002F Double HTML encoding\n",[44,635,636,639,641,643,645,648],{"class":46,"line":557},[44,637,638],{"class":403},"encodeHtml",[44,640,572],{"class":57},[44,642,638],{"class":403},[44,644,572],{"class":57},[44,646,647],{"class":409},"'5 > 3'",[44,649,619],{"class":57},[44,651,652],{"class":46,"line":583},[44,653,654],{"class":50},"\u002F\u002F \"5 > 3\" — renders as \"5 > 3\" instead of \"5 > 3\"\n",[15,656,657,660],{},[29,658,659],{},"Rule:"," Encode once, at the boundary where the data enters that context. Never stack the same encoding.",[10,662,664],{"id":663},"encoding-for-xss-prevention","Encoding for XSS Prevention",[15,666,667,668,139],{},"Encoding is your first line of defense against cross-site scripting. The key principle: ",[29,669,670],{},"encode for the correct output context",[263,672,673,686],{},[266,674,675],{},[269,676,677,680,683],{},[272,678,679],{},"Output Context",[272,681,682],{},"Encoding Method",[272,684,685],{},"Example",[282,687,688,701,714,727,740],{},[269,689,690,693,696],{},[287,691,692],{},"HTML text content",[287,694,695],{},"HTML entity encode",[287,697,698],{},[41,699,700],{},"<script>",[269,702,703,706,709],{},[287,704,705],{},"HTML attribute value",[287,707,708],{},"HTML entity encode (with quotes)",[287,710,711],{},[41,712,713],{},"title=\"Hello & World\"",[269,715,716,719,722],{},[287,717,718],{},"URL query parameter",[287,720,721],{},"URL encode",[287,723,724],{},[41,725,726],{},"?q=hello%20world",[269,728,729,732,735],{},[287,730,731],{},"JavaScript string",[287,733,734],{},"JavaScript string escape",[287,736,737],{},[41,738,739],{},"O\\'Reilly",[269,741,742,745,748],{},[287,743,744],{},"CSS property value",[287,746,747],{},"CSS escape",[287,749,750],{},"Different format entirely",[15,752,753,754,757],{},"A common mistake: URL-encoding data that goes into HTML text content. This does ",[29,755,756],{},"not"," prevent XSS, because the browser does not URL-decode text nodes.",[34,759,761],{"className":36,"code":760,"language":38,"meta":39,"style":39},"\u003C!-- WRONG: URL encoding does nothing in HTML text -->\n\u003Cp>User input: %3Cscript%3Ealert(1)%3C\u002Fscript%3E\u003C\u002Fp>\n\u003C!-- Browser renders literally: User input: %3Cscript%3Ealert(1)%3C\u002Fscript%3E -->\n\u003C!-- Actually safe from XSS, but wrong display — just use HTML encoding -->\n\n\u003C!-- CORRECT: HTML entity encoding for HTML text -->\n\u003Cp>User input: <script>alert(1)<\u002Fscript>\u003C\u002Fp>\n\u003C!-- Browser renders: User input: \u003Cscript>alert(1)\u003C\u002Fscript> (as visible text) -->\n",[41,762,763,768,781,786,791,795,800,833],{"__ignoreMap":39},[44,764,765],{"class":46,"line":47},[44,766,767],{"class":50},"\u003C!-- WRONG: URL encoding does nothing in HTML text -->\n",[44,769,770,772,774,777,779],{"class":46,"line":54},[44,771,58],{"class":57},[44,773,15],{"class":61},[44,775,776],{"class":57},">User input: %3Cscript%3Ealert(1)%3C\u002Fscript%3E\u003C\u002F",[44,778,15],{"class":61},[44,780,75],{"class":57},[44,782,783],{"class":46,"line":78},[44,784,785],{"class":50},"\u003C!-- Browser renders literally: User input: %3Cscript%3Ealert(1)%3C\u002Fscript%3E -->\n",[44,787,788],{"class":46,"line":85},[44,789,790],{"class":50},"\u003C!-- Actually safe from XSS, but wrong display — just use HTML encoding -->\n",[44,792,793],{"class":46,"line":91},[44,794,82],{"emptyLinePlaceholder":81},[44,796,797],{"class":46,"line":557},[44,798,799],{"class":50},"\u003C!-- CORRECT: HTML entity encoding for HTML text -->\n",[44,801,802,804,806,809,811,814,816,819,821,824,826,829,831],{"class":46,"line":583},[44,803,58],{"class":57},[44,805,15],{"class":61},[44,807,808],{"class":57},">User input: ",[44,810,114],{"class":101},[44,812,813],{"class":57},"script",[44,815,102],{"class":101},[44,817,818],{"class":57},"alert(1)",[44,820,114],{"class":101},[44,822,823],{"class":57},"\u002Fscript",[44,825,102],{"class":101},[44,827,828],{"class":57},"\u003C\u002F",[44,830,15],{"class":61},[44,832,75],{"class":57},[44,834,836],{"class":46,"line":835},8,[44,837,838],{"class":50},"\u003C!-- Browser renders: User input: \u003Cscript>alert(1)\u003C\u002Fscript> (as visible text) -->\n",[10,840,842],{"id":841},"combining-both-encodings","Combining Both Encodings",[15,844,845],{},"The most common real-world scenario: building an HTML page that contains a link with dynamic query parameters.",[34,847,849],{"className":157,"code":848,"language":159,"meta":39,"style":39},"\u002F\u002F Step 1: URL-encode your parameter values\nconst tag = 'html & css'\nconst sort = 'newest'\nconst query = `tag=${encodeURIComponent(tag)}&sort=${encodeURIComponent(sort)}`\n\u002F\u002F \"tag=html%20%26%20css&sort=newest\"\n\n\u002F\u002F Step 2: HTML-encode the & separators when placing inside an attribute\nconst href = query.replace(\u002F&\u002Fg, '&')\n\u002F\u002F \"tag=html%20%26%20css&sort=newest\"\n\n\u002F\u002F Step 3: Insert into HTML\nconst html = `\u003Ca href=\"\u002Fsearch?${href}\">Search\u003C\u002Fa>`\n",[41,850,851,856,868,880,915,920,924,929,963,969,974,980],{"__ignoreMap":39},[44,852,853],{"class":46,"line":47},[44,854,855],{"class":50},"\u002F\u002F Step 1: URL-encode your parameter values\n",[44,857,858,860,863,865],{"class":46,"line":54},[44,859,524],{"class":171},[44,861,862],{"class":101}," tag",[44,864,530],{"class":171},[44,866,867],{"class":409}," 'html & css'\n",[44,869,870,872,875,877],{"class":46,"line":78},[44,871,524],{"class":171},[44,873,874],{"class":101}," sort",[44,876,530],{"class":171},[44,878,879],{"class":409}," 'newest'\n",[44,881,882,884,887,889,892,894,896,899,901,904,906,908,911,913],{"class":46,"line":85},[44,883,524],{"class":171},[44,885,886],{"class":101}," query",[44,888,530],{"class":171},[44,890,891],{"class":409}," `tag=${",[44,893,569],{"class":403},[44,895,572],{"class":409},[44,897,898],{"class":57},"tag",[44,900,577],{"class":409},[44,902,903],{"class":409},"}&sort=${",[44,905,569],{"class":403},[44,907,572],{"class":409},[44,909,910],{"class":57},"sort",[44,912,577],{"class":409},[44,914,580],{"class":409},[44,916,917],{"class":46,"line":91},[44,918,919],{"class":50},"\u002F\u002F \"tag=html%20%26%20css&sort=newest\"\n",[44,921,922],{"class":46,"line":557},[44,923,82],{"emptyLinePlaceholder":81},[44,925,926],{"class":46,"line":583},[44,927,928],{"class":50},"\u002F\u002F Step 2: HTML-encode the & separators when placing inside an attribute\n",[44,930,931,933,935,937,940,943,945,947,950,952,955,957,960],{"class":46,"line":835},[44,932,524],{"class":171},[44,934,404],{"class":101},[44,936,530],{"class":171},[44,938,939],{"class":57}," query.",[44,941,942],{"class":403},"replace",[44,944,572],{"class":57},[44,946,172],{"class":409},[44,948,132],{"class":949},"sA_wV",[44,951,172],{"class":409},[44,953,954],{"class":171},"g",[44,956,126],{"class":57},[44,958,959],{"class":409},"'&'",[44,961,962],{"class":57},")\n",[44,964,966],{"class":46,"line":965},9,[44,967,968],{"class":50},"\u002F\u002F \"tag=html%20%26%20css&sort=newest\"\n",[44,970,972],{"class":46,"line":971},10,[44,973,82],{"emptyLinePlaceholder":81},[44,975,977],{"class":46,"line":976},11,[44,978,979],{"class":50},"\u002F\u002F Step 3: Insert into HTML\n",[44,981,983,985,987,989,992,994],{"class":46,"line":982},12,[44,984,524],{"class":171},[44,986,549],{"class":101},[44,988,530],{"class":171},[44,990,991],{"class":409}," `\u003Ca href=\"\u002Fsearch?${",[44,993,379],{"class":57},[44,995,996],{"class":409},"}\">Search\u003C\u002Fa>`\n",[15,998,999],{},"Frameworks like Vue and React handle step 2 automatically when you bind attributes. You still need to handle step 1 yourself.",[10,1001,1003],{"id":1002},"key-takeaways","Key Takeaways",[1005,1006,1007,1011,1014,1017,1020,1023],"ul",{},[1008,1009,1010],"li",{},"HTML encoding protects the HTML parser; URL encoding protects the URL parser",[1008,1012,1013],{},"Apply HTML encoding when inserting data into HTML text or attributes",[1008,1015,1016],{},"Apply URL encoding when inserting data into URL paths or query strings",[1008,1018,1019],{},"When URLs appear inside HTML, you may need both encodings — URL-encode the data first, HTML-encode the attribute delimiters",[1008,1021,1022],{},"Never use the wrong encoding for the context — URL encoding inside HTML text does not prevent XSS",[1008,1024,1025],{},"Avoid double encoding the same layer; encode once at the boundary",[10,1027,1029],{"id":1028},"related-guides","Related Guides",[1005,1031,1032,1038,1044],{},[1008,1033,1034],{},[400,1035,1037],{"href":1036},"\u002Fguides\u002Fhtml-entities-guide","HTML Entities Guide",[1008,1039,1040],{},[400,1041,1043],{"href":1042},"\u002Fguides\u002Fhtml-special-characters-reference","HTML Special Characters Reference",[1008,1045,1046],{},[400,1047,1049],{"href":1048},"\u002Fguides\u002Fpercent-encoding-reference","Percent-Encoding Reference",[10,1051,1053],{"id":1052},"try-it-yourself","Try It Yourself",[15,1055,1056],{},"Encode and decode HTML entities and URLs with our free tools:",[1005,1058,1059,1066],{},[1008,1060,1061,1065],{},[400,1062,1064],{"href":1063},"\u002Ftools\u002Fhtml-entity","HTML Entity Encoder\u002FDecoder"," — convert special characters to entity codes and back",[1008,1067,1068,1072],{},[400,1069,1071],{"href":1070},"\u002Ftools\u002Furl-encoder","URL Encoder\u002FDecoder"," — percent-encode and decode URL components",[1074,1075,1076],"style",{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sA_wV, html code.shiki .sA_wV{--shiki-default:#032F62;--shiki-dark:#DBEDFF}",{"title":39,"searchDepth":54,"depth":54,"links":1078},[1079,1080,1081,1082,1083,1088,1089,1090,1091,1092],{"id":12,"depth":54,"text":13},{"id":23,"depth":54,"text":24},{"id":142,"depth":54,"text":143},{"id":260,"depth":54,"text":261},{"id":367,"depth":54,"text":368,"children":1084},[1085,1086,1087],{"id":372,"depth":78,"text":373},{"id":505,"depth":78,"text":506},{"id":589,"depth":78,"text":590},{"id":663,"depth":54,"text":664},{"id":841,"depth":54,"text":842},{"id":1002,"depth":54,"text":1003},{"id":1028,"depth":54,"text":1029},{"id":1052,"depth":54,"text":1053},"2026-05-28","Understanding the difference between HTML entity encoding and URL percent-encoding, and when to apply each method.","md",{"immutable":81},"\u002Fguides\u002Fhtml-encoding-vs-url-encoding",{"title":5,"description":1094},"guides\u002Fhtml-encoding-vs-url-encoding","n7o6iV2XpALJZCE5vpJMy-J56EVFV8OPB17sTqgQ1nw",1780401326228]