Last active
September 12, 2018 12:00
-
-
Save EnnexMB/5900762da38565b41a2b8b7147caca5d to your computer and use it in GitHub Desktop.
Proposal for URL issue "Add a neato informative table of various URL pieces"
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html><html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"> | |
| <meta content="#3c790a" name="theme-color"> | |
| <title>URL Standard</title> | |
| <link href="https://resources.whatwg.org/spec.css" rel="stylesheet"> | |
| <link href="https://resources.whatwg.org/standard.css" rel="stylesheet"> | |
| <link href="https://resources.whatwg.org/logo-url.svg" rel="icon"> | |
| <script async src="https://resources.whatwg.org/file-issue.js"></script> | |
| <script async src="https://resources.whatwg.org/commit-snapshot-shortcut-key.js"></script> | |
| <meta content="Bikeshed version 0c35a3656402f53487c2d78e8b0a21ddc8d98a8f" name="generator"> | |
| <style>/* style-dfn-panel */ | |
| .dfn-panel { | |
| position: absolute; | |
| z-index: 35; | |
| height: auto; | |
| width: -webkit-fit-content; | |
| width: fit-content; | |
| max-width: 300px; | |
| max-height: 500px; | |
| overflow: auto; | |
| padding: 0.5em 0.75em; | |
| font: small Helvetica Neue, sans-serif, Droid Sans Fallback; | |
| background: #DDDDDD; | |
| color: black; | |
| border: outset 0.2em; | |
| } | |
| .dfn-panel:not(.on) { display: none; } | |
| .dfn-panel * { margin: 0; padding: 0; text-indent: 0; } | |
| .dfn-panel > b { display: block; } | |
| .dfn-panel a { color: black; } | |
| .dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; } | |
| .dfn-panel > b + b { margin-top: 0.25em; } | |
| .dfn-panel ul { padding: 0; } | |
| .dfn-panel li { list-style: inside; } | |
| .dfn-panel.activated { | |
| display: inline-block; | |
| position: fixed; | |
| left: .5em; | |
| bottom: 2em; | |
| margin: 0 auto; | |
| max-width: calc(100vw - 1.5em - .4em - .5em); | |
| max-height: 30vh; | |
| } | |
| .dfn-paneled { cursor: pointer; } | |
| </style> | |
| <body class="h-entry status-LS"> | |
| <p>Proposal for URL issue <a HRef="https://github.com/whatwg/url/issues/337"><i>Add a neato informative table of various URL pieces</i></a></p> | |
| <UL class="brief"> | |
| <LI><a HRef="#original">URL Syntax: Original Table Proposal, modified</a> | |
| <LI><a HRef="#formula">URL Syntax: Formulaic Representation</a> | |
| <LI><a HRef="#graphic">URL Syntax: Graphical Representation</a> | |
| <LI><a HRef="#conditions">URL Syntax: Element Conditions</a> | |
| <LI><a HRef="#notes">URL Syntax: Development Log</a> | |
| </UL> | |
| <h4 ID="original">URL Syntax: Original Table Proposal, modified</h4> | |
| <div class=example> | |
| <!-- | |
| <table> | |
| <tr> | |
| <td><code>https:</code> | |
| <td><code>//</code> | |
| <td><code>user</code> | |
| <td><code>:</code> | |
| <td><code>pass</code> | |
| <td><code>@</code> | |
| <td><code>sub.host.com</code> | |
| <td><code>:</code> | |
| <td><code>8080</code> | |
| <td><code>/p/a/t/h</code> | |
| <td><code>?query=string</code> | |
| <td><code>#hash</code> | |
| <tr> | |
| <td><code class="idl">protocol</code> | |
| <td> | |
| <td><code class="idl">username</code> | |
| <td> | |
| <td><code class="idl">password</code> | |
| <td> | |
| <td><code class="idl">hostname</code> | |
| <td> | |
| <td><code class="idl">port</code> | |
| <td><code class="idl">pathname</code> | |
| <td><code class="idl">search</code> | |
| <td><code class="idl">hash</code> | |
| <tr> | |
| <td colspan=6> | |
| <td colspan=3><code class="idl">host</code> | |
| <td colspan=3> | |
| <tr> | |
| <td colspan=12><code class="idl">href</code> | |
| </table> | |
| <br> | |
| <table> | |
| <tr> | |
| <td><code>https:</code> | |
| <td><code>//</code> | |
| <td><code>user</code> | |
| <td><code>:</code> | |
| <td><code>pass</code> | |
| <td><code>@</code> | |
| <td><code>sub.host.com</code> | |
| <td><code>:</code> | |
| <td><code>8080</code> | |
| <td><code>/p/a/t/h</code> | |
| <td><code>?query=string</code> | |
| <td><code>#hash</code> | |
| <tr> | |
| <td colspan=6> | |
| <td><code class="idl">hostname</code> | |
| <td> | |
| <td><code class="idl">port</code> | |
| <td colspan=3> | |
| <tr> | |
| <td><code class="idl">protocol</code> | |
| <td> | |
| <td><code class="idl">username</code> | |
| <td> | |
| <td><code class="idl">password</code> | |
| <td> | |
| <td colspan=3><code class="idl">host</code> | |
| <td><code class="idl">pathname</code> | |
| <td><code class="idl">search</code> | |
| <td><code class="idl">hash</code> | |
| <tr> | |
| <td colspan=12><code class="idl">href</code> | |
| </table> | |
| <br> | |
| <table> | |
| <tr> | |
| <td><code>https:</code> | |
| <td><code>//</code> | |
| <td><code>user</code> | |
| <td><code>:</code> | |
| <td><code>pass</code> | |
| <td><code>@</code> | |
| <td><code>sub.host.com</code> | |
| <td><code>:</code> | |
| <td><code>8080</code> | |
| <td><code>/p/a/t/h</code> | |
| <td><code>?query=string</code> | |
| <td><code>#hash</code> | |
| <tr> | |
| <td colspan=6> | |
| <td><code class="idl">hostname</code> | |
| <td> | |
| <td><code class="idl">port</code> | |
| <td colspan=3> | |
| <tr> | |
| <td><code class="idl">protocol</code> | |
| <td> | |
| <td><code class="idl">username</code> | |
| <td> | |
| <td><code class="idl">password</code> | |
| <td> | |
| <td colspan=3><code class="idl">host</code> | |
| <td><code class="idl">pathname</code> | |
| <td><code class="idl">search</code> | |
| <td><code class="idl">hash</code> | |
| <tr> | |
| <td colspan=2><code class="idl">origin</code> | |
| <td colspan=4> | |
| <td colspan=3><code class="idl">origin</code> | |
| <tr> | |
| <td colspan=12><code class="idl">href</code> | |
| </table> | |
| <br> | |
| <table> | |
| <tr> | |
| <td><code>urn:</code> | |
| <td><code>ietf:rfc:3986</code> | |
| <tr> | |
| <td><code class="idl">protocol</code> | |
| <td><code class="idl">pathname</code> | |
| <tr> | |
| <td colspan=2><code class="idl">href</code> | |
| </table> | |
| --> | |
| <table> | |
| <tr> | |
| <td><code>https:</code> | |
| <td><code>//</code> | |
| <td><code>user</code> | |
| <td><code>:</code> | |
| <td><code>pass</code> | |
| <td><code>@</code> | |
| <td><code>sub.domain.com</code> | |
| <td><code>:</code> | |
| <td><code>80</code> | |
| <td><code>/p/a/t/h</code> | |
| <td><code>?</code> | |
| <td><code>term=value</code> | |
| <td><code>#</code> | |
| <td><code>ID</code> | |
| <tr> | |
| <td><a href="https://url.spec.whatwg.org/#concept-url-scheme"><code class="idl">scheme</code></a> | |
| <td> | |
| <td><a href="https://url.spec.whatwg.org/#concept-url-username"><code class="idl">username</code></a> | |
| <td> | |
| <td><a href="https://url.spec.whatwg.org/#concept-url-password"><code class="idl">password</code></a> | |
| <td> | |
| <td><a href="https://url.spec.whatwg.org/#concept-url-host"><code class="idl">host</code></a> | |
| <td> | |
| <td><a href="https://url.spec.whatwg.org/#concept-url-port"><code class="idl">port</code></a> | |
| <td><a href="https://url.spec.whatwg.org/#concept-url-path"><code class="idl">path</code></a> | |
| <td> | |
| <td><a href="https://url.spec.whatwg.org/#concept-url-query"><code class="idl">query</code></a> | |
| <td> | |
| <td><a href="https://url.spec.whatwg.org/#concept-url-fragment"><code class="idl">fragment</code></a> | |
| <tr> | |
| <td colspan=2><code class="idl">origin</code> | |
| <td colspan=4> | |
| <td colspan=3><code class="idl">origin</code> | |
| <tr> | |
| <td colspan=14><code class="idl">href</code> | |
| </table> | |
| </div> | |
| <h4 ID="formula">URL Syntax: Formulaic Representation</h4> | |
| <p><a href="https://url.spec.whatwg.org/#concept-url-scheme">scheme</a>: [ // [ [ <a href="https://url.spec.whatwg.org/#concept-url-username">username</a> [ :<a href="https://url.spec.whatwg.org/#concept-url-password">password</a> ] @ ] <a href="https://url.spec.whatwg.org/#concept-url-host">host</a> [ :<a href="https://url.spec.whatwg.org/#concept-url-port">port</a> ] ] ] [ { <a href="https://url.spec.whatwg.org/#concept-url-path">path</a>0 | /<a href="https://url.spec.whatwg.org/#concept-url-path">path</a>1 [ /<a href="https://url.spec.whatwg.org/#concept-url-path">path</a>2 [ …/<a href="https://url.spec.whatwg.org/#concept-url-path">path</a>n ] ] } ] [ ?<a href="https://url.spec.whatwg.org/#concept-url-query">query</a> ] [ #<a href="https://url.spec.whatwg.org/#concept-url-fragment">fragment</a> ] </p> | |
| <h4 ID="graphic">URL Syntax: Graphical Representation</h4> | |
| <table> | |
| <TR> | |
| <TD RowSpan=4 style="border:0; padding:5px; vertical-align:top"><a href="https://url.spec.whatwg.org/#concept-url-scheme">scheme</a>:</TD> | |
| <TD RowSpan=4 style="border:0; padding:5px; vertical-align:top; background:hsl(240, 100%, 50%);">//</TD> | |
| <TD ColSpan=5 style="border:0; padding:5px; background:hsl(240, 100%, 50%);"> </TD> | |
| <TD RowSpan=5 style="border:0; padding:0;"> </TD> | |
| <TD style="border:0; padding:5px; background:hsl(120, 100%, 40%);"><a href="https://url.spec.whatwg.org/#concept-url-path">path</a>[0]</TD> | |
| <TD RowSpan=5 style="border:0; padding:0;"> </TD> | |
| <TD RowSpan=5 style="border:0; padding:5px; background:hsl(120, 100%, 40%);">/<a href="https://url.spec.whatwg.org/#concept-url-path">path</a>[1]</TD> | |
| <TD ColSpan=4 style="border:0; padding:5px; background:hsl(120, 100%, 40%);"> </TD> | |
| <TD RowSpan=5 style="border:0; padding:0;"> </TD> | |
| <TD style="border:0; padding:5px; background:#FFC000;">?<a href="https://url.spec.whatwg.org/#concept-url-query">query</a></TD> | |
| <TD RowSpan=5 style="border:0; padding:0;"> </TD> | |
| <TD style="border:0; padding:5px; background:fuchsia;">#<a href="https://url.spec.whatwg.org/#concept-url-fragment">fragment</a></TD> | |
| </TR> | |
| <TR> | |
| <TD ColSpan=3 style="border:0; padding:5px; background:hsl(210, 100%, 50%);"> </TD> | |
| <TD RowSpan=3 style="border:0; padding:5px; vertical-align:top; background:hsl(210, 100%, 50%);"><a href="https://url.spec.whatwg.org/#concept-url-host">host</a></TD> | |
| <TD style="border:0; padding:5px; background:hsl(210, 100%, 50%);"> </TD> | |
| <TD RowSpan=4 style="border:0; padding:0;"> </TD> | |
| <TD RowSpan=4 style="border:0; padding:5px; background:hsl(120, 100%, 50%);">/<a href="https://url.spec.whatwg.org/#concept-url-path">path</a>[2]</TD> | |
| <TD ColSpan=3 style="border:0; padding:5px; background:hsl(120, 100%, 50%);"> </TD> | |
| </TR> | |
| <TR> | |
| <TD RowSpan=2 style="border:0; padding:5px; vertical-align:top; background:hsl(195, 100%, 50%);"><a href="https://url.spec.whatwg.org/#concept-url-username">username</a></TD> | |
| <TD style="border:0; padding:5px; background:hsl(195, 100%, 50%);"> </TD> | |
| <TD RowSpan=2 style="border:0; padding:5px; vertical-align:top; background:hsl(195, 100%, 50%);">@</TD> | |
| <TD style="border:0; padding:5px; background:hsl(180, 100%, 50%);">:<a href="https://url.spec.whatwg.org/#concept-url-port">port</a></TD> | |
| <TD RowSpan=3 style="border:0; padding:5px; background:hsl(120, 100%, 80%);">/<a href="https://url.spec.whatwg.org/#concept-url-path">path</a>[3]</TD> | |
| <TD ColSpan=2 style="border:0; padding:5px; background:hsl(120, 100%, 80%);"> </TD> | |
| </TR> | |
| <TR> | |
| <TD style="border:0; padding:5px; background:hsl(187, 100%, 50%);">:<a href="https://url.spec.whatwg.org/#concept-url-password">password</a></TD> | |
| <TD RowSpan=2 style="border:0; padding:5px;"> </TD> | |
| <TD RowSpan=2 style="border:0; padding:5px; background:hsl(120, 100%, 90%);">...</TD> | |
| <TD style="border:0; padding:5px; background:hsl(120, 100%, 90%);"> </TD> | |
| </TR> | |
| <TR> | |
| <TD ColSpan=7 style="border:0; padding:5px;"> </TD> | |
| <TD style="border:0; padding:5px; background:hsl(120, 100%, 95%);">/<a href="https://url.spec.whatwg.org/#concept-url-path">path</a>[<i>n</i>]</TD> | |
| </TR> | |
| </table> | |
| <h4 ID="conditions">URL Syntax: Element Conditions</h4> | |
| <table> | |
| <TR><TH>Element</TH> <TH>Present if:</TH></TR> | |
| <TR><TD><a href="https://url.spec.whatwg.org/#concept-url-scheme">scheme</a>:</TD> <TD>Always</TD></TR> | |
| <TR><TD>//</TD> <TD><a href="https://url.spec.whatwg.org/#concept-url-host">host</a> is non-null or <a href="https://url.spec.whatwg.org/#concept-url-scheme">scheme</a> = "file"</TD></TR> | |
| <TR><TD><a href="https://url.spec.whatwg.org/#concept-url-username">username</a></TD> <TD><a href="https://url.spec.whatwg.org/#concept-url-host">host</a> is present and URL <a href="https://url.spec.whatwg.org/#include-credentials">includes credentials</a></TD></TR> | |
| <TR><TD>:<a href="https://url.spec.whatwg.org/#concept-url-password">password</a></TD> <TD><a href="https://url.spec.whatwg.org/#concept-url-username">username</a> is present and <a href="https://url.spec.whatwg.org/#concept-url-password">password</a> is not the empty string</TD></TR> | |
| <TR><TD>@</TD> <TD><a href="https://url.spec.whatwg.org/#concept-url-username">username</a> is present</TD></TR> | |
| <TR><TD><a href="https://url.spec.whatwg.org/#concept-url-host">host</a></TD> <TD><a href="https://url.spec.whatwg.org/#concept-url-host">host</a> is non-null</TD></TR> | |
| <TR><TD>:<a href="https://url.spec.whatwg.org/#concept-url-port">port</a></TD> <TD><a href="https://url.spec.whatwg.org/#concept-url-host">host</a> is present and <a href="https://url.spec.whatwg.org/#concept-url-port">port</a> is non-null</TD></TR> | |
| <TR><TD><a href="https://url.spec.whatwg.org/#concept-url-path">path</a>[0]</TD> <TD><a href="https://url.spec.whatwg.org/#url-cannot-be-a-base-url-flag">cannot-be-a-base-URL flag</a> is set</TD></TR> | |
| <TR><TD>/<a href="https://url.spec.whatwg.org/#concept-url-path">path</a>[<i>n</i>]</TD> <TD><a href="https://url.spec.whatwg.org/#url-cannot-be-a-base-url-flag">cannot-be-a-base-URL flag</a> is clear and <a href="https://url.spec.whatwg.org/#concept-url-path">path</a>[<i>n</i>] is not the empty string</TD></TR> | |
| <TR><TD>?<a href="https://url.spec.whatwg.org/#concept-url-query">query</a></TD> <TD><a href="https://url.spec.whatwg.org/#concept-url-query">query</a> is non-null</TD></TR> | |
| <TR><TD>#<a href="https://url.spec.whatwg.org/#concept-url-fragment">fragment</a></TD> <TD><i>exclude fragment flag</i> is clear and URL’s <a href="https://url.spec.whatwg.org/#concept-url-fragment">fragment</a> is non-null</TD></TR> | |
| </table> | |
| <h4 ID="notes">URL Syntax: Development Log</h4> | |
| <p>Technical note of how this file was made:</p> | |
| <UL> | |
| <LI>Overall file | |
| <UL class="brief"> | |
| <LI>From <a href="https://github.com/whatwg/url/issues/337#issuecomment-419817833">issue comment</a>, saved <a href="https://html5.org/temp/url.bs">url.bs</a> as a text file with filename "URL Syntax Representation Proposal.htm".</LI> | |
| <LI>Deleted from beginning to <code><div class=example></code>, exclusive.</LI> | |
| <LI>After <code><div class=example></code>, deleted from next <code></div></code>, exclusive, to end.</LI> | |
| <LI>Inserted at top the source code of <a href="https://url.spec.whatwg.org">the URL standard</a> from beginning to <code><body class="h-entry status-LS"></code>, inclusive.</LI> | |
| <LI>Inserted <code></body></code> and <code></html></code> at end.</LI> | |
| <LI>Inserted formulaic and graphical representations and table of element conditions.</LI> | |
| <LI>Inserted this section of notes at the end.</LI> | |
| <LI>Inserted <code><h4></code> headings and table of contents.</LI> | |
| </UL> | |
| </LI> | |
| <LI>Original table proposal | |
| <UL class="brief"> | |
| <LI>Replaced <code>{{URL/</code> -> <code><code class="idl"></code> and <code>}}</code> -> <code></code></code>.</LI> | |
| <LI>Commented out the four tables and put copy of third table below that.</LI> | |
| <LI>In third row of copied table, conformed to terminology of URL standard by changing: "protocol" -> "scheme", "pathname" -> "path", "search" -> "query", "hash" -> "fragment"</LI> | |
| <LI>In third row of copied table, inserted cell for "port".</LI> | |
| <LI>Deleted second row of copied table.</LI> | |
| <LI>In conformance with treatment of other delimiters, inserted separate columns for "?" and "#".</LI> | |
| <LI>In first row of table, changed "host" -> "domain", "8080" -> "80", "query=string" -> "term=value", "hash" -> "ID"</LI> | |
| </UL> | |
| </LI> | |
| <LI>Formulaic representation | |
| <UL class="brief"> | |
| <LI>Inserted formulaic representation from issue <a HRef="https://github.com/whatwg/meta/issues/104"><i>Documentation on URL syntax</i></a>.</LI> | |
| <LI>Corrected path part by moving "}" to the right by two closing brackets.</LI> | |
| <LI>Added spaces around brackets and "|" to make more readable.</LI> | |
| </UL> | |
| </LI> | |
| <LI>Graphical representation and table of element conditions | |
| <UL class="brief"> | |
| <LI>From scratch</LI> | |
| </UL> | |
| </LI> | |
| </UL> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment