🌐 What is HTML? How Does a Websites Work Behind the Scenes?

🚀 Why am I writing this article?

Hello everyone! I am writing this article to help beginners understand HTML and how websites work behind the scenes. I know there are many articles on this topic, but I want to explain it in a simple way that anyone can understand.

🛠 Use Cases & Importance

If you are new to web development, this article will give you a strong foundation.

If you use websites daily but don’t know how they work, this will help you understand the process.

If you are planning to learn frontend or backend development, knowing how a website loads is essential.

⚠ Note: English is not my strong skill, so I apologize if there are any mistakes. But I hope you still find this article useful! 😊

📌 What is HTML?

HTML (HyperText Markup Language) is the basic language that structures web pages. It provides a set of rules that tell browsers how to display content.

✅ Breaking Down "HTML"

HyperText → Text that contains links to other content.
Markup → Uses tags to format and structure a webpage.
Language → A set of rules that browsers follow to render web pages.

🔹 Example of an HTML Element

HTML works with tags enclosed in < >. Most elements have an opening tag, content, and a closing tag.

<p>This is a paragraph.</p>

✔ <p> is the opening tag.
✔ </p> is the closing tag.
✔ The content inside the tags appears on the webpage.

🏗 Basic HTML Boilerplate

To create a basic webpage, you need an HTML boilerplate. This is the minimum structure required for a webpage to work properly.

✨ Basic HTML Structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Webpage</title>
</head>
<body>
    <h1>Welcome to My Webpage</h1>
    <p>This is a basic HTML page.</p>
</body>
</html>

📌 Explanation:

<!DOCTYPE html> → Declares this is an HTML5 document.
<html lang="en"> → The root element, defining the language as English.
<head> → Contains metadata (not visible on the webpage).
<meta charset="UTF-8"> → Supports special characters like é, ö, ü.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> → Makes the page responsive on mobile.
<title> → Sets the page title (seen on the browser tab).
<body> → Contains everything that is visible on the webpage.

🚀 How Websites Work? (Behind the Scenes)

A website is more than just HTML! Multiple technologies work together when you visit a website. Let’s break it down step by step.

🟢 1️⃣ User Request (Client-Side Interaction)
When you type a URL (www.example.com) in a browser and press Enter, your browser sends a request to fetch the webpage.

📌 Key Terms:

Client → The browser or device making the request (e.g., Chrome, Firefox).
Request → Asking a server to load a webpage.

🔄 2️⃣ DNS & Web Hosting (Finding the Website’s Server)
The internet doesn’t recognize domain names (like www.example.com). Instead, it uses IP addresses (e.g., 192.168.1.1).
✅ Steps:

DNS Lookup: Translates domain names into IP addresses.
Server Connection: The browser finds and connects to the website’s server.

📌 Key Terms:

DNS (Domain Name System) → Works like a phonebook for websites.
Web Hosting → The storage space where website files are kept (e.g., AWS, GoDaddy).

⚙️ 3️⃣ Backend Processing (Server-Side Work)
Once the request reaches the server, the backend processes it and sends a response.
✅ Steps:

The server receives the request.
If needed, it fetches data from a database (e.g., user profile, posts).
The server prepares the HTML, CSS, and JavaScript files and sends them back to the browser.

📌 Key Terms:

Backend → The logic and database operations behind a website.
Database → Stores user accounts, posts, comments (e.g., MySQL, MongoDB).

🎨 4️⃣ Browser Rendering (Displaying the Webpage)
When the browser receives HTML, CSS, and JavaScript, it renders the webpage
✅ Steps:

HTML structures the content.
CSS makes the page look good (colors, fonts, layouts).
JavaScript adds interactivity (buttons, animations, forms).

📌 Example: When you visit YouTube,

HTML structures the page.
CSS makes it visually appealing.
JavaScript enables video playback and comments.

🔄 5️⃣ APIs & Databases (Fetching Real-Time Data)
Some websites don’t just show static content. They fetch real-time data using APIs or databases.
✅ Steps:

The website requests data (e.g., latest posts, user messages).
The database retrieves the requested data.
The backend processes it and sends it to the browser.

📌 Example:

When you refresh your Instagram feed, it fetches new posts from a database.
When you search on Google, it calls an API to get results.

📌 Key Terms:

API (Application Programming Interface) → A service that allows websites to communicate (e.g., weather API, payment API).

🔍 Final Summary: How a Website Works (Step-by-Step)

1 User Request: The browser sends a request when you type a URL.
2 DNS & Hosting: The DNS finds the correct server for the website.
3 Backend Processing: The server processes the request and fetches data.
4 Rendering: The browser displays HTML, CSS, and JavaScript.
5 Database & APIs: Websites fetch live data from databases or APIs.

🔁 Full Process Overview :

User Request → Browser Sends Request → DNS Resolves Domain →

Server Receives Request → Backend Processes Data → Fetches from Database/APIs →

Server Sends Response → Browser Renders Page → Website is Displayed 🎉

🎯 Conclusion

This is the basic process behind every website you visit! 🚀

✅ I hope this article helps beginners understand how websites work.
✅ If you find this helpful, feel free to share and leave feedback!

⚠ Again, I apologize if there are any English mistakes. I am still learning, but I wanted to share knowledge in a simple way. Thank you for reading! 😊

Behan kumar @behan05