urls.html 59 KB
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 853 854 855 856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878 879 880 881 882 883 884 885 886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908 909 910 911 912 913 914 915 916 917 918 919 920 921 922 923 924 925 926 927 928 929 930 931 932 933 934 935 936 937 938 939 940 941 942 943 944 945 946 947 948 949 950 951 952 953 954 955 956 957 958 959 960 961 962 963 964 965 966 967 968 969 970 971 972 973 974 975 976 977 978 979 980 981 982 983 984 985 986 987 988 989 990 991 992 993 994 995 996 997 998 999 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 1010 1011 1012 1013 1014 1015 1016 1017 1018 1019 1020 1021 1022 1023 1024 1025 1026 1027 1028 1029 1030 1031 1032 1033 1034 1035 1036 1037 1038 1039 1040 1041 1042 1043 1044 1045 1046 1047 1048 1049 1050 1051 1052 1053 1054 1055 1056 1057 1058 1059 1060 1061 1062 1063 1064 1065 1066 1067 1068 1069 1070 1071 1072 1073 1074 1075 1076 1077 1078 1079 1080 1081 1082 1083 1084 1085 1086 1087 1088 1089 1090 1091 1092 1093 1094
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en-US-x-Hixie" ><head><title>2.6 URLs &#8212; HTML5 </title><style type="text/css">
   pre { margin-left: 2em; white-space: pre-wrap; }
   h2 { margin: 3em 0 1em 0; }
   h3 { margin: 2.5em 0 1em 0; }
   h4 { margin: 2.5em 0 0.75em 0; }
   h5, h6 { margin: 2.5em 0 1em; }
   h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
   h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
   p { margin: 1em 0; }
   hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
   dl, dd { margin-top: 0; margin-bottom: 0; }
   dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   dt + dt { margin-top: 0; }
   dd dt { margin-top: 0.25em; margin-bottom: 0; }
   dd p { margin-top: 0; }
   dd dl + p { margin-top: 1em; }
   dd table + p { margin-top: 1em; }
   p + * > li, dd li { margin: 1em 0; }
   dt, dfn { font-weight: bold; font-style: normal; }
   dt dfn { font-style: italic; }
   pre, code { font-size: inherit; font-family: monospace; font-variant: normal; }
   pre strong { color: black; font: inherit; font-weight: bold; background: yellow; }
   pre em { font-weight: bolder; font-style: normal; }
   @media screen { code { color: orangered; } code :link, code :visited { color: inherit; } }
   var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; }
   table { border-collapse: collapse; border-style: hidden hidden none hidden; }
   table thead, table tbody { border-bottom: solid; }
   table tbody th:first-child { border-left: solid; }
   table tbody th { text-align: left; }
   table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; }
   blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; }

   .bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; }
   .matrix, .matrix td { border: none; text-align: right; }
   .matrix { margin-left: 2em; }
   .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
   .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
   .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }

   .toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; }
   img.extra { float: right; }
   pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; }
   pre.idl :link, pre.idl :visited { color: inherit; background: transparent; }
   pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; }
   pre.css:first-line { color: #AAAA50; }
   dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #DDFFDD; }
   hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; }
   dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; }
   dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; }
   dl.domintro dd p { margin: 0.5em 0; }
   dl.switch { padding-left: 2em; }
   dl.switch > dt { text-indent: -1.5em; }
   dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; }
   dl.triple { padding: 0 0 0 1em; }
   dl.triple dt, dl.triple dd { margin: 0; display: inline }
   dl.triple dt:after { content: ':'; }
   dl.triple dd:after { content: '\A'; white-space: pre; }
   .diff-old { text-decoration: line-through; color: silver; background: transparent; }
   .diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; }
   a .diff-new { border-bottom: 1px blue solid; }

   h2 { page-break-before: always; }
   h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
   h1 + h2, hr + h2.no-toc { page-break-before: auto; }

   p  > span:not([title=""]):not([class="XXX"]):not([class="impl"]):not([class="note"]),
   li > span:not([title=""]):not([class="XXX"]):not([class="impl"]):not([class="note"]), { border-bottom: solid #9999CC; }

   div.head { margin: 0 0 1em; padding: 1em 0 0 0; }
   div.head p { margin: 0; }
   div.head h1 { margin: 0; }
   div.head .logo { float: right; margin: 0 1em; }
   div.head .logo img { border: none } /* remove border from top image */
   div.head dl { margin: 1em 0; }
   div.head p.copyright, div.head p.alt { font-size: x-small; font-style: oblique; margin: 0; }

   body > .toc > li { margin-top: 1em; margin-bottom: 1em; }
   body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; }
   body > .toc > li > * { margin-bottom: 0.5em; }
   body > .toc > li > * > li > * { margin-bottom: 0.25em; }
   .toc, .toc li { list-style: none; }

   .brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; }
   .brief li { margin: 0; padding: 0; }
   .brief li p { margin: 0; padding: 0; }

   .category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; }
   .category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; }
   .category-list li { display: inline; }
   .category-list li:not(:last-child)::after { content: ', '; }
   .category-list li > span, .category-list li > a { text-transform: lowercase; }
   .category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */

   .XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; }
   .XXX > :first-child { margin-top: 0; }
   p .XXX { line-height: 3em; }
   .annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; }
   .annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; }
   .annotation :link, .annotation :visited { color: inherit; }
   .annotation :link:hover, .annotation :visited:hover { background: transparent; }
   .annotation span { border: none ! important; }
   .note { color: green; background: transparent; font-family: sans-serif; }
   .warning { color: red; background: transparent; }
   .note, .warning { font-weight: bolder; font-style: italic; }
   p.note, div.note { padding: 0.5em 2em; }
   span.note { padding: 0 2em; }
   .note p:first-child, .warning p:first-child { margin-top: 0; }
   .note p:last-child, .warning p:last-child { margin-bottom: 0; }
   .warning:before { font-style: normal; }
   p.note:before { content: 'Note: '; }
   p.warning:before { content: '\26A0 Warning! '; }

   .bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; }
   .bookkeeping { font-size: 0.8em; margin: 2em 0; }
   .bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; }
   .bookkeeping dt { margin: 0.5em 2em 0; }
   .bookkeeping dd { margin: 0 3em 0.5em; }

   h4 { position: relative; z-index: 3; }
   h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; }
   .element {
     background: #EEEEFF;
     color: black;
     margin: 0 0 1em 0.15em;
     padding: 0 1em 0.25em 0.75em;
     border-left: solid #9999FF 0.25em;
     position: relative;
     z-index: 1;
   }
   .element:before {
     position: absolute;
     z-index: 2;
     top: 0;
     left: -1.15em;
     height: 2em;
     width: 0.9em;
     background: #EEEEFF;
     content: ' ';
     border-style: none none solid solid;
     border-color: #9999FF;
     border-width: 0.25em;
   }

   .example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; }
   td > .example:only-child { margin: 0 0 0 0.1em; }

   ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; }
   ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; }
   ul.domTree li li { list-style: none; }
   ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
   ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
   ul.domTree span { font-style: italic; font-family: serif; }
   ul.domTree .t1 code { color: purple; font-weight: bold; }
   ul.domTree .t2 { font-style: normal; font-family: monospace; }
   ul.domTree .t2 .name { color: black; font-weight: bold; }
   ul.domTree .t2 .value { color: blue; font-weight: normal; }
   ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; }
   ul.domTree .t7 code, .domTree .t8 code { color: green; }
   ul.domTree .t10 code { color: teal; }

   body.dfnEnabled dfn { cursor: pointer; }
   .dfnPanel {
     display: inline;
     position: absolute;
     z-index: 10;
     height: auto;
     width: auto;
     padding: 0.5em 0.75em;
     font: small sans-serif, Droid Sans Fallback;
     background: #DDDDDD;
     color: black;
     border: outset 0.2em;
   }
   .dfnPanel * { margin: 0; padding: 0; font: inherit; text-indent: 0; }
   .dfnPanel :link, .dfnPanel :visited { color: black; }
   .dfnPanel p { font-weight: bolder; }
   .dfnPanel * + p { margin-top: 0.25em; }
   .dfnPanel li { list-style-position: inside; }

   #configUI { position: absolute; z-index: 20; top: 10em; right: 1em; width: 11em; font-size: small; }
   #configUI p { margin: 0.5em 0; padding: 0.3em; background: #EEEEEE; color: black; border: inset thin; }
   #configUI p label { display: block; }
   #configUI #updateUI, #configUI .loginUI { text-align: center; }
   #configUI input[type=button] { display: block; margin: auto; }

   fieldset { margin: 1em; padding: 0.5em 1em; }
   fieldset > legend + * { margin-top: 0; }
   fieldset > :last-child { margin-bottom: 0; }
   fieldset p { margin: 0.5em 0; }

   .stability {
     position: fixed;
     bottom: 0;
     left: 0; right: 0;
     margin: 0 auto 0 auto !important;
    z-index: 1000;
     width: 50%;
     background: maroon; color: yellow;
     -webkit-border-radius: 1em 1em 0 0;
     -moz-border-radius: 1em 1em 0 0;
     border-radius: 1em 1em 0 0;
     -moz-box-shadow: 0 0 1em #500;
     -webkit-box-shadow: 0 0 1em #500;
     box-shadow: 0 0 1em red;
     padding: 0.5em 1em;
     text-align: center;
   }
   .stability strong {
     display: block;
   }
   .stability input {
     appearance: none; margin: 0; border: 0; padding: 0.25em 0.5em; background: transparent; color: black;
     position: absolute; top: -0.5em; right: 0; font: 1.25em sans-serif; text-align: center;
   }
   .stability input:hover {
     color: white;
     text-shadow: 0 0 2px black;
   }
   .stability input:active {
     padding: 0.3em 0.45em 0.2em 0.55em;
   }
   .stability :link, .stability :visited,
   .stability :link:hover, .stability :visited:hover {
     background: transparent;
     color: white;
   }

  </style><link href="data:text/css,.impl%20%7B%20display:%20none;%20%7D%0Ahtml%20%7B%20border:%20solid%20yellow;%20%7D%20.domintro:before%20%7B%20display:%20none;%20%7D" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20%7B%20background:%20%23FFEEEE;%20%7D%20.domintro:before%20%7B%20background:%20%23FFEEEE;%20%7D" id="highlight" rel="alternate stylesheet" title="Highlight implementation
