Meaning of symbols in a URL

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?

Question mark & link symbols

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
domain.com/?rest_of_the_parts

What is the “#” (hash) symbol in the URL?

hash tags

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. For more details, see how to create an anchor tag that jumps to a different section.

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?

line space infographic

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.

To see this in action, you can go to this URL: https://shihabiiuc.com/?s=what is an anchor and see how the URL behaves.

Also, you can type multiple words after the “=” (equal) sign and hit enter. https://shihabiiuc.com/?s=

What is ” ” (quotation mark) in the URL?

Quotation mark

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?

ampersand symbol

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

Summary infographic, list, table, table of contents

You saw most of the commonly used special characters, their explanation, examples & references. Now see them at a glance.

CharacterMeaningExample
?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
%20Represents 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
URL special characters at a glance

Similar post: How to change WordPress permalink structure?

Learn & practice CSS with real-world examples
Learn basic CSS from the ground up.
Build real projects in HTML CSS.
Make your hands dirty

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.