URLs, HTTP, and HTTPS

Build the mental model

Every web request begins with a URL. Learning to read one, piece by piece, makes debugging and understanding the web dramatically easier.

Take this URL as an example: https://api.example.com:443/users/42?active=true#profile - every piece has a distinct job.

scheme (https) - which protocol to use
host (api.example.com) - which server to contact
port (443) - which door on that server to knock on
path (/users/42) - which resource is being requested
query (?active=true) - extra parameters
fragment (#profile) - handled by the browser only, never sent to the server

HTTP is the protocol that defines how a browser and a server talk: a request goes out with a method, URL, headers, and sometimes a body; a response comes back with a status, headers, and usually a body. The complete list of HTTP methods and status codes lives in the API Tutorial - this course only needs the shape.

HTTPS adds TLS encryption on top of HTTP: it encrypts traffic, verifies server identity via certificates, and protects against tampering in transit.

HTTPS is not a security guarantee

HTTPS protects the connection, not the destination. A phishing site can have a perfectly valid certificate and a padlock icon while still being malicious.

URL: Uniform Resource Locator - the full address used to locate a specific resource on the web, made up of a scheme, host, optional port, path, query string, and fragment.

HTTPS: HTTP layered with TLS encryption, providing an encrypted connection, server identity verification, and protection against tampering in transit.

text

ANATOMY OF A URL
----------------
ANATOMY OF A URL
-----------------

  https://api.example.com:443/users/42?active=true#profile

  scheme:    https              -> which protocol to use
  host:      api.example.com    -> which server to contact
  port:      443                -> which door on the server
  path:      /users/42          -> which resource is wanted
  query:     ?active=true       -> extra parameters
  fragment:  #profile           -> browser-only, never sent

REQUEST / RESPONSE FLOW
------------------------

  Browser  ---- HTTP Request ---->  Server
  Browser  <--- HTTP Response ----  Server

Connect it to a real scenario

Breaking a URL down helps you debug real problems fast - each part points at a different piece of the system.

Wrong server? Check the host.
Wrong environment? Check the port.
Wrong resource? Check the path.
Odd filtering or pagination? Check the query string.
Jumps to the wrong section? Check the fragment.

The code below uses the built-in URL class - no extra library needed. Try changing the URL and re-running it.

The padlock is not a full safety check

Phishing sites can hold perfectly valid HTTPS certificates. HTTPS protects the connection only - it says nothing about whether the destination itself is trustworthy.

A URL breaks into scheme, host, port, path, query, and fragment - each with a distinct job.
HTTP defines the request/response shape of the web; its full method and status code list lives in the API Tutorial.
HTTPS encrypts the connection and verifies server identity, but it does not guarantee an entire site or application is secure.

HTTPS does not mean 100% secure

HTTPS only means the connection is encrypted. A site running entirely on HTTPS can still have vulnerabilities, leaked data, or malicious code.

Try the working example

javascript

function parseUrl(urlString) {
  const url = new URL(urlString);
  return {
    scheme: url.protocol.replace(":", ""),
    host: url.hostname,
    port: url.port || (url.protocol === "https:" ? "443" : "80"),
    path: url.pathname,
    query: url.search,
    fragment: url.hash,
  };
}

console.log(parseUrl("https://api.example.com:443/users/42?active=true#profile"));

You should see

Logs an object with scheme: 'https', host: 'api.example.com', port: '443', path: '/users/42', query: '?active=true', fragment: '#profile'.

5-minute try-it

Using the parseUrl function, parse a URL from a site you use daily and identify which part would change if you switched from a search page to a specific article on the same site.

One important caution

Assuming the padlock icon or https:// means a site is completely trustworthy - it only means the connection is encrypted.

Memorizing HTTP method and status code lists here instead of treating this lesson as the mental model and the API Tutorial as the depth.

Wikipedia - URL — How the Web Works