You’ll see different types of symbols in a URL such as “? # & %.” They have different meanings & purposes.
In this post, I will explain what they are, how & when to use them, and give you practical examples. So you can understand these symbols in this context and use the right one at the right time. Also, I will show you different types of URL structures.
Let’s get started.
What is “?” (question mark) in a URL?
The question mark symbol “?” is a query parameter in a URL. It simply represents an interrogation or asking for something. In other words, it’s a GET request for an inquiry.
Examples
A query parameter can be developed in different ways. However, here I will show you some examples that are commonly used.
Search query:
A search query is commonly designed with the following structure: /?s=query
For example, if you go to the following URL, it will show you search results for the term “freelancing” https://shihabiiuc.com/?s=freelancing
Clearing cache:
As mentioned earlier, there are various ways to create different query parameters and it mostly depends on the developers. Below I have mentioned mostly used & common patterns of clearing cache.
?epc_purge_single=1 |
?action=purge-all-cache&nonce=token |
What is the “#” (hash) symbol in the URL?
The hash symbol (#) simply refers to an anchor tag or link. You can create this type of link using CSS ID. These are mostly different sections in a single page that has unique CSS IDs.
Examples
You can create an anchor tag using the following structure #css-id
Let’s see the following HTML markup below.
<section id="hello-world">
<p>Your content goes here</p>
</section>
<article>
<summary>
some content goes here...
</summary>
<main id="main-content">
the main content will go here...
</main>
</article>
Now based on the above HTML, if you want to create a link that will take the visitors to the “main-content” area, you can create the link like the following:
<a href="#main-content">Read full article</a>
If you want to create a link/anchor tag for the “hello-world” section, it will be like this: <a href="#hello-world">Hello There</a>
so on and so forth. For more experiments, see this portfolio template and click through the navigation menus. And you’ll see that they are taking you to the different sections of the page.
But there is a caveat! The above two example links will only work on the same page. But if you want to access a section from a different page, you have to include the full path like this:
www.your-domain.com/#hello-world
For more experiments, go to the top of this page, find the “Table of Contents,” click through the links and see their URL structures.
What is “%20” in a URL?
The “%20” refers to a space. For example, if you search for the term “what is an anchor”, all these blank spaces among words will be filled with “%20” automatically.
Also, you can type multiple words after the “=” (equal) sign and hit enter. https://shihabiiuc.com/?s=
What is ” ” (quotation mark) in the URL?
The quotation mark is used to search for the exact phrase. For example, this query will search and find the exact term “multiple class.”
You can also use this same technic when searching on Google.
What is “&” (ampersand) in URL?
The ampersand (&) joints another query to the URL. It also represents a key-value pair.
For example, think of the caching example that you saw earlier in this post (?action=purge-all-cache&nonce=token). The first part of this query string represents a key-value pair (key=value) which is “action=purge-all-cache.” The second part also represents another key-value pair which is “nonce=token.” And the ampersand (&) acts like a conjunction in this context.
In the same vein, you can add more key-value pairs using the ampersand. For example, “?action=nocache&nonce=576o3&loggedin=true”
There are many other URL encoding characters that you can check on w3schools.
Summary of these URL characters
You saw most of the commonly used special characters, their explanation, examples & references. Now see them at a glance.
Character | Meaning | Example |
---|---|---|
? | A query parameter that allows you to write key-value pair | ?search=football |
# | It represents an anchor tag & it is used with the CSS ID name | #go-to-footer-section |
%20 | Represents a space | ?s=Persian%20Cat%20Breed |
“” | It is used to search & find an exact string | ?s=”John Doe” |
& | Conjuncts multiple queries | ?s=football&color=blue |
Learn & practice CSS with real-world examples |
---|
Learn basic CSS from the ground up. |
Build real projects in HTML CSS. |
Conclusion
There are many HTTP methods such as GET, POST, DELETE, etc. You can learn more about them on MDN.
However, in this post, we discussed some URL characters & examples that fall under the GET method.
When we browse websites, we see many different special characters and patterns in the URLs. In this post, I tried to explain the meaning, use cases & examples of the most commonly seen URL.
You may wonder in the past about those special characters and their meaning & purpose. And I tried to answer & explain them.