requirements"><link href="http://www.w3.org/StyleSheets/TR/W3C-WD" rel="stylesheet" type="text/css"><style type="text/css">

   .applies thead th > * { display: block; }
   .applies thead code { display: block; }
   .applies tbody th { whitespace: nowrap; }
   .applies td { text-align: center; }
   .applies .yes { background: yellow; }

   .matrix, .matrix td { border: hidden; text-align: right; }
   .matrix { margin-left: 2em; }

   .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
   .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
   .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }

   td.eg { border-width: thin; text-align: center; }

   #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; }
   #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; }
   #table-example-1 caption { padding-bottom: 0.5em; }
   #table-example-1 thead, #table-example-1 tbody { border: none; }
   #table-example-1 th, #table-example-1 td { border: solid thin; }
   #table-example-1 th { font-weight: normal; }
   #table-example-1 td { border-style: none solid; vertical-align: top; }
   #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; }
   #table-example-1 tbody tr:first-child td { padding-top: 0.5em; }
   #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; }
   #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; }
   #table-example-1 tbody td:first-child::after { content: leader(". "); }
   #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; }
   #table-example-1 tbody td:first-child + td { width: 10em; }
   #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; }
   #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; }

   .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; }
   .apple-table-examples * { font-family: "Times", serif; }
   .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; }
   .apple-table-examples tbody th:first-child { border-left: none; width: 100%; }
   .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; }
   .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") }
   .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; }
   .apple-table-examples td { text-align: right; vertical-align: top; }
   .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; }
   .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; }
   .apple-table-examples.e2 th[scope=row] { padding-left: 1em; }
   .apple-table-examples sup { line-height: 0; }

   .details-example img { vertical-align: top; }

   #base64-table {
     white-space: nowrap;
     font-size: 0.6em;
     column-width: 6em;
     column-count: 5;
     column-gap: 1em;
     -moz-column-width: 6em;
     -moz-column-count: 5;
     -moz-column-gap: 1em;
     -webkit-column-width: 6em;
     -webkit-column-count: 5;
     -webkit-column-gap: 1em;
   }
   #base64-table thead { display: none; }
   #base64-table * { border: none; }
   #base64-table tbody td:first-child:after { content: ':'; }
   #base64-table tbody td:last-child { text-align: right; }

   #named-character-references-table {
     white-space: nowrap;
     font-size: 0.6em;
     column-width: 30em;
     column-gap: 1em;
     -moz-column-width: 30em;
     -moz-column-gap: 1em;
     -webkit-column-width: 30em;
     -webkit-column-gap: 1em;
   }
   #named-character-references-table > table > tbody > tr > td:first-child + td,
   #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; }
   #named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; }
   #named-character-references-table > table > tbody > tr#entity-CounterClockwiseContourIntegral > td:first-child { font-size: 0.5em; }

   .glyph.control { color: red; }

   @font-face {
     font-family: 'Essays1743';
     src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743.ttf');
   }
   @font-face {
     font-family: 'Essays1743';
     font-weight: bold;
     src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Bold.ttf');
   }
   @font-face {
     font-family: 'Essays1743';
     font-style: italic;
     src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-Italic.ttf');
   }
   @font-face {
     font-family: 'Essays1743';
     font-style: italic;
     font-weight: bold;
     src: url('http://www.whatwg.org/specs/web-apps/current-work/fonts/Essays1743-BoldItalic.ttf');
   }

  </style><style type="text/css">
   .domintro:before { display: table; margin: -1em -0.5em -0.5em auto; width: auto; content: 'This box is non-normative. Implementation requirements are given below this box.'; color: black; font-style: italic; border: solid 2px; background: white; padding: 0 0.25em; }
  </style><script type="text/javascript">
   function getCookie(name) {
     var params = location.search.substr(1).split("&");
     for (var index = 0; index < params.length; index++) {
       if (params[index] == name)
         return "1";
       var data = params[index].split("=");
       if (data[0] == name)
         return unescape(data[1]);
     }
     var cookies = document.cookie.split("; ");
     for (var index = 0; index < cookies.length; index++) {
       var data = cookies[index].split("=");
       if (data[0] == name)
         return unescape(data[1]);
     }
     return null;
   }
  </script>
  <script src="link-fixup.js" type="text/javascript"></script>
  <link href="style.css" rel="stylesheet"><link href="common-microsyntaxes.html" title="2.5 Common microsyntaxes" rel="prev">
  <link href="spec.html#contents" title="Table of contents" rel="index">
  <link href="fetching-resources.html" title="2.7 Fetching resources" rel="next">
  </head><body><div class="head" id="head">
