What are HTTP headers? (and why they’re useful)

What are HTTP headers, how do they work, and how are they useful to you?

A technical guide for developers, DIY-er’s trying to understand servers on a more detailed level, naive clients arguing with their devs, or randomly bored people with nothing else to do in their life.

What (the hell) is an HTTP header?

HTTP headers are bits of information that is passed along within every communication between (web) servers and (browser) clients.

When your browser visits a website…it sends an HTTP request to the (web) server. Which includes HTTP request headers with info like:

• What URL you’re requesting (duh!) – https://somesite.com/somepage
• If your visit is referred from another page.
• What browser you’re using – Chrome, Firefox, etc.
• What language set in your browser – English, Spanish, etc.
• What things your browser can cache – css, images, etc.
• See full list of HTTP request fields.

In short, request headers give the server useful information about yourself (your computer, your browser, what info you want, and how you’re able to process it).

When your server returns the website…it sends an HTTP response to your web client (browser). Which includes HTTP response headers with info like:

• Status of the URL – 200 (working), 301 (redirected), 404 (not found), 500 (server not working), etc. See all HTTP status codes.
• What web server – Apache, NGINX, LiteSpeed.
• Caching info – if the page is cached, if it’s using CDN, etc.
• Content-encoding – GZIP, Brotli.
• Content type – HTML, text, etc.
• Age of the cached content – so your browser knows whether to download new info or not.
• What type of content can be executed in the browser – videos, PDF, etc.
• What browser features can be used – microphone, camera, etc.
• See full list of HTTP response fields.

In short, response headers give the browser useful information about the website and specifies how your browser is allowed to use (or engage with) that website.

How can I see what HTTP headers are sent?

How to see what HTTP request headers are sent from your browser:

• This awesome tool shows what HTTP request headers your browser is sending.
• Or also the more detailed client hints your browser is sending. Shows screen-size, connection type, if you prefer LIGHT or DARK color schemes.

How to see what HTTP response headers are sent from the website:

• Open up the Developer Tools in your browser. (Can do it by right-clicking anywhere on the page and click “Inspect”.)
• Reload the page, and then click on “Network” tab and then “Headers” tab.
• Then scroll through the headers and check out what useful info is shown.

What are HTTP headers used for?

HTTP headers are useful to share information between servers and clients.

The average web-user has no idea HTTP headers are sent in the background with every REQUEST and RESPONSE. Using the internet for them means “typing words into a box, and waiting for pictures to show on the screen”. They don’t know much more information is being passed around behind the scenes.

How are HTTP request headers useful?

The typical user doesn’t need to know what HTTP request headers are sent out from their browser. Maybe if you care about so much security/privacy, you might try and alter the headers sent out (by altering the settings in your browser). Or use a private browser.

But a website owner or developer on the other hand may have many uses for HTTP request headers:

• Tracking purposes – they might want to know the demographics of their web visitors. So they’ll use something like Google Analytics which basically tracks and charts the info found in HTTP request headers.
• UI/UX purposes – showing different content or page design depending on the detected browser information. For example, showing dark version of the site to users who prefer “dark mode”.
• Multilingual purposes – to redirect users of certain languages to another URL. Or how about different content or prices depending on the user’s geographical location (like those sneaky travel sites).
• Security (for the server) – to configure the server to block (or limit) certain types of users or user-agents. Web developers can use web application firewall (WAF) rules to block certain browsers from attacking the server.

How are HTTP response headers useful?

Again, not much here for typical users. But for a website owner, developer, or host can have many essential uses for HTTP response headers:

• Diagnosis – to understand why a website doesn’t load, or why certain assets don’t load properly. Is it the server’s fault? Or DNS not routed properly? Or stuck in a redirect loop? Did the CDN go down? Is there some annoying security protocol blocking access?
• Optimization – using the header info to improve how the site loads. Knowing which items could be cached longer or differently, what aspects of the webhosting is set up properly or not.
• Security (for users) – to prevent certain types of (malicious) content from executing on the user’s browser. For example not allowing scripts or assets loaded from an external site; this is useful in case your site is ever compromised or hacked, the security headers set on the site won’t allow it to compromise your users (installing malware on their home computer, or displaying/redirecting to more bad content).

To change response headers…it would be done from altering your web-server (configuration) or website code, depending on the header!

Now you know what “headers” are!

Now you understand when website guides talk about “cache headers”, “security headers”, “response header” or “request header”…they’re all just referring to HTTP headers. (And obviously…not talking about “HTML headers” which is the top of your website page.)

Maybe you’ll also feel a little less stupid when talking to your developer, children, dog/cat, Uber driver. Hooray!