HTML Work
Let’s understand how websites work and how HTML plays a key role in the frontend of web development.
Frontend vs Backend – What’s the Difference?
When you visit a website, you see buttons, pictures, text, videos — all the effects you can click or scroll.
🛠️ The frontend is made using:
- HTML – for structure (like headings, paragraphs, images)
- CSS – for styling (colors, fonts, layouts)
- JavaScript – for interactivity (like forms, sliders, buttons that work)
But behind every website, there's a backend — the hidden part. It takes care of saving data, login systems, processing forms, etc.
Backend is built using other languages like:
- Python
- Java
- Ruby
In short: The frontend is what you see, and the backend is what makes things work in the background.
How Does a Website Actually Work?
- You open a browser (like Chrome or Firefox) and search something.
- The browser sends a request to a web server to get the information.
- The server sends back an HTML file to the browser.
- The browser reads the HTML and shows the web page on your screen.
You can create your own HTML page using any code editor (like VS Code or Notepad). Just write
HTML code using
tags and save the file with .html at the end.
For example: index.html
Again double-click that file, and it'll open in your browser like a real website!
What is a Web Browser?
A web browser (such as Google Chrome, Firefox, or Edge) is software that reads HTML code and transforms it into a nicely styled web page. Developers use HTML to tell the browser what content to display and how it should appear.
What’s an HTML Document?
An HTML document is a simple text file with a .html or .htm extension.
In this file,
we use special tags like <h1>,
<p>, or
<img> to give
instructions to the browser.
What’s a Rendered Page?
As the browser interprets the HTML file, it converts it into a visual web page that is displayed on your monitor.
How Does a Basic Website Work?
When you enter a website URL in the browser, say www.mkcoder.com, the browser sends a request to a server. The server responds with HTML, CSS, and JavaScript files that are used to build the page.
How Does a Browser Function?
A browser is a powerful tool that converts HTML code into beautiful websites. Here’s how it works:
- Step 1: Fetching Content – The browser fetches HTML documents from a server, which acts like a delivery person.
- Step 2: Parsing the Data – The browser reads the HTML and converts it into characters → tokens → DOM tree.
- Step 3: Rendering the Web Page – The browser displays the webpage by turning DOM nodes into visible elements on the screen.
Focus on Learning HTML
You don’t need to dive deep into how browsers work for now. Master HTML first, and soon, you'll be building real websites like a pro!
What’s Next?
In the following tutorial, we’ll set up VS Code and add usable extensions to help you write HTML efficiently.