<div id="multipage-common">
  <p class="stability" id="wip"><strong>This is a work in
  progress!</strong> For the latest updates from the HTML WG, possibly
  including important bug fixes, please look at the <a href="http://dev.w3.org/html5/spec/Overview.html">editor's draft</a> instead.
  There may also be a more
  <a href="http://www.w3.org/TR/html5">up-to-date Working Draft</a>
   with changes based on resolution of Last Call issues.
  <input onclick="closeWarning(this.parentNode)" type="button" value="&#9587;&#8413;"></p>
  <script type="text/javascript">
   function closeWarning(element) {
     element.parentNode.removeChild(element);
     var date = new Date();
     date.setDate(date.getDate()+4);
     document.cookie = 'hide-obsolescence-warning=1; expires=' + date.toGMTString();
   }
   if (getCookie('hide-obsolescence-warning') == '1')
     setTimeout(function () { document.getElementById('wip').parentNode.removeChild(document.getElementById('wip')); }, 2000);
  </script></div>

   <p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>

   <h1>HTML5</h1>
   </div><div>
   <a href="common-microsyntaxes.html" class="prev">2.5 Common microsyntaxes</a> &#8211;
   <a href="spec.html#contents">Table of contents</a> &#8211;
   <a href="fetching-resources.html" class="next">2.7 Fetching resources</a>
  <ol class="toc"><li><ol><li><a href="urls.html#urls"><span class="secno">2.6 </span>URLs</a>
    <ol><li><a href="urls.html#terminology-0"><span class="secno">2.6.1 </span>Terminology</a></li><li><a href="urls.html#parsing-urls"><span class="secno">2.6.2 </span>Parsing URLs</a></li><li><a href="urls.html#resolving-urls"><span class="secno">2.6.3 </span>Resolving URLs</a></li><li><a href="urls.html#url-manipulation-and-creation"><span class="secno">2.6.4 </span>URL manipulation and creation</a></li><li><a href="urls.html#dynamic-changes-to-base-urls"><span class="secno">2.6.5 </span>Dynamic changes to base URLs</a></li><li><a href="urls.html#interfaces-for-url-manipulation"><span class="secno">2.6.6 </span>Interfaces for URL manipulation</a></li></ol></li></ol></li></ol></div>

  <h3 id="urls"><span class="secno">2.6 </span>URLs</h3><p>This specification defines the term <a href="#url">URL</a>, and defines
  various algorithms for dealing with URLs, because for historical
  reasons the rules defined by the URI and IRI specifications are not
  a complete description of what HTML user agents need to implement to
  be compatible with Web content.</p><p class="note">The term "URL" in this specification is used in a
  manner distinct from the precise technical meaning it is given in
  RFC 3986. Readers familiar with that RFC will find it easier to read
  <em>this</em> specification if they pretend the term "URL" as used
  herein is really called something else altogether. This is a
  <a href="introduction.html#willful-violation">willful violation</a> of RFC 3986. <a href="references.html#refsRFC3986">[RFC3986]</a></p><h4 id="terminology-0"><span class="secno">2.6.1 </span>Terminology</h4><p>A <dfn id="url">URL</dfn> is a string used to identify a resource.</p><p>A <a href="#url">URL</a> is a <dfn id="valid-url">valid URL</dfn> if at least one of
  the following conditions holds:</p><ul><li><p>The <a href="#url">URL</a> is a valid URI reference <a href="references.html#refsRFC3986">[RFC3986]</a>.</p></li>

   <li><p>The <a href="#url">URL</a> is a valid IRI reference and it has no
   query component. <a href="references.html#refsRFC3987">[RFC3987]</a></p></li>

   <li><p>The <a href="#url">URL</a> is a valid IRI reference and its query
   component contains no unescaped non-ASCII characters. <a href="references.html#refsRFC3987">[RFC3987]</a></p></li>

   <li><p>The <a href="#url">URL</a> is a valid IRI reference and the <a href="dom.html#document-s-character-encoding" title="document's character encoding">character encoding</a> of
   the URL's <code><a href="infrastructure.html#document">Document</a></code> is UTF-8 or UTF-16. <a href="references.html#refsRFC3987">[RFC3987]</a></p></li>

  </ul><p>A string is a <dfn id="valid-non-empty-url">valid non-empty URL</dfn> if it is a
  <a href="#valid-url">valid URL</a> but it is not the empty string.</p><p>A string is a <dfn id="valid-url-potentially-surrounded-by-spaces">valid URL potentially surrounded by
  spaces</dfn> if, after <a href="common-microsyntaxes.html#strip-leading-and-trailing-whitespace" title="strip leading and trailing
  whitespace">stripping leading and trailing whitespace</a> from
  it, it is a <a href="#valid-url">valid URL</a>.</p><p>A string is a <dfn id="valid-non-empty-url-potentially-surrounded-by-spaces">valid non-empty URL potentially surrounded by
  spaces</dfn> if, after <a href="common-microsyntaxes.html#strip-leading-and-trailing-whitespace" title="strip leading and trailing
  whitespace">stripping leading and trailing whitespace</a> from
  it, it is a <a href="#valid-non-empty-url">valid non-empty URL</a>.</p><p>This specification defines the URL
  <dfn id="about:legacy-compat"><code>about:legacy-compat</code></dfn> as a reserved, though
  unresolvable, <code title="">about:</code> URI, for use in <a href="syntax.html#syntax-doctype" title="syntax-doctype">DOCTYPE</a>s in <a href="dom.html#html-documents">HTML
  documents</a> when needed for compatibility with XML tools. <a href="references.html#refsABOUT">[ABOUT]</a></p><p>This specification defines the URL
  <dfn id="about:srcdoc"><code>about:srcdoc</code></dfn> as a reserved, though
  unresolvable, <code title="">about:</code> URI, that is used as
  <a href="dom.html#the-document-s-address">the document's address</a> of <a href="the-iframe-element.html#an-iframe-srcdoc-document" title="an iframe srcdoc
  document"><code>iframe</code> <code title="attr-iframe-srcdoc">srcdoc</code> documents</a>. <a href="references.html#refsABOUT">[ABOUT]</a></p><div class="impl">

  <h4 id="parsing-urls"><span class="secno">2.6.2 </span>Parsing URLs</h4>

  <p>To <dfn id="parse-a-url">parse a URL</dfn> <var title="">url</var> into its
  component parts, the user agent must use the following steps:</p>

  <ol><li><p>Strip leading and trailing <a href="common-microsyntaxes.html#space-character" title="space
   character">space characters</a> from <var title="">url</var>.</p></li>

   <li>

    <p>Parse <var title="">url</var> in the manner defined by RFC
    3986, with the following exceptions:</p>

    <ul><li>Add all characters with code points less than or equal to
     U+0020 or greater than or equal to U+007F to the
     &lt;unreserved&gt; production.</li>

     <li>Add the characters U+0022, U+003C, U+003E, U+005B .. U+005E,
     U+0060, and U+007B .. U+007D to the &lt;unreserved&gt;
     production.
      <!--
       0022 QUOTATION MARK
       003C LESS-THAN SIGN
       003E GREATER-THAN SIGN
       005B LEFT SQUARE BRACKET
       005C REVERSE SOLIDUS
       005D RIGHT SQUARE BRACKET
       005E CIRCUMFLEX ACCENT
       0060 GRAVE ACCENT
       007B LEFT CURLY BRACKET
       007C VERTICAL LINE
       007D RIGHT CURLY BRACKET
      -->
     </li>

     <li>Add a single U+0025 PERCENT SIGN character as a second
     alternative way of matching the &lt;pct-encoded&gt; production,
     except when the &lt;pct-encoded&gt; is used in the
     &lt;reg-name&gt; production.</li>

     <li>Add the U+0023 NUMBER SIGN character to the characters
     allowed in the &lt;fragment&gt; production.</li>

     
    </ul></li>

   <li>

    <p>If <var title="">url</var> doesn't match the
    &lt;URI-reference&gt; production, even after the above changes are
    made to the ABNF definitions, then parsing the URL fails with an
    error. <a href="references.html#refsRFC3986">[RFC3986]</a></p>

    <p>Otherwise, parsing <var title="">url</var> was successful; the
    components of the URL are substrings of <var title="">url</var>
    defined as follows:</p>

    <dl><dt><dfn id="url-scheme" title="url-scheme">&lt;scheme&gt;</dfn></dt>

     <dd><p>The substring matched by the &lt;scheme&gt; production, if any.</p></dd>


     <dt><dfn id="url-host" title="url-host">&lt;host&gt;</dfn></dt>

     <dd><p>The substring matched by the &lt;host&gt; production, if any.</p></dd>


     <dt><dfn id="url-port" title="url-port">&lt;port&gt;</dfn></dt>

     <dd><p>The substring matched by the &lt;port&gt; production, if any.</p></dd>


     <dt><dfn id="url-hostport" title="url-hostport">&lt;hostport&gt;</dfn></dt>

     <dd><p>If there is a &lt;scheme&gt; component and a &lt;port&gt;
     component and the port given by the &lt;port&gt; component is
     different than the default port defined for the protocol given by
     the &lt;scheme&gt; component, then &lt;hostport&gt; is the
     substring that starts with the substring matched by the
     &lt;host&gt; production and ends with the substring matched by the
     &lt;port&gt; production, and includes the colon in between the
     two. Otherwise, it is the same as the &lt;host&gt; component.</p>


     </dd><dt><dfn id="url-path" title="url-path">&lt;path&gt;</dfn></dt>

     <dd>

      <p>The substring matched by one of the following productions, if
      one of them was matched:</p>

      <ul class="brief"><li>&lt;path-abempty&gt;</li>
       <li>&lt;path-absolute&gt;</li>
       <li>&lt;path-noscheme&gt;</li>
       <li>&lt;path-rootless&gt;</li>
       <li>&lt;path-empty&gt;</li>
      </ul></dd>


     <dt><dfn id="url-query" title="url-query">&lt;query&gt;</dfn></dt>

     <dd><p>The substring matched by the &lt;query&gt; production, if any.</p></dd>


     <dt><dfn id="url-fragment" title="url-fragment">&lt;fragment&gt;</dfn></dt>

     <dd><p>The substring matched by the &lt;fragment&gt; production, if any.</p></dd>


     <dt><dfn id="url-host-specific" title="url-host-specific">&lt;host-specific&gt;</dfn></dt>

     <dd><p>The substring that <em>follows</em> the substring matched
     by the &lt;authority&gt; production, or the whole string if the
     &lt;authority&gt; production wasn't matched.</p></dd>

    </dl></li>

  </ol><p class="note">These parsing rules are a <a href="introduction.html#willful-violation">willful
  violation</a> of RFC 3986 and RFC 3987 (which do not define error
  handling), motivated by a desire to handle legacy content. <a href="references.html#refsRFC3986">[RFC3986]</a> <a href="references.html#refsRFC3987">[RFC3987]</a></p>

  </div><h4 id="resolving-urls"><span class="secno">2.6.3 </span>Resolving URLs</h4><p>Resolving a URL is the process of taking a relative URL and
  obtaining the absolute URL that it implies.</p><div class="impl">

  <p>To <dfn id="resolve-a-url">resolve a URL</dfn> to an <a href="#absolute-url">absolute URL</a>
  relative to either another <a href="#absolute-url">absolute URL</a> or an element,
  the user agent must use the following steps. Resolving a URL can
  result in an error, in which case the URL is not resolvable.</p>

  <ol><li><p>Let <var title="">url</var> be the <a href="#url">URL</a> being
   resolved.</p></li>

   <li>

    <p>Let <var title="">encoding</var> be determined as follows:</p>

    <dl class="switch"><dt>If the URL had a character encoding defined when the URL was
     created or defined</dt>

     <dd>The URL character encoding is as defined.</dd>

     <dt>If the URL came from a script (e.g. as an argument to a
     method)</dt>

     <dd>The URL character encoding is the <a href="webappapis.html#script-s-url-character-encoding">script's URL character
     encoding</a>.</dd>

     <dt>If the URL came from a DOM node (e.g. from an element)</dt>

     <dd>The node has a <code><a href="infrastructure.html#document">Document</a></code>, and the URL character
     encoding is the <a href="dom.html#document-s-character-encoding">document's character encoding</a>.</dd>

    </dl></li>

   <li><p>If <var title="">encoding</var> is a UTF-16 encoding, then
   change the value of <var title="">encoding</var> to UTF-8.</p></li>

   <li>

    <p>If the algorithm was invoked with an <a href="#absolute-url">absolute URL</a>
    to use as the base URL, let <var title="">base</var> be that
    <a href="#absolute-url">absolute URL</a>.</p>

    <p>Otherwise, let <var title="">base</var> be the <i>base URI of
    the element</i>, as defined by the XML Base specification, with
    <i>the base URI of the document entity</i> being defined as the
    <a href="#document-base-url">document base URL</a> of the <code><a href="infrastructure.html#document">Document</a></code> that
    owns the element. <a href="references.html#refsXMLBASE">[XMLBASE]</a></p>

    <p>For the purposes of the XML Base specification, user agents
    must act as if all <code><a href="infrastructure.html#document">Document</a></code> objects represented XML
    documents.</p>

    <p class="note">It is possible for <code title="attr-xml-base"><a href="elements.html#the-xml:base-attribute-xml-only">xml:base</a></code> attributes to be present
    even in HTML fragments, as such attributes can be added
    dynamically using script. (Such scripts would not be conforming,
    however, as <code title="attr-xml-base"><a href="elements.html#the-xml:base-attribute-xml-only">xml:base</a></code> attributes
    are not allowed in <a href="dom.html#html-documents">HTML documents</a>.)</p>

    <p>The <dfn id="document-base-url">document base URL</dfn> of a <code><a href="infrastructure.html#document">Document</a></code>
    object is the <a href="#absolute-url">absolute URL</a> obtained by running these
    substeps:</p>

    <ol><li><p>Let <var title="">fallback base url</var> be <a href="dom.html#the-document-s-address">the
     document's address</a>.</p></li>

     <li>

      

      
      <p>If <var title="">fallback base url</var> is
      <code><a href="fetching-resources.html#about:blank">about:blank</a></code>, and the <code><a href="infrastructure.html#document">Document</a></code>'s
      <a href="browsers.html#browsing-context">browsing context</a> has a <a href="browsers.html#creator-browsing-context">creator browsing
      context</a>, then let <var title="">fallback base url</var>
      be the <a href="#document-base-url">document base URL</a> of the <a href="browsers.html#creator-document">creator
      <code>Document</code></a> instead.</p>

     </li>

     <li><p>If the <code><a href="infrastructure.html#document">Document</a></code> is <a href="the-iframe-element.html#an-iframe-srcdoc-document">an
     <code>iframe</code> <code title="attr-iframe-srcdoc">srcdoc</code> document</a>, then
     let <var title="">fallback base url</var> be the <a href="#document-base-url">document
     base URL</a> of the <code><a href="infrastructure.html#document">Document</a></code>'s <a href="browsers.html#browsing-context">browsing
     context</a>'s <a href="browsers.html#browsing-context-container">browsing context container</a>'s
     <code><a href="infrastructure.html#document">Document</a></code> instead.</p></li>

     <li><p>If there is no <code><a href="semantics.html#the-base-element">base</a></code> element that has an <code title="attr-base-href"><a href="semantics.html#attr-base-href">href</a></code> attribute, then the
     <a href="#document-base-url">document base URL</a> is <var title="">fallback base
     url</var>; abort these steps. Otherwise, let <var title="">url</var> be the value of the <code title="attr-base-href"><a href="semantics.html#attr-base-href">href</a></code> attribute of the first such
     element.</p></li>

     <li><p><a href="#resolve-a-url" title="resolve a URL">Resolve</a> <var title="">url</var> relative to <var title="">fallback base
     url</var> (thus, the <code><a href="semantics.html#the-base-element">base</a></code> <code title="attr-base-href"><a href="semantics.html#attr-base-href">href</a></code> attribute isn't affected by
     <code title="attr-xml-base"><a href="elements.html#the-xml:base-attribute-xml-only">xml:base</a></code> attributes).</p></li>

     <li><p>The <a href="#document-base-url">document base URL</a> is the result of the
     previous step if it was successful; otherwise it is <var title="">fallback base url</var>.</p></li>

    </ol></li>

   <li><p><a href="#parse-a-url" title="parse a URL">Parse</a> <var title="">url</var> into its component parts.</p></li>

   <li>

    <p>If parsing <var title="">url</var> resulted in a <a href="#url-host" title="url-host">&lt;host&gt;</a> component, then replace the
    matching substring of <var title="">url</var> with the string that
    results from expanding any sequences of percent-encoded octets in
    that component that are valid UTF-8 sequences into Unicode
    characters as defined by UTF-8.</p>

    <p>If any percent-encoded octets in that component are not valid
    UTF-8 sequences, then return an error and abort these steps.</p>

    <p>Apply the IDNA ToASCII algorithm to the matching substring,
    with both the AllowUnassigned and UseSTD3ASCIIRules flags
    set. Replace the matching substring with the result of the ToASCII
    algorithm.</p>

    <p>If ToASCII fails to convert one of the components of the
    string, e.g. because it is too long or because it contains invalid
    characters, then return an error and abort these steps. <a href="references.html#refsRFC3490">[RFC3490]</a></p>

   </li>

   <li>

    <p>If parsing <var title="">url</var> resulted in a <a href="#url-path" title="url-path">&lt;path&gt;</a> component, then replace the
    matching substring of <var title="">url</var> with the string that
    results from applying the following steps to each character other
    than U+0025 PERCENT SIGN (%) that doesn't match the original
    &lt;path&gt; production defined in RFC 3986:</p>

    <ol><li>Encode the character into a sequence of octets as defined by
     UTF-8.</li>

     <li>Replace the character with the percent-encoded form of those
     octets. <a href="references.html#refsRFC3986">[RFC3986]</a></li>

    </ol><div class="example">

     <p>For instance if <var title="">url</var> was "<code title="">//example.com/a^b&#9786;c%FFd%z/?e</code>", then the
     <a href="#url-path" title="url-path">&lt;path&gt;</a> component's substring
     would be "<code title="">/a^b&#9786;c%FFd%z/</code>" and the two
     characters that would have to be escaped would be "<code title="">^</code>" and "<code title="">&#9786;</code>". The
     result after this step was applied would therefore be that <var title="">url</var> now had the value "<code title="">//example.com/a%5Eb%E2%98%BAc%FFd%z/?e</code>".</p>

    </div>

   </li>

   <li>

    <p>If parsing <var title="">url</var> resulted in a <a href="#url-query" title="url-query">&lt;query&gt;</a> component, then replace the
    matching substring of <var title="">url</var> with the string that
    results from applying the following steps to each character other
    than U+0025 PERCENT SIGN (%) that doesn't match the original
    &lt;query&gt; production defined in RFC 3986:</p>

    <ol><li>If the character in question cannot be expressed in the
     encoding <var title="">encoding</var>, then replace it with a
     single 0x3F octet (an ASCII question mark) and skip the remaining
     substeps for this character.</li>

     <li>Encode the character into a sequence of octets as defined by
     the encoding <var title="">encoding</var>.</li>

     <li>Replace the character with the percent-encoded form of those
     octets. <a href="references.html#refsRFC3986">[RFC3986]</a></li>

    </ol></li>

   <li><p>Apply the algorithm described in RFC 3986 section 5.2
   Relative Resolution, using <var title="">url</var> as the
   potentially relative URI reference (<var title="">R</var>), and
   <var title="">base</var> as the base URI (<var title="">Base</var>). <a href="references.html#refsRFC3986">[RFC3986]</a></p></li>

   <li>

    <p>Apply any relevant conformance criteria of RFC 3986 and RFC
    3987, returning an error and aborting these steps if
    appropriate. <a href="references.html#refsRFC3986">[RFC3986]</a> <a href="references.html#refsRFC3987">[RFC3987]</a></p>

    <p class="example">For instance, if an absolute URI that would be
    returned by the above algorithm violates the restrictions specific
    to its scheme, e.g. a <code title="">data:</code> URI using the
    "<code title="">//</code>" server-based naming authority syntax,
    then user agents are to treat this as an error instead.</p>

   </li>

   <li><p>Let <var title="">result</var> be the target URI (<var title="">T</var>) returned by the Relative Resolution
   algorithm.</p></li>

   <li><p>If <var title="">result</var> uses a scheme with a
   server-based naming authority, replace all U+005C REVERSE SOLIDUS
   (\) characters in <var title="">result</var> with U+002F SOLIDUS
   (/) characters.</p></li>

   <li><p>Return <var title="">result</var>.</p></li>

  </ol><p class="note">Some of the steps in these rules, for example the
  processing of U+005C REVERSE SOLIDUS (\) characters, are a
  <a href="introduction.html#willful-violation">willful violation</a> of RFC 3986 and RFC 3987, motivated
  by a desire to handle legacy content. <a href="references.html#refsRFC3986">[RFC3986]</a> <a href="references.html#refsRFC3987">[RFC3987]</a></p>

  </div><p>A <a href="#url">URL</a> is an <dfn id="absolute-url">absolute URL</dfn> if <a href="#resolve-a-url" title="resolve a url">resolving</a> it results in the same output
  regardless of what it is resolved relative to, and that output is
  not a failure.</p><p>An <a href="#absolute-url">absolute URL</a> is a <dfn id="hierarchical-url">hierarchical URL</dfn> if,
  when <a href="#resolve-a-url" title="resolve a url">resolved</a> and then <a href="#parse-a-url" title="parse a url">parsed</a>, there is a character immediately
  after the <a href="#url-scheme" title="url-scheme">&lt;scheme&gt;</a> component
  and it is a U+002F SOLIDUS character (/).</p><p>An <a href="#absolute-url">absolute URL</a> is an <dfn id="authority-based-url">authority-based URL</dfn>
  if, when <a href="#resolve-a-url" title="resolve a url">resolved</a> and then <a href="#parse-a-url" title="parse a url">parsed</a>, there are two characters
  immediately after the <a href="#url-scheme" title="url-scheme">&lt;scheme&gt;</a>
  component and they are both U+002F SOLIDUS characters (//).</p><div class="impl">

  <h4 id="url-manipulation-and-creation"><span class="secno">2.6.4 </span>URL manipulation and creation</h4>

  <p>To <dfn id="fragment-escaped" title="fragment-escaped">fragment-escape</dfn> a string
  <var title="">input</var>, a user agent must run the following
  steps:</p>

  <ol><li><p>Let <var title="">input</var> be the string to be
   escaped.</p></li>

   <li><p>Let <var title="">position</var> point at the first
   character of <var title="">input</var>.</p></li>

   <li><p>Let <var title="">output</var> be an empty string.</p></li>

   <li><p><i>Loop</i>: If <var title="">position</var> is past the end
   of <var title="">input</var>, then jump to the step labeled
   <i>end</i>.</p></li>

   <li>

    <p>If the character in <var title="">input</var> pointed to by
    <var title="">position</var> is in the range U+0000 to U+0020 or
    is one of the following characters:</p>

    <ul class="brief"><li>U+0022 QUOTATION MARK character (")
     </li><li>U+0023 NUMBER SIGN character (#)
     </li><li>U+0025 PERCENT SIGN character (%)
     </li><li>U+003C LESS-THAN SIGN character (&lt;)
     </li><li>U+003E GREATER-THAN SIGN character (&gt;)
     </li><li>U+005B LEFT SQUARE BRACKET character ([)
     </li><li>U+005C REVERSE SOLIDUS character (\)
     </li><li>U+005D RIGHT SQUARE BRACKET character (])
     </li><li>U+005E CIRCUMFLEX ACCENT character (^)
     </li><li>U+007B LEFT CURLY BRACKET character ({)
     </li><li>U+007C VERTICAL LINE character (|)
     </li><li>U+007D RIGHT CURLY BRACKET character (})
    </li></ul><p>...then append the percent-encoded form of the character to
    <var title="">output</var>. <a href="references.html#refsRFC3986">[RFC3986]</a></p> 
    <p>Otherwise, append the character itself to <var title="">output</var>.</p>

    <p class="note">This escapes any ASCII characters that are not
    valid in the URI &lt;fragment&gt; production without being
    escaped.</p>

   </li>

   <li><p>Advance <var title="">position</var> to the next character
   in <var title="">input</var>.</p></li>

   <li><p>Return to the step labeled <i>loop</i>.</p></li>

   <li><p><i>End</i>: Return <var title="">output</var>.</p></li>

  </ol></div><div class="impl">

  <h4 id="dynamic-changes-to-base-urls"><span class="secno">2.6.5 </span>Dynamic changes to base URLs</h4>

  <p>When an <code title="attr-xml-base"><a href="elements.html#the-xml:base-attribute-xml-only">xml:base</a></code> attribute
  changes, the attribute's element, and all descendant elements, are
  <a href="#affected-by-a-base-url-change">affected by a base URL change</a>.</p>

  <p>When a document's <a href="#document-base-url">document base URL</a> changes, all
  elements in that document are <a href="#affected-by-a-base-url-change">affected by a base URL
  change</a>.</p>

  <p>When an element is moved from one document to another, if the two
  documents have different <a href="#document-base-url" title="document base URL">base
  URLs</a>, then that element and all its descendants are
  <a href="#affected-by-a-base-url-change">affected by a base URL change</a>.</p>

  <p>When an element is <dfn id="affected-by-a-base-url-change">affected by a base URL change</dfn>, it
  must act as described in the following list:</p>

  <dl class="switch"><dt>If the element creates a <a href="links.html#hyperlink">hyperlink</a></dt>

   <dd>

    <p>If the <a href="#absolute-url">absolute URL</a> identified by the hyperlink is
    being shown to the user, or if any data derived from that URL is
    affecting the display, then the <code title="attr-hyperlink-href"><a href="links.html#attr-hyperlink-href">href</a></code> attribute should be <a href="#resolve-a-url" title="resolve a url">re-resolved</a> relative to the element
    and the UI updated appropriately.</p>

    <p class="example">For example, the CSS <code title="selector-link"><a href="links.html#selector-link">:link</a></code>/<code title="selector-visited"><a href="links.html#selector-visited">:visited</a></code> pseudo-classes might have
    been affected.</p>


   </dd>

   <dt>If the element is a <code><a href="text-level-semantics.html#the-q-element">q</a></code>, <code><a href="grouping-content.html#the-blockquote-element">blockquote</a></code>,
   <code><a href="sections.html#the-section-element">section</a></code>, <code><a href="sections.html#the-article-element">article</a></code>, <code><a href="edits.html#the-ins-element">ins</a></code>, or
   <code><a href="edits.html#the-del-element">del</a></code> element with a <code title="">cite</code>
   attribute</dt>

   <dd>

    <p>If the <a href="#absolute-url">absolute URL</a> identified by the <code title="">cite</code> attribute is being shown to the user, or if
    any data derived from that URL is affecting the display, then the
    <a href="#url">URL</a> should be <a href="#resolve-a-url" title="resolve a
    url">re-resolved</a> relative to the element and the UI updated
    appropriately.</p>

   </dd>

   <dt>Otherwise</dt>

   <dd>

    <p>The element is not directly affected.</p>

    <p class="example">Changing the base URL doesn't affect the image
    displayed by <code><a href="embedded-content-1.html#the-img-element">img</a></code> elements, although subsequent
    accesses of the <code title="dom-img-src"><a href="embedded-content-1.html#dom-img-src">src</a></code> IDL attribute
    from script will return a new <a href="#absolute-url">absolute URL</a> that might
    no longer correspond to the image being shown.</p>

   </dd>

  </dl></div><h4 id="interfaces-for-url-manipulation"><span class="secno">2.6.6 </span>Interfaces for URL manipulation</h4><p>An interface that has a complement of <dfn id="url-decomposition-idl-attributes">URL decomposition IDL
  attributes</dfn> has seven attributes with the following
  definitions:</p><pre class="idl extract">           attribute DOMString <a href="#dom-uda-protocol" title="dom-uda-protocol">protocol</a>;
           attribute DOMString <a href="#dom-uda-host" title="dom-uda-host">host</a>;
           attribute DOMString <a href="#dom-uda-hostname" title="dom-uda-hostname">hostname</a>;
           attribute DOMString <a href="#dom-uda-port" title="dom-uda-port">port</a>;
           attribute DOMString <a href="#dom-uda-pathname" title="dom-uda-pathname">pathname</a>;
           attribute DOMString <a href="#dom-uda-search" title="dom-uda-search">search</a>;
           attribute DOMString <a href="#dom-uda-hash" title="dom-uda-hash">hash</a>;</pre><dl class="domintro"><dt><var title="">o</var> . <code title="dom-uda-protocol"><a href="#dom-uda-protocol">protocol</a></code> [ = <var title="">value</var> ]</dt>
   <dd>
    <p>Returns the current scheme of the underlying URL.</p>
    <p>Can be set, to change the underlying URL's scheme.</p>
   </dd>

   <dt><var title="">o</var> . <code title="dom-uda-host"><a href="#dom-uda-host">host</a></code> [ = <var title="">value</var> ]</dt>
   <dd>
    <p>Returns the current host and port (if it's not the default port) in the underlying URL.</p>
    <p>Can be set, to change the underlying URL's host and port.</p>
    <p>The host and the port are separated by a colon. The port part,
    if omitted, will be assumed to be the current scheme's default
    port.</p>
   </dd>

   <dt><var title="">o</var> . <code title="dom-uda-hostname"><a href="#dom-uda-hostname">hostname</a></code> [ = <var title="">value</var> ]</dt>
   <dd>
    <p>Returns the current host in the underlying URL.</p>
    <p>Can be set, to change the underlying URL's host.</p>
   </dd>

   <dt><var title="">o</var> . <code title="dom-uda-port"><a href="#dom-uda-port">port</a></code> [ = <var title="">value</var> ]</dt>
   <dd>
    <p>Returns the current port in the underlying URL.</p>
    <p>Can be set, to change the underlying URL's port.</p>
   </dd>

   <dt><var title="">o</var> . <code title="dom-uda-pathname"><a href="#dom-uda-pathname">pathname</a></code> [ = <var title="">value</var> ]</dt>
   <dd>
    <p>Returns the current path in the underlying URL.</p>
    <p>Can be set, to change the underlying URL's path.</p>
   </dd>

   <dt><var title="">o</var> . <code title="dom-uda-search"><a href="#dom-uda-search">search</a></code> [ = <var title="">value</var> ]</dt>
   <dd>
    <p>Returns the current query component in the underlying URL.</p>
    <p>Can be set, to change the underlying URL's query component.</p>
   </dd>

   <dt><var title="">o</var> . <code title="dom-uda-hash"><a href="#dom-uda-hash">hash</a></code> [ = <var title="">value</var> ]</dt>
   <dd>
    <p>Returns the current fragment identifier in the underlying URL.</p>
    <p>Can be set, to change the underlying URL's fragment identifier.</p>
   </dd>

  </dl><div class="impl">

  <hr><p>The attributes defined to be <a href="#url-decomposition-idl-attributes">URL decomposition IDL
  attributes</a> must act as described for the attributes with the
  same corresponding names in this section.</p>

  <p>In addition, an interface with a complement of <a href="#url-decomposition-idl-attributes">URL
  decomposition IDL attributes</a> defines an <dfn id="concept-uda-input" title="concept-uda-input">input</dfn>, which is a <a href="#url">URL</a>
  that the attributes act on, and a <dfn id="concept-uda-setter" title="concept-uda-setter">common setter action</dfn>, which is a
  set of steps invoked when any of the attributes' setters are
  invoked.</p>

  <p>The seven <a href="#url-decomposition-idl-attributes">URL decomposition IDL attributes</a> have
  similar requirements.</p>

  <p>On getting, if the <a href="#concept-uda-input" title="concept-uda-input">input</a>
  is an <a href="#absolute-url">absolute URL</a> that fulfills the condition given in
  the "getter condition" column corresponding to the attribute in the
  table below, the user agent must return the part of the <a href="#concept-uda-input" title="concept-uda-input">input</a> URL given in the "component"
  column, with any prefixes specified in the "prefix" column
  appropriately added to the start of the string and any suffixes
  specified in the "suffix" column appropriately added to the end of
  the string. Otherwise, the attribute must return the empty
  string.</p>

  <p>On setting, the new value must first be mutated as described by
  the "setter preprocessor" column, then mutated by %-escaping any
  characters in the new value that are not valid in the relevant
  component as given by the "component" column. Then, if the <a href="#concept-uda-input" title="concept-uda-input">input</a> is an <a href="#absolute-url">absolute
  URL</a> and the resulting new value fulfills the condition given
  in the "setter condition" column, the user agent must make a new
  string <var title="">output</var> by replacing the component of the
  URL given by the "component" column in the <a href="#concept-uda-input" title="concept-uda-input">input</a> URL with the new value;
  otherwise, the user agent must let <var title="">output</var> be
  equal to the <a href="#concept-uda-input" title="concept-uda-input">input</a>. Finally,
  the user agent must invoke the <a href="#concept-uda-setter" title="concept-uda-setter">common setter action</a> with the
  value of <var title="">output</var>.</p>

  <p>When replacing a component in the URL, if the component is part
  of an optional group in the URL syntax consisting of a character
  followed by the component, the component (including its prefix
  character) must be included even if the new value is the empty
  string.</p>

  <p class="note">The previous paragraph applies in particular to the
  "<code title="">:</code>" before a &lt;port&gt; component, the "<code title="">?</code>" before a &lt;query&gt; component, and the "<code title="">#</code>" before a &lt;fragment&gt; component.</p>

  <p>For the purposes of the above definitions, URLs must be parsed
  using the <a href="#parse-a-url" title="parse a URL">URL parsing rules</a> defined
  in this specification.</p>

  <table id="table-uda"><thead><tr><th>Attribute
     </th><th>Component
     </th><th>Getter Condition
     </th><th>Prefix
     </th><th>Suffix
     </th><th>Setter Preprocessor
     </th><th>Setter Condition
   </th></tr></thead><tbody><tr><td><dfn id="dom-uda-protocol" title="dom-uda-protocol"><code>protocol</code></dfn>
     </td><td><a href="#url-scheme" title="url-scheme">&lt;scheme&gt;</a>
     </td><td>&#8212;
     </td><td>&#8212;
     </td><td>U+003A COLON (:)
     </td><td>Remove all trailing U+003A COLON characters (:)
     </td><td>The new value is not the empty string
    </td></tr><tr><td><dfn id="dom-uda-host" title="dom-uda-host"><code>host</code></dfn>
     </td><td><a href="#url-hostport" title="url-hostport">&lt;hostport&gt;</a>
     </td><td><a href="#concept-uda-input" title="concept-uda-input">input</a> is an <a href="#authority-based-url">authority-based URL</a>
     </td><td>&#8212;
     </td><td>&#8212;
     </td><td>&#8212;
     </td><td>The new value is not the empty string and <a href="#concept-uda-input" title="concept-uda-input">input</a> is an <a href="#authority-based-url">authority-based URL</a>
    </td></tr><tr><td><dfn id="dom-uda-hostname" title="dom-uda-hostname"><code>hostname</code></dfn>
     </td><td><a href="#url-host" title="url-host">&lt;host&gt;</a>
     </td><td><a href="#concept-uda-input" title="concept-uda-input">input</a> is an <a href="#authority-based-url">authority-based URL</a>
     </td><td>&#8212;
     </td><td>&#8212;
     </td><td>Remove all leading U+002F SOLIDUS characters (/)
     </td><td>The new value is not the empty string and <a href="#concept-uda-input" title="concept-uda-input">input</a> is an <a href="#authority-based-url">authority-based URL</a>
    </td></tr><tr><td><dfn id="dom-uda-port" title="dom-uda-port"><code>port</code></dfn>
     </td><td><a href="#url-port" title="url-port">&lt;port&gt;</a>
     </td><td><a href="#concept-uda-input" title="concept-uda-input">input</a> is an <a href="#authority-based-url">authority-based URL</a>, and contained a <a href="#url-port" title="url-port">&lt;port&gt;</a> component (possibly an empty one)
     </td><td>&#8212;
     </td><td>&#8212;
     </td><td>Remove all characters in the new value from the first that is not in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), if any.
         Remove any leading U+0030 DIGIT ZERO characters (0) in the new value.
         If the resulting string is empty, set it to a single U+0030 DIGIT ZERO character (0).
     </td><td><a href="#concept-uda-input" title="concept-uda-input">input</a> is an <a href="#authority-based-url">authority-based URL</a>,
         and the new value, when interpreted as a base-ten integer, is less than or equal to 65535
    </td></tr><tr><td><dfn id="dom-uda-pathname" title="dom-uda-pathname"><code>pathname</code></dfn>
     </td><td><a href="#url-path" title="url-path">&lt;path&gt;</a>
     </td><td><a href="#concept-uda-input" title="concept-uda-input">input</a> is a <a href="#hierarchical-url">hierarchical URL</a>
     </td><td>&#8212;
     </td><td>&#8212;
     </td><td>If it has no leading U+002F SOLIDUS character (/), prepend a U+002F SOLIDUS character (/) to the new value
     </td><td><a href="#concept-uda-input" title="concept-uda-input">input</a> is hierarchical
    </td></tr><tr><td><dfn id="dom-uda-search" title="dom-uda-search"><code>search</code></dfn>
     </td><td><a href="#url-query" title="url-query">&lt;query&gt;</a>
     </td><td><a href="#concept-uda-input" title="concept-uda-input">input</a> is a <a href="#hierarchical-url">hierarchical URL</a>, and contained a <a href="#url-query" title="url-query">&lt;query&gt;</a> component (possibly an empty one)
     </td><td>U+003F QUESTION MARK (?)
     </td><td>&#8212;
     </td><td>Remove one leading U+003F QUESTION MARK character (?), if any
     </td><td><a href="#concept-uda-input" title="concept-uda-input">input</a> is a <a href="#hierarchical-url">hierarchical URL</a>
    </td></tr><tr><td><dfn id="dom-uda-hash" title="dom-uda-hash"><code>hash</code></dfn>
     </td><td><a href="#url-fragment" title="url-fragment">&lt;fragment&gt;</a>
     </td><td><a href="#concept-uda-input" title="concept-uda-input">input</a> contained a non-empty <a href="#url-fragment" title="url-fragment">&lt;fragment&gt;</a> component
     </td><td>U+0023 NUMBER SIGN (#)
     </td><td>&#8212;
     </td><td>Remove one leading U+0023 NUMBER SIGN character (#), if any
     </td><td>&#8212;
  </td></tr></tbody></table></div><div class="example">

   <p>The table below demonstrates how the getter <span class="impl">condition</span> for <code title="dom-uda-search"><a href="#dom-uda-search">search</a></code> results in different results
   depending on the exact original syntax of the URL:</p>

   <table id="table-uda-examples"><thead><tr><th> Input URL
      </th><th> <code title="dom-uda-search"><a href="#dom-uda-search">search</a></code> value
      </th><th> Explanation
    </th></tr></thead><tbody><tr><td> <code title="">http://example.com/</code>
      </td><td> <i>empty string</i>
      </td><td> No <a href="#url-query" title="url-query">&lt;query&gt;</a> component in input URL.
     </td></tr><tr><td> <code title="">http://example.com/?</code>
      </td><td> <code title="">?</code>
      </td><td> There is a <a href="#url-query" title="url-query">&lt;query&gt;</a> component, but it is empty.
           <span class="impl">The question mark in the resulting value is the prefix.</span>
     </td></tr><tr><td> <code title="">http://example.com/?test</code>
      </td><td> <code title="">?test</code>
      </td><td> The <a href="#url-query" title="url-query">&lt;query&gt;</a> component has the value "<code title="">test</code>".
     </td></tr><tr><td> <code title="">http://example.com/?test#</code>
      </td><td> <code title="">?test</code>
      </td><td> The (empty) <a href="#url-fragment" title="url-fragment">&lt;fragment&gt;</a> component is not part of the <a href="#url-query" title="url-query">&lt;query&gt;</a> component.
   </td></tr></tbody></table></div><div class="example">

   <p>The following table is similar; it provides a list of what each
   of the <a href="#url-decomposition-idl-attributes">URL decomposition IDL attributes</a> returns for a
   given <var title="">input</var> URL.</p>

   <table><thead><tr><th>Input
      </th><th><code title="dom-uda-protocol"><a href="#dom-uda-protocol">protocol</a></code>
      </th><th><code title="dom-uda-host"><a href="#dom-uda-host">host</a></code>
      </th><th><code title="dom-uda-hostname"><a href="#dom-uda-hostname">hostname</a></code>
      </th><th><code title="dom-uda-port"><a href="#dom-uda-port">port</a></code>
      </th><th><code title="dom-uda-pathname"><a href="#dom-uda-pathname">pathname</a></code>
      </th><th><code title="dom-uda-search"><a href="#dom-uda-search">search</a></code>
      </th><th><code title="dom-uda-hash"><a href="#dom-uda-hash">hash</a></code>
    </th></tr></thead><tbody><tr><td><code title="">http://example.com/carrot#question%3f</code>
      </td><td><code title="">http:</code>
      </td><td><code title="">example.com</code>
      </td><td><code title="">example.com</code>
      </td><td>(empty string)
      </td><td><code title="">/carrot</code>
      </td><td>(empty string)
      </td><td><code title="">#question%3f</code>
     </td></tr><tr><td><code title="">https://www.example.com:4443?</code>
      </td><td><code title="">https:</code>
      </td><td><code title="">www.example.com:4443</code>
      </td><td><code title="">www.example.com</code>
      </td><td><code title="">4443</code>
      </td><td><code title="">/</code>
      </td><td><code title="">?</code>
      </td><td>(empty string)
   </td></tr></tbody></table></div></body></html>