URL’s: “How do they really work?”

URL stands for Uniform Resource Locator. A URL is a specific type of Uniform Resource Identifier (URI). A URL is called such for a reason: it's uniform!

URL’s: “How do they really work?”
Sean Kennedy

Sean Kennedy

February 5, 2023

As a no-code developer, understanding URLs is fundamental to your skillset. URLs serve as the language of APIs and send requests to access specific resources and perform actions on them.

In addition to APIs, URLs play a crucial role in web scraping and data extraction. They identify and locate the web pages and resources you need to extract information from.

Moreover, being familiar with URLs is essential for troubleshooting and debugging. By seeing the exact requests being made, you can quickly identify any issues and resolve them efficiently.

Understanding how URLs are constructed is key to effectively extracting data from the right sources. The most essential parts in a URL are highlighted below:

URL Description

The Protocol

The Protocol is the first part of the URL, which tells your browser what protocol to use when requesting the resource (a protocol is a set method for exchanging or transferring data around a computer network). The scheme indicates whether you'll use HTTP or HTTPS (Encrypted) when requesting this content from the server. When using HTTP, the data sent between the client and server will be encrypted, and only the IP address and port will be visible.

A protocol is a set method for exchanging or transferring data around a computer network
A description of the https protocol

The Domain

Next follows the *Domain*, separated from the scheme by the character pattern ://. It consists of two or more names separated by a “.”. Domain names are read from right to left.

The rightmost part is the Top-level domain or (TLD). There are a limited set of TLDs like “.com”, “.net” or “.dev” As of writing, there are 1589 TLDs, including most country codes.

A visual description of what a web domain is
The TLD is prefixed by one of more subdomains. e.g. (toddle.site) or (weather.toddle.site)

The domain specifies what server should handle the request. toddle.site and weather.toddle.site will be sent to different servers on the internet.

The Port

The port specifies what application on the server we want to connect to. Web servers might run multiple applications on the same server. Each application is set to listen for traffic on a predefined port. The port is usually omitted if the web server uses the standard ports.

(443 for HTTPS /80 for HTTP)

A visual description of a web port

The Path

The path to a file in a URL is the file's location relative to the domain name. It specifies the location of the resource being requested and is represented by the characters that follow the domain name.
Traditionally, the path would match a file path on the server's hard drive, but this is more of a metaphor in modern web servers.
The path specifies what operation within an application should be performed. This includes what website page should be downloaded or what data should be fetched from a REST API.

A visual description of a url path

The Query or Query Parameters

Query parameters allow you to send additional input to the operation.

As a no-code developer, understanding query or query parameters is crucial when working with web-based services and APIs. Query parameters specify additional information or options when requesting a server. They are added to the end of a URL, following a "?" character. For example, when making a search request to a website, the search term may be passed as a query parameter, like this "[https://example.com/search?q=searchterm](https://example.com/search?q=searchterm)". The query parameter "q" specifies the search term, and the value "searchterm" is the actual search term entered by the user. Understanding how to use and construct query parameters allows you to communicate effectively with web services and APIs and to retrieve the data you need.

A visual description of the URL query parameter
Additionally, query parameters can also be used to filter, sort, and paginate data, which are common features in web-based services and applications. Understanding how to use these types of query parameters will allow you to retrieve and display the desired data.

The Anchor

An anchor in a URL, also known as a fragment identifier, is a specific part of a web page that is identified by a unique string after a "#" symbol in the URL. It allows linking to a specific section or element within a web page rather than linking to the entire page. Anchors are commonly used for navigation within long pages, table of contents, or to highlight specific content on the page. They are useful for creating more user-friendly and efficient navigation for visitors to your website.

A visual description of the URL Anchor
The anchor is only used in browsers, it is not sent to the server

How does this look when using toddle?

Let’s have a look at the following toddle URL:https://todo.toddle.site/login?redirect_url=/”https://”: On toddle, we serve everything over HTTPS to protect our user's privacy.”todo.toddle.sit”: toddle apps are run on a subdomain of the toddle.site.”/login”: Each page of a toddle app specifies what path it should be on “redirect_url=/” All toddle pages can accept additional query parameters too. There you have it! A look at how URLs work and what happens behind the scenes when we use them.

Stop scrolling. Start building.

toddle is a visual web app builder that rivals custom code — but accessible to your entire team!

Try toddle — it's free!
Server-side rendered Installable PWAs Connect to any database As performant as code toddle is built in toddle undefined undefined undefined undefined undefined
undefined Style tokens Export as web components No feature limits Connec to any API Extend with code undefined undefined undefined undefined

© Copyright 2024 toddle. All rights reserved.