Files & The Browser

Your browser is a file browser. A URL is a file path to a remote computer. Chrome just renders what comes back.


Everything Is a Text File

Here is something that surprises most people: almost everything in software is just a text file. Code? Text file. A website? Text file with HTML tags. A configuration? Text file. JSON data? Text file. If you opened any of these in Notepad, you would just see characters on a screen.

The magic is not in the file itself. It is in what READS the file and how it interprets those characters. A .py file is just text, but when Python reads it, those characters become instructions. An .html file is just text, but when Chrome reads it, those characters become a visual webpage.

This distinction matters because it demystifies everything. There is no secret binary sauce in most of the files developers work with. It is all just text with different rules.


File Types: Same Text, Different Rules

Different file extensions tell the computer how to interpret the text inside. The extension is like a label on a jar. It does not change what is inside, but it tells you (and your computer) how to use it.

  • .txt is plain text. No formatting. What you see is what you get.
  • .md (Markdown) is text with simple formatting symbols. # heading, **bold**, - bullet. A Markdown renderer turns these symbols into formatted text. Without a renderer, it is just characters with hashtags and asterisks.
  • .json is structured data with keys and values. The lingua franca of web data. Looks like {"name": "Alex", "age": 30}.
  • .html is text with tags that browsers understand. <h1> means heading, <p> means paragraph. The browser reads these tags and renders them into visual elements.
Name: Alex Chen
Role: Product Manager
Email: alex.chen@example.com
Company: Acme Corp

Same data as every other tab — just formatted as plain text.

Key insight

You just learned your first programming language. Seriously. Markdown IS a language. The # symbol is syntax. Your computer sees the .md extension, runs the text through a rendering engine, and shows you the formatted version. That is exactly how all code works: text files + a program that knows how to read them.


The Big Aha: Your Web Browser Is a File Browser

Here is the insight that changes everything: Chrome is a file browser. Finder browses files on your computer. Chrome browses files on other people's computers. That is the only difference.

When you type a URL into Chrome, you are giving it a file path, just like clicking through folders in Finder. The path /Users/you/Documents/report.html and the URL https://example.com/about/team work the same way: directions to a file, step by step, separated by slashes.

Try this yourself. Open Finder and navigate to any folder. Look at the path bar at the top. Now open Chrome and look at the URL bar. They are both showing you the same thing: where you are in a hierarchy of folders and files. Finder shows paths on your machine. Chrome shows paths on someone else's machine.

Render as:
localhost:3000/index.html

Welcome

This is a paragraph with bold text.

  • Item one
  • Item two

Now the browser parses the tags as instructions. The same characters become a styled, structured page. This is what browsers do.

Real-world example

Open Finder and navigate to your Downloads folder. The path is something like /Users/you/Downloads. Now open Chrome and go to https://google.com/about. In both cases, you navigated a path to reach a destination. Finder found a folder on your hard drive. Chrome found a page on Google's server. Same concept, different computer.


Rendering: Why Websites Look Good

Here is what Chrome actually does when it fetches a file:

  1. You give it a path (the URL)
  2. It requests the file from the server at that address
  3. If the file is HTML, it renders the tags into visual elements (headings, paragraphs, colors, layouts)
  4. If it is plain text, it just shows the raw text

Try this yourself. Take a file with HTML content in it. Name it index.txt and open it in Chrome. You see raw text with all the HTML tags visible as plain characters. Now rename that same file to index.html and open it again. Chrome renders those tags into a styled page. Same exact content. Different interpretation. The only thing that changed was the file extension.

Now try this: go to any website and right-click, then select "View Page Source." What you see is the raw HTML, the actual text file that Chrome received. It looks like a wall of unreadable code. Tags everywhere, nested inside each other, hundreds of lines of angle brackets.

But look at the page itself. It is clean, beautiful, easy to read. Chrome took that mess of raw HTML and turned it into something a human can use. That is rendering. The raw file is unreadable. The rendered version is what you interact with every day. Chrome is doing all the heavy lifting.

Key insight

A URL is just a file path. When you visit https://google.com/about, you are asking Google's server: "send me the file at /about." Your browser fetches that file and, if it is HTML, renders it into something visual. Every website you have ever visited works this way.


Rendering: The Universal Pattern

The concept of rendering is not just for browsers. It is everywhere:

  • Markdown renderer (in VS Code, GitHub, etc.) reads .md files and shows formatted text
  • Chrome reads .html files and shows styled web pages
  • Excel reads .xlsx files and shows spreadsheets with grids and formulas
  • Finder / File Explorer reads your file system and shows icons and folders

Same pattern every time: raw data goes in, a renderer interprets it, pretty output comes out. Without the renderer, everything is just text (or binary data). The renderer is doing all the heavy lifting.


HTML: The Language of the Web

Since every website is HTML, it is worth understanding the basics. HTML uses tags, labels wrapped in angle brackets that tell the browser what things are:

<h1>This is a big heading</h1>
<p>This is a paragraph of text.</p>

The browser sees <h1> and makes the text big and bold. It sees <p> and treats it as a paragraph. Tags come in pairs (an opening tag <h1> and a closing tag </h1>) wrapping the content they describe.

Every website you use (Google, YouTube, Netflix) is just HTML files plus CSS and JavaScript being rendered by your browser. You can see this yourself: right-click any webpage and select "View Page Source." That is the raw HTML that Chrome is rendering for you.

Real-world example

When you visit google.com, your browser makes a network request (Lesson 7) to Google's servers. Google sends back an HTML file. Chrome renders it. Every website works this way.


Styling: Making HTML Look Good

Plain HTML is pretty ugly. Black text on a white background, Times New Roman, no spacing. CSS (Cascading Style Sheets) is another text file that adds visual design:

h1 { font-size: 36px; font-weight: bold; }
p  { color: #333; line-height: 1.6; }

HTML defines structure (this is a heading, this is a paragraph). CSS defines appearance (the heading is 36px, the paragraph text is dark gray). They are separate files that work together. This separation is a pattern you will see everywhere in software: separate the WHAT from the HOW.


Why This Matters

Every tool you will build or interact with involves files being rendered. Understanding that a website is just a text file interpreted by Chrome demystifies the entire web. When someone says "deploy a website," they really mean "put an HTML file somewhere that other people's browsers can request it." That is exactly what we will cover in Lesson 12 (Hosting).

When someone says "the frontend is broken," they mean the HTML/CSS/JavaScript files that the browser renders are not working correctly. When someone says "check the config," they mean open a text file and look at what is inside. It is all just files.


Further Reading

Learn more