Main content
Computers and the Internet
Hypertext Transfer Protocol (HTTP)
Whenever you visit a page on the web, your computer uses the Hypertext Transfer Protocol (HTTP) to download that page from another computer somewhere on the Internet.
Let's step through that process.
Step 1: Direct browser to URL
When we want to browse the web, we can use many types of computers (like laptops, desktops, and phones), as long as the computer has a browser application installed.
The user either types a Uniform Resource Locator (URL) in the browser or follows a link from an already opened page:
Notice something about that URL: it starts with "http". That's a signal to the browser that it needs to use HTTP to fetch the document for that URL.
🔍 What browser are you using now? What's the URL of this website? What does it start with?
Step 2: Browser looks up IP
We typically type nice human-friendly URLs into browsers, like "khanacademy.org" and "wikipedia.org". Those domain names map to IP addresses, the true location of the domain's computers. That's handled by the Domain Name System.
The browser uses a DNS resolver to map the domain to an IP address:
Step 3: Browser sends HTTP request
Once the browser identifies the IP address of the computer hosting the requested URL, it sends an HTTP request.
An HTTP request can be as short as two lines of text:
GET /index.html HTTP/1.1
Host: www.example.com
The first word is the HTTP verb: "GET". There are other verbs for other actions on the web, like submitting form data ("POST").
The next part specifies the path: "/index.html". The host computer stores the content of the entire website, so the browser needs to be specific about which page to load.
The final part of the first line specifies the protocol and the version of the protocol: "HTTP/1.1".
The second line specifies the domain of the requested URL. That's helpful in case a host computer stores the content for multiple websites.
Step 4: Host sends back HTTP response
Once the host computer receives the HTTP request, it sends back a response with both the content and metadata about it.
The HTTP response starts similarly to the request:
HTTP/1.1 200 OK
The response begins with the protocol and version, "HTTP/1.1".
The next number is the very important HTTP status code, and in this case, it's 200. That code represents a successful retrieval of the document ("OK").
If the server failed to retrieve the document, the status codes provide more information, like if the failure was due to user error or server error. For example, the most well known status code is 404 ("File not found"). That happens whenever you visit a path on a server that doesn't correspond to any document. Since users have a habit of typing URLs incorrectly, 404s happen frequently, so websites often have fun 404 webpages. Try typing a nonsense Khan Academy URL and see what happens!
The next part of an HTTP response are the headers. They give the browser additional details and help the browser to render the content.
These two headers are common to most requests:
Content-Type: text/html; charset=UTF-8
Content-Length: 208
The content-type tells the browser what type of document it's sending back. A common type on the web is "text/html", as all webpages are HTML text files. Other types are possible, like images ("image/png"), videos ("video/mpeg"), script ("application/javascript") and anything else you can load in your browser.
The content-length gives the length of the document in bytes, which helps the browser know how long a file will take to download.
Finally, the HTTP response writes out the actual document requested. This page is a simple HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Example Domain</title>
</head>
<body>
<h1>Example Domain</h1>
<p>This domain is to be used for illustrative examples in documents.</p>
</body>
</html>
If you'd like to understand how HTML works in more detail, you can check out our full HTML/CSS course.
Step 5: The browser renders the response
The browser now has all the information it needs to render the document requested.
See for yourself
Many browsers include debugging tools that let you view HTTP requests and their responses as you browse the web.
Let's try it in Chrome.
First, we need to open the Chrome developer tools. One way to do that is to open the "View" menu, then select "Developer" → "Developer Tools". Once that pops open, select the "Network" tab.
Next, type a URL in the browser bar, like "http://www.example.com/index.html". An HTTP request shows up in the console, and the browser renders the page.
We can dig into that request to see the juicy details, if we want. Click "index.html" under the "Name" column". A tabbed interface pops up and defaults to a "Headers" tab.
The "Response headers" includes headers discussed above, like "Content-Type" and "Content-Length", plus lots of other interesting headers.
The actual HTML content of the response is another tab, "Response".
🔍 Open up the "Network" tab and browse to more websites. How many HTTP requests does each website make? What types of content are in the responses? What surprises you the most?
HTTP and TCP/IP
HTTP is a protocol that's built on top of the TCP/IP protocols.
Each HTTP request is inside an IP packet, and each HTTP response is inside another IP packet--or more typically, multiple packets, since the response data can be quite large.
There are many other protocols built on top of TCP/IP, like protocols for sending email (SMTP, POP, IMAP) and uploading files (FTP).
All of these protocols enable us to use the Internet to connect with other computers in useful ways, and to communicate and collaborate across wide distances.
🙋🏽🙋🏻♀️🙋🏿♂️Do you have any questions about this topic? We'd love to answer—just ask in the questions area below!
Want to join the conversation?
- What programming language is
GET/index.html HTTP/1.1 Host:... etc.
in? Powershell? JavaScript? Or a unique internet-specific language?(9 votes)- That is not a general-purpose programming language. It is the format of an HTTP request, as specified in the HTTP specification. Anything that wants to understand HTTP requests (like a browser or server) needs to parse them according to the HTTP request format.
Here's the current HTTP specification:
https://httpwg.org/specs/rfc7231.html (It's not exactly light reading, specifications have to be very.. specific!)(37 votes)
- i understand that domain is the ruler or the controller , but is there any certain definition for it ?(4 votes)
- The word "domain" is defined a couple different ways, but for the purposes of this topic, you're probably looking for the definition of "domain" meaning (as most people use it) "a domain name."
A domain name (or just "a domain") is a character string made up of letters, numbers, and in some cases, hyphens (the "-" character), followed by a top-level domain (TLD) suffix, like ".com". For example, "google.com" and "khanacademy.org" are both domains. For "google.com," the character string is "google" and the TLD suffix is ".com". When combined with the right preceding syntax, they can be used to build a URL (Unifrom Resource Locator), such as "https://www.google.com". Often, browsers use various means to simplify or shorten the part of the domain that is visible in the URL bar, so that sometimes you only see "google.com", instead of the whole URL, "https://www.google.com". This is just to make it look a little less visually confusing, but don't worry, the browser still has the full URL there, and knows where to go.
Domains are uniquely controlled by a single owner, and reserved under the authority of the internet's organization for domain authority (currently the IANA, or Internet Assigned Numbers Authority), and licensed to owners (like me, or you, or the company that owns Google, or anyone that wants to reserve a domain name) for exclusive use in multiples of one year, starting from the time of successful domain registration. The companies that are authorized by IANA to register these domains on behalf of owners are called "domain registrars." Two examples of such registrars are GoDaddy and Porkbun.
The thing is that, it's not actually just the domain itself that is, as you call it, "the ruler or the controller," it's a combination the domain "google.com" and the IP address of the server that contains the data of that website, associated together by a loose confederation of specialized servers called "DNS servers" whose job it is to know where to send people who are looking for a particular domain name. So, for example, someone who goes to "google.com" will arrive at a server with an IP address of 172.217.22.78 because all the DNS servers agree that that's where Google's home page is stored. The processes involved are a little more detailed, but that's how it works on the surface. That pairing of domain name and IP address (paired together by the domain name system, or "DNS," servers) is what "rules" the set of connections that are discussed in this lesson and related ones.
Does that help to answer your question?(18 votes)
- So the http request is put inside an ip packet, which is then used to get and recieve messages form the website's server?(4 votes)
- Yes. The IP packet is the data that the client is requesting. HTTP (or HTTPS) is the protocol for the data in the data field of the IP packet. The server would send a back a response (200 - OK, 404 - Not Found, 403 - Forbidden, etc.) depending on what the backend result is. If it was a webpage, it would then send the packets back to the client to display.(7 votes)
- When looking at the response tabs for a youtube video what are all the question marks inside of black diamonds? Missing or corrupted packets?(4 votes)
- They are likely bytes that equate to ASCII characters that cannot be printed.(6 votes)
- Is HTTP used on every internet website URL?(4 votes)
- Either HTTP or HTTPS must be in the URL for a website.(4 votes)
- How do you view HTTP requests on Firefox?(3 votes)
- Once you visit a URL, right click on the page and select "Inspect Element". Then click on the Network tab. Finally, reload the page. The HTTP requests should show up on the left. You can click on them to view their header attributes. Hope this works!(5 votes)
- is there a video option available ?(4 votes)
- How do I transfer images into my code?(1 vote)
- if you're talking about HTML/CSS code, you just use the <img> tag and give it a source(src) URL of the image that you want to display.
Example: <img src="place your-image-url-here"
If you're talking about Javascript code, you simply use image(imageURL, x, y, width*, height*);
Example: image(URL-of-a-cool-image, 150, 200, 40, 30)
Those are the only two forms of code i know that can have images.
Hope this helps!(7 votes)
- Do the HTTP responses actually have "OK" in them, or does the 200 stand for "OK"?(2 votes)
- The "200" is the status code.
The "OK" is the status text.
Both of them are included in the HTTP response.
The status text is intended for humans.(3 votes)
- When I make a a request to translate.google.com, why in console it shows 55 requests, although I pressed enter button only once?(2 votes)