{"id":1678,"date":"2022-03-07T15:58:01","date_gmt":"2022-03-07T19:58:01","guid":{"rendered":"https:\/\/ten30media.com\/sapnew\/?p=1678"},"modified":"2022-03-07T16:17:48","modified_gmt":"2022-03-07T20:17:48","slug":"url-explained","status":"publish","type":"post","link":"https:\/\/ten30media.com\/sapnew\/url-explained\/","title":{"rendered":"URL Explained"},"content":{"rendered":"<p><strong>URL Explained<\/strong><\/p>\n<div id=\"attachment_1669\" style=\"width: 535px\" class=\"wp-caption alignnone\"><img decoding=\"async\" loading=\"lazy\" aria-describedby=\"caption-attachment-1669\" class=\"wp-image-1669 size-large\" src=\"https:\/\/ten30media.com\/sapnew\/wp-content\/uploads\/2022\/03\/URL-Image2-1024x551.jpg\" alt=\"URL stands for Uniform Resource Locator\" width=\"525\" height=\"282\" srcset=\"https:\/\/ten30media.com\/sapnew\/wp-content\/uploads\/2022\/03\/URL-Image2-1024x551.jpg 1024w, https:\/\/ten30media.com\/sapnew\/wp-content\/uploads\/2022\/03\/URL-Image2-300x162.jpg 300w, https:\/\/ten30media.com\/sapnew\/wp-content\/uploads\/2022\/03\/URL-Image2-768x414.jpg 768w, https:\/\/ten30media.com\/sapnew\/wp-content\/uploads\/2022\/03\/URL-Image2.jpg 1170w\" sizes=\"(max-width: 525px) 100vw, 525px\" \/><p id=\"caption-attachment-1669\" class=\"wp-caption-text\">URL stands for Uniform Resource Locator<\/p><\/div>\n<p>This article discusses Uniform Resource Locators (URLs), explaining what they are and how they&#8217;re structured.<\/p>\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/Common_questions\/What_is_a_URL#summary\"><strong>Summary<\/strong><\/a><\/p>\n<p>With\u00a0Hypertext\u00a0and\u00a0HTTP,\u00a0<strong><em>URL<\/em><\/strong>\u00a0is one of the key concepts of the Web. It is the mechanism used by\u00a0browsers\u00a0to retrieve any published resource on the web.<\/p>\n<p><strong>URL<\/strong>\u00a0stands for\u00a0<em>Uniform Resource Locator<\/em>. A URL is nothing more than the address of a given unique resource on the Web. In theory, each valid URL points to a unique resource. Such resources can be an HTML page, a CSS document, an image, etc. In practice, there are some exceptions, the most common being a URL pointing to a resource that no longer exists or that has moved. As the resource represented by the URL and the URL itself are handled by the Web server, it is up to the owner of the web server to carefully manage that resource and its associated URL.<\/p>\n<p><strong>Basics: anatomy of a URL<\/strong><\/p>\n<p>Here are some examples of URLs:<\/p>\n<p>https:\/\/developer.mozilla.org<\/p>\n<p>https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/<\/p>\n<p>https:\/\/developer.mozilla.org\/en-US\/search?q=URL<\/p>\n<p>Any of those URLs can be typed into your browser&#8217;s address bar to tell it to load the associated page (resource).<\/p>\n<p>A URL is composed of different parts, some mandatory and others optional. The most important parts are highlighted on the URL below (details are provided in the following sections):<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-1664 size-large\" src=\"https:\/\/ten30media.com\/sapnew\/wp-content\/uploads\/2022\/03\/mdn-url-all-1024x99.png\" alt=\"\" width=\"525\" height=\"51\" srcset=\"https:\/\/ten30media.com\/sapnew\/wp-content\/uploads\/2022\/03\/mdn-url-all-1024x99.png 1024w, https:\/\/ten30media.com\/sapnew\/wp-content\/uploads\/2022\/03\/mdn-url-all-300x29.png 300w, https:\/\/ten30media.com\/sapnew\/wp-content\/uploads\/2022\/03\/mdn-url-all-768x74.png 768w, https:\/\/ten30media.com\/sapnew\/wp-content\/uploads\/2022\/03\/mdn-url-all-1536x148.png 1536w, https:\/\/ten30media.com\/sapnew\/wp-content\/uploads\/2022\/03\/mdn-url-all-2048x198.png 2048w\" sizes=\"(max-width: 525px) 100vw, 525px\" \/><\/p>\n<p><strong>Note:<\/strong>\u00a0You might think of a URL like a regular postal mail address: the\u00a0<em>scheme<\/em>\u00a0represents the postal service you want to use, the\u00a0<em>domain name<\/em>\u00a0is the city or town, and the\u00a0<em>port<\/em>\u00a0is like the zip code; the\u00a0<em>path<\/em>\u00a0represents the building where your mail should be delivered; the\u00a0<em>parameters<\/em>\u00a0represent extra information such as the number of the apartment in the building; and, finally, the\u00a0<em>anchor<\/em>\u00a0represents the actual person to whom you&#8217;ve addressed your mail.<\/p>\n<p><strong>Note:<\/strong>\u00a0There are\u00a0some extra parts and some extra rules\u00a0regarding URLs, but they are not relevant for regular users or Web developers. Don&#8217;t worry about this, you don&#8217;t need to know them to build and use fully functional URLs.<\/p>\n<p><strong>Scheme<\/strong><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-1667 size-full\" src=\"https:\/\/ten30media.com\/sapnew\/wp-content\/uploads\/2022\/03\/Scheme.png\" alt=\"\" width=\"624\" height=\"111\" srcset=\"https:\/\/ten30media.com\/sapnew\/wp-content\/uploads\/2022\/03\/Scheme.png 624w, https:\/\/ten30media.com\/sapnew\/wp-content\/uploads\/2022\/03\/Scheme-300x53.png 300w\" sizes=\"(max-width: 624px) 100vw, 624px\" \/><\/p>\n<p>The first part of the URL is the\u00a0<em>scheme<\/em>, which indicates the protocol that the browser must use to request the resource (a protocol is a set method for exchanging or transferring data around a computer network). Usually for websites the protocol is HTTPS or HTTP (its unsecured version). Addressing web pages requires one of these two, but browsers also know how to handle other schemes such as\u00a0mailto:\u00a0(to open a mail client), so don&#8217;t be surprised if you see other protocols.<\/p>\n<p><strong>Authority<\/strong><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-1663 size-full\" src=\"https:\/\/ten30media.com\/sapnew\/wp-content\/uploads\/2022\/03\/Authority.png\" alt=\"\" width=\"624\" height=\"97\" srcset=\"https:\/\/ten30media.com\/sapnew\/wp-content\/uploads\/2022\/03\/Authority.png 624w, https:\/\/ten30media.com\/sapnew\/wp-content\/uploads\/2022\/03\/Authority-300x47.png 300w\" sizes=\"(max-width: 624px) 100vw, 624px\" \/><\/p>\n<p>Next follows the\u00a0<em>authority<\/em>, which is separated from the scheme by the character pattern\u00a0:\/\/. If present the authority includes both the\u00a0<em>domain<\/em>\u00a0(e.g.,\u00a0www.example.com) and the\u00a0<em>port<\/em>\u00a0(80), separated by a colon:<\/p>\n<ul>\n<li>The domain indicates which Web server is being requested. Usually this is a domain name, but an\u00a0IP address\u00a0may also be used (but this is rare as it is much less convenient).<\/li>\n<li>The port indicates the technical &#8220;gate&#8221; used to access the resources on the web server. It is usually omitted if the web server uses the standard ports of the HTTP protocol (80 for HTTP and 443 for HTTPS) to grant access to its resources. Otherwise, it is mandatory.<\/li>\n<\/ul>\n<p><strong>Note:<\/strong>\u00a0The separator between the scheme and authority is\u00a0:\/\/. The colon separates the scheme from the next part of the URL, while\u00a0\/\/\u00a0indicates that the next part of the URL is the authority.<\/p>\n<p>One example of a URL that doesn&#8217;t use an authority is the mail client (mailto:foobar). It contains a scheme but doesn&#8217;t use an authority component. Therefore, the colon is not followed by two slashes and only acts as a delimiter between the scheme and mail address.<\/p>\n<p><strong>Path to resource<\/strong><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-1666 size-full\" src=\"https:\/\/ten30media.com\/sapnew\/wp-content\/uploads\/2022\/03\/Path-To-Resource.png\" alt=\"\" width=\"624\" height=\"99\" srcset=\"https:\/\/ten30media.com\/sapnew\/wp-content\/uploads\/2022\/03\/Path-To-Resource.png 624w, https:\/\/ten30media.com\/sapnew\/wp-content\/uploads\/2022\/03\/Path-To-Resource-300x48.png 300w\" sizes=\"(max-width: 624px) 100vw, 624px\" \/><\/p>\n<p>\/path\/to\/myfile.html\u00a0is the path to the resource on the Web server. In the early days of the Web, a path like this represented a physical file location on the Web server. Nowadays, it is mostly an abstraction handled by Web servers without any physical reality.<\/p>\n<p><strong>Parameters<\/strong><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-1665 size-full\" src=\"https:\/\/ten30media.com\/sapnew\/wp-content\/uploads\/2022\/03\/Parameters.png\" alt=\"\" width=\"624\" height=\"99\" srcset=\"https:\/\/ten30media.com\/sapnew\/wp-content\/uploads\/2022\/03\/Parameters.png 624w, https:\/\/ten30media.com\/sapnew\/wp-content\/uploads\/2022\/03\/Parameters-300x48.png 300w\" sizes=\"(max-width: 624px) 100vw, 624px\" \/><\/p>\n<p>?key1=value1&amp;key2=value2\u00a0are extra parameters provided to the Web server. Those parameters are a list of key\/value pairs separated with the\u00a0&amp;\u00a0symbol. The Web server can use those parameters to do extra stuff before returning the resource. Each Web server has its own rules regarding parameters, and the only reliable way to know if a specific Web server is handling parameters is by asking the Web server owner.<\/p>\n<p><strong>Anchor<\/strong><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-1662 size-full\" src=\"https:\/\/ten30media.com\/sapnew\/wp-content\/uploads\/2022\/03\/Anchor.png\" alt=\"\" width=\"624\" height=\"99\" srcset=\"https:\/\/ten30media.com\/sapnew\/wp-content\/uploads\/2022\/03\/Anchor.png 624w, https:\/\/ten30media.com\/sapnew\/wp-content\/uploads\/2022\/03\/Anchor-300x48.png 300w\" sizes=\"(max-width: 624px) 100vw, 624px\" \/><\/p>\n<p>#SomewhereInTheDocument\u00a0is an anchor to another part of the resource itself. An anchor represents a sort of &#8220;bookmark&#8221; inside the resource, giving the browser the directions to show the content located at that &#8220;bookmarked&#8221; spot. On an HTML document, for example, the browser will scroll to the point where the anchor is defined; on a video or audio document, the browser will try to go to the time the anchor represents. It is worth noting that the part after the\u00a0<strong>#<\/strong>, also known as the\u00a0<strong>fragment identifier<\/strong>, is never sent to the server with the request.<\/p>\n<p><strong>How to use URLs<\/strong><\/p>\n<p>Any URL can be typed right inside the browser&#8217;s address bar to get to the resource behind it. But this is only the tip of the iceberg!<\/p>\n<p>The\u00a0HTML\u00a0language makes extensive use of URLs:<\/p>\n<ul>\n<li>to create links to other documents with the\u00a0&lt;a&gt;\u00a0element.<\/li>\n<li>to link a document with its related resources through various elements such as\u00a0&lt;link&gt;\u00a0or\u00a0&lt;script&gt;;<\/li>\n<li>to display media such as images (with the\u00a0&lt;img&gt;\u00a0element), videos (with the\u00a0&lt;video&gt;\u00a0element), sounds and music (with the\u00a0<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/audio\">&lt;audio&gt;<\/a>\u00a0element), etc.<\/li>\n<li>to display other HTML documents with the\u00a0&lt;iframe&gt;\u00a0element.<\/li>\n<\/ul>\n<p><strong>Note:<\/strong>\u00a0When specifying URLs to load resources as part of a page (such as when using the\u00a0&lt;script&gt;,\u00a0&lt;audio&gt;,\u00a0&lt;img&gt;,\u00a0&lt;video&gt;, and the like), you should generally only use HTTP and HTTPS URLs, with few exceptions (one notable one being\u00a0data: as with Data URLs). Using FTP, for example, is not secure and is no longer supported by modern browsers.<\/p>\n<p>Other technologies, such as\u00a0CSS\u00a0or\u00a0<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/JavaScript\">JavaScript<\/a>, use URLs extensively, and these are really the heart of the Web.<\/p>\n<p><strong><u>Absolute URLs vs relative URLs<\/u><\/strong><\/p>\n<p>What we saw above is called an\u00a0<em>absolute URL<\/em>, but there is also something called a\u00a0<em>relative URL<\/em>. The\u00a0URL standard\u00a0defines both \u2014 though it uses the terms\u00a0<em>absolute URL string<\/em>\u00a0and\u00a0<em>relative URL string<\/em>, to distinguish them from\u00a0URL objects\u00a0(which are in-memory representations of URLs).<\/p>\n<p>Let&#8217;s examine what the distinction between\u00a0<em>absolute<\/em>\u00a0and\u00a0<em>relative<\/em>\u00a0means in the context of URLs.<\/p>\n<p>The required parts of a URL depend to a great extent on the context in which the URL is used. In your browser&#8217;s address bar, a URL doesn&#8217;t have any context, so you must provide a full (or\u00a0<em>absolute<\/em>) URL, like the ones we saw above. You don&#8217;t need to include the protocol (the browser uses HTTP by default) or the port (which is only required when the targeted Web server is using some unusual port), but all the other parts of the URL are necessary.<\/p>\n<p>When a URL is used within a document, such as in an HTML page, things are a bit different. Because the browser already has the document&#8217;s own URL, it can use this information to fill in the missing parts of any URL available inside that document. We can differentiate between an\u00a0<em>absolute URL<\/em>\u00a0and a\u00a0<em>relative URL<\/em>\u00a0by looking only at the\u00a0<em>path<\/em>\u00a0part of the URL. If the path part of the URL starts with the &#8220;\/&#8221; character, the browser will fetch that resource from the top root of the server, without reference to the context given by the current document.<\/p>\n<p>Let&#8217;s look at some examples to make this clearer.<\/p>\n<p><strong>Examples of absolute URLs<\/strong><\/p>\n<table width=\"643\">\n<tbody>\n<tr>\n<td>Full URL (the same as the one we used before)<\/td>\n<td>https:\/\/developer.mozilla.org\/en-US\/docs\/Learn<\/td>\n<\/tr>\n<tr>\n<td>Implicit protocol<\/td>\n<td>\/\/developer.mozilla.org\/en-US\/docs\/Learn<\/p>\n<p>In this case, the browser will call that URL with the same protocol as the one used to load the document hosting that URL.<\/td>\n<\/tr>\n<tr>\n<td>Implicit domain name<\/td>\n<td>\/en-US\/docs\/Learn<\/p>\n<p>This is the most common use case for an absolute URL within an HTML document. The browser will use the same protocol and the same domain name as the one used to load the document hosting that URL.\u00a0<strong>Note:<\/strong>\u00a0<em>it isn&#8217;t possible to omit the domain name without omitting the protocol as well<\/em>.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>Examples of relative URLs<\/strong><\/p>\n<p>To better understand the following examples, let&#8217;s assume that the URLs are called from within the document located at the following URL:\u00a0https:\/\/developer.mozilla.org\/en-US\/docs\/Learn<\/p>\n<table width=\"643\">\n<tbody>\n<tr>\n<td>Sub-resources<\/td>\n<td>Skills\/Infrastructure\/Understanding_URLs<\/p>\n<p>Because that URL does not start with\u00a0\/, the browser will attempt to find the document in a sub-directory of the one containing the current resource. So in this example, we really want to reach this URL: https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/Skills\/Infrastructure\/Understanding_URLs.<\/td>\n<\/tr>\n<tr>\n<td>Going back in the directory tree<\/td>\n<td>..\/CSS\/display<\/p>\n<p>In this case, we use the\u00a0..\/\u00a0writing convention \u2014 inherited from the UNIX file system world \u2014 to tell the browser we want to go up from one directory. Here we want to reach this URL: https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/..\/CSS\/display, which can be simplified to: https:\/\/developer.mozilla.org\/en-US\/docs\/CSS\/display.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>Semantic URLs<\/strong><\/p>\n<p>Despite their very technical flavor, URLs represent a human-readable entry point for a Web site. They can be memorized, and anyone can enter them into a browser&#8217;s address bar. People are at the core of the Web, and so it is considered best practice to build what is called\u00a0<a href=\"https:\/\/en.wikipedia.org\/wiki\/Semantic_URL\"><em>semantic URLs<\/em><\/a>. Semantic URLs use words with inherent meaning that can be understood by anyone, regardless of their technical know-how.<\/p>\n<p>Linguistic semantics are of course irrelevant to computers. You&#8217;ve probably often seen URLs that look like mashups of random characters. But there are many advantages to creating human-readable URLs:<\/p>\n<ul>\n<li>It is easier for you to manipulate them.<\/li>\n<li>It clarifies things for users in terms of where they are, what they&#8217;re doing, what they&#8217;re reading or interacting with on the Web.<\/li>\n<li>Some search engines can use those semantics to improve the classification of the associated pages.<\/li>\n<\/ul>\n<p>Also, read about Clean URLs<\/p>\n<p><strong>SOURCE: <\/strong><strong>Mozella <\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>URL Explained This article discusses Uniform Resource Locators (URLs), explaining what they are and how they&#8217;re structured. Summary With\u00a0Hypertext\u00a0and\u00a0HTTP,\u00a0URL\u00a0is one of the key concepts of the Web. It is the mechanism used by\u00a0browsers\u00a0to retrieve any published resource on the web. URL\u00a0stands for\u00a0Uniform Resource Locator. A URL is nothing more than the address of a given [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/ten30media.com\/sapnew\/wp-json\/wp\/v2\/posts\/1678"}],"collection":[{"href":"https:\/\/ten30media.com\/sapnew\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ten30media.com\/sapnew\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ten30media.com\/sapnew\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/ten30media.com\/sapnew\/wp-json\/wp\/v2\/comments?post=1678"}],"version-history":[{"count":0,"href":"https:\/\/ten30media.com\/sapnew\/wp-json\/wp\/v2\/posts\/1678\/revisions"}],"wp:attachment":[{"href":"https:\/\/ten30media.com\/sapnew\/wp-json\/wp\/v2\/media?parent=1678"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ten30media.com\/sapnew\/wp-json\/wp\/v2\/categories?post=1678"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ten30media.com\/sapnew\/wp-json\/wp\/v2\/tags?post=1678"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}