Amblem
Furkan Baytekin

How Do Browsers Decide How to Render Content Based on Content-Type?

How content types define the line between frontend & backend development

How Do Browsers Decide How to Render Content Based on Content-Type?
151
3 minutes

Imagine you are sending this payload to a browser:

html
<html> <body> <h1>Hello, world!</h1> </body> </html>

You may be tempted to think that the browser will render the HTML as a web page. But actually, it depends… Lets make it clear.

Lets write a simple HTTP server in Go to send this payload to a browser. But everytime we send the payload, keep the payload the same, but change the content type.

go
package main import ( "net/http" ) func main() { http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) { w.Header().Set("Content-Type", "text/html") w.Write([]byte("<html><body><h1>Hello, world!</h1></body></html>")) }) http.ListenAndServe(":8080", nil) }

The payload will be kept the same. Just focus on this line:

go
w.Header().Set("Content-Type", "text/html")

We set the content type to text/html.

Now, lets run the server and open the browser to http://localhost:8080.

You will see the HTML rendered as a web page. A bold header with the text β€œHello, world!”.

Preview:

Hello, world!


Now, lets change the content type to text/plain.

go
w.Header().Set("Content-Type", "text/plain")

This time, the browser will render the HTML as a plain text.

Preview:

<html><body><h1>Hello, world!</h1></body></html>


Now, lets change the content type to application/json to see what will happen.

go
w.Header().Set("Content-Type", "application/json")

The browser will complain about syntax error:

SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data <html><body><h1>Hello, World!</h1></body></html>


Now, lets change the content type to application/xml.

As you may think, this HTML body is compatible with XML. But browser will still not render it as a web page.

The output is:

This XML file does not appear to have any style information associated with it. The document tree is shown below.

xml
<html> <body> <h1>Hello, World!</h1> </body> </html>

And finally, let’s try application/javascript.

go
w.Header().Set("Content-Type", "application/javascript")

The browser will decide to render the JavaScript code as plain text. Because it is a source code, not an executable code.

Preview:

<html><body><h1>Hello, world!</h1></body></html>


Yes, and there, the final question: What if I don’t set the content type at all?

go
w.Header().Set("Content-Type", "")

You may think that the browser will render the HTML as a web page. Yes, this time you are right. Browsers are smart enough to detect it is an HTML document.

Preview:

Hello, world!


But…

If we send a JSON payload, without setting the content type, the browser will render it as a plain text.

go
package main import ( "net/http" ) func main() { http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) { w.Write([]byte(`{ "message": "Hello, World!" }`)) }) http.ListenAndServe(":8080", nil) }

Conclusion

You know how HTML and XML are similar. In the past, we developers were sending an SGML compliant document to the browser. It’s type was defining our area of expertise. Backend or frontend. So this is technically possible to say this: β€œThe only real difference between backend and frontend is the content type”.


Album of the day:

Suggested Blog Posts