Introduction

Introduction to HTML, HTML5 and How the Web Works

Welcome to the first lesson of Codementrix HTML5 Mastery. In this lesson, you will understand what HTML is, how modern HTML works, the difference between HTML, CSS and JavaScript, and how a browser displays a webpage.

1. Learning Objectives

After completing this lesson, you should be able to:

• Explain HTML and its purpose in web development.
• Understand HTML5 and the modern HTML standard.
• Distinguish markup languages from programming languages.
• Explain the roles of HTML, CSS and JavaScript.
• Understand the relationship between browsers, web servers and websites.
• Describe the basic request-and-response process of loading a webpage.
• Explain static HTML and dynamically generated HTML.
• Create, save and open your first HTML file.

2. What Is HTML?

HTML stands for HyperText Markup Language. It is the standard markup language used to structure content on webpages.

HTML tells the browser what different pieces of content represent. For example, a heading is marked as a heading, a paragraph as a paragraph, and a navigation link as a link.

HTML uses elements represented by tags and attributes to describe document structure and meaning.

Example: Basic HTML Content

<h1>Welcome to Codementrix</h1>
<p>Learn web development step by step.</p>
<a href="https://codementrix.in">Visit Codementrix</a>

In this example:

• <h1> represents a top-level heading.
• <p> represents a paragraph.
• <a> represents a hyperlink.
• href is an attribute that specifies the link destination.

The browser interprets these elements and displays the content accordingly. You will study element syntax and attributes in detail in later sections.

3. Is HTML a Programming Language?

HTML is a markup language, not a general-purpose programming language.

A markup language identifies and structures content. A programming language can express computational logic, such as conditions, loops, functions and calculations.

HTML alone does not provide general-purpose programming logic. It can, however, work together with CSS and JavaScript to create complete web experiences.

Example

<p>Welcome to my website.</p>

This HTML creates a paragraph. It does not calculate a result or make a decision.

JavaScript, by comparison, can perform a calculation:

const price = 100;
const quantity = 3;
const total = price * quantity;

console.log(total); // 300

The example illustrates the difference between describing content with HTML and executing logic with JavaScript.

4. What Is HTML5?

HTML5 is the name commonly used for a major generation of HTML that introduced important features for modern websites, including semantic elements, native audio and video, and improved form controls.

Modern HTML is maintained as an evolving standard rather than a language that stops changing at one fixed version. Developers still commonly use the term HTML5 when discussing modern HTML features.

Important Modern HTML Capabilities

• Semantic markup: Elements such as <header>, <nav>, <main> and <footer>.
• Native media: Elements such as <audio> and <video>.
• Improved forms: Input types such as email, date, number and range.
• Responsive images: Elements and attributes such as <picture>, srcset and sizes.
• Built-in validation: Attributes such as required, min, max and pattern.

These capabilities help developers create structured, accessible and interactive websites. You will learn them in dedicated lessons throughout this course.

5. HTML vs CSS vs JavaScript

HTML, CSS and JavaScript are three core technologies used together in frontend web development.

Example: Combining HTML, CSS and JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Technology Demo</title>
    <style>
        h1 {
            color: blue;
        }
    </style>
</head>
<body>
    <h1 id="heading">Hello World</h1>
    <button id="changeButton" type="button">
        Change Heading
    </button>

    <script>
        const button = document.getElementById("changeButton");
        const heading = document.getElementById("heading");

        button.addEventListener("click", function () {
            heading.textContent = "Welcome to Codementrix!";
        });
    </script>
</body>
</html>

What happens here?

• HTML creates the heading and button.
• CSS makes the heading blue.
• JavaScript changes the heading text when the button is clicked.

This example uses embedded CSS and JavaScript for simplicity. In larger projects, these are often maintained in separate files.

6. What Is a Web Browser?

A web browser is software used to access websites and display web content. Examples include Google Chrome, Mozilla Firefox, Microsoft Edge and Safari.

A browser can perform several important tasks:

• Request webpages and other resources from servers.
• Parse HTML and construct the Document Object Model (DOM).
• Process CSS to determine visual styles and layout.
• Execute JavaScript when present and permitted.
• Display text, images, video, controls and other content.

The browser also handles security restrictions, caching, network communication and many other operations.

7. What Is a Web Server?

A web server receives requests and sends responses. A response might contain an HTML document, an image, a stylesheet, a JavaScript file or other data.

Web servers and application servers can work together. For example, a Laravel application may query a database, generate an HTML page and return it to the browser.

Example: A Typical Request

1. A visitor opens a URL in a browser.
2. The browser resolves the domain name and establishes the required network connection.
3. The browser sends an HTTP or HTTPS request.
4. The server returns an appropriate response.
5. The browser processes the returned HTML and any referenced resources.
6. The browser renders the webpage.

The exact order can vary. Browsers may download multiple resources concurrently, reuse cached files or execute scripts that affect document parsing.

8. What Happens Inside the Browser?

Understanding the basic rendering process will help you learn HTML, CSS and JavaScript more effectively.

Step 1: HTML Parsing

The browser parses HTML markup and constructs a document structure called the Document Object Model, or DOM.

Step 2: CSS Processing

When stylesheets are available, the browser processes CSS rules to determine how elements should appear.

Step 3: JavaScript Execution

JavaScript can read or change the DOM, respond to events and update the page. Scripts can also influence loading and rendering behavior.

Step 4: Layout and Rendering

The browser calculates element positions and sizes, paints visual content and presents the result on the screen. Modern browsers may perform these operations in more complex or overlapping stages.

9. Static HTML vs Dynamically Generated HTML

Static HTML

Static HTML is stored as a file and served without requiring the server to generate a new document for every request.

<h1>About Our Company</h1>
<p>We build websites and software.</p>

This type of content can be served by a static hosting service or a conventional web server.

Dynamically Generated HTML

Dynamically generated HTML is produced by an application or another process. The output may depend on a user's request, database records, authentication or application logic.

For example, a Laravel application may retrieve a user's name and render it into an HTML template.

<h1>Welcome, Bikram!</h1>

This is an example of the resulting HTML. A server-side template could generate the name dynamically before sending the document to the browser.

Important: Both static and dynamically generated pages can result in HTML being processed by the browser. A server-side framework is not required for every website.

10. Frontend and Backend: An Introduction

Frontend development concerns the parts of a web application presented and used in the browser. Backend development handles server-side application logic, data access, authentication and other operations.

• Frontend: HTML, CSS, JavaScript and browser-based frameworks.
• Backend: PHP, Laravel, Node.js, Python and other server-side technologies.
• Database: Technologies such as MySQL and PostgreSQL that store and retrieve structured data.

These categories describe common responsibilities rather than rigid boundaries. Some technologies and operations can span multiple layers.

11. Create Your First HTML File

Now create a working HTML document on your computer.

Requirements

• A modern web browser.
• A text editor such as Visual Studio Code.
• A folder in which to save your practice files.

Step 1: Create a Project Folder

Create a folder named html-practice.

Step 2: Create an HTML File

Inside that folder, create a file named index.html.

Step 3: Add the Following Code

<!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>My Name Is Your Name</h1>
    <p>I am learning HTML with Codementrix.</p>
    <p>My goal is to become a web developer.</p>
</body>
</html>

Step 4: Save and Open the File

1. Save the file with the name index.html.
2. Open the file in your browser.
3. Check the browser tab title and the displayed content.
4. Change the heading, save the file and refresh the browser.

Understanding the Example

• <!DOCTYPE html> tells the browser to use standards mode for modern HTML.
• <html lang="en"> identifies the document language as English.
• <meta charset="UTF-8"> declares the character encoding.
• <meta name="viewport"> helps the page use the device's viewport appropriately.
• <title> defines the document title shown in the browser tab and used in other contexts.
• <body> contains the document's main visible content.

You will study the document structure and these elements in greater depth in the next lessons.

12. Common Beginner Mistakes

• Confusing HTML with CSS: HTML defines structure and meaning; CSS controls presentation.
• Confusing HTML with JavaScript: JavaScript adds executable behavior and application logic.
• Using the wrong file extension: Save this exercise as .html, not .txt.
• Forgetting to save changes: Save the file before refreshing the browser.
• Assuming every website needs Laravel: Static HTML pages can be served without a backend framework.
• Assuming every browser renders every feature identically: Feature support and rendering details can differ, so test important behavior.
• Thinking HTML5 is a completely frozen version: Modern HTML continues to evolve.

13. Practical Exercises

Exercise 1: Explain HTML

Write two or three sentences explaining what HTML is and why websites use it.

Exercise 2: Compare the Three Technologies

Create a small table in your notes describing the responsibilities of HTML, CSS and JavaScript.

Exercise 3: Build a Personal Webpage

Modify your first HTML file to include your name, a short introduction and a goal you want to achieve.

Exercise 4: Explain the Request Process

Describe what happens when someone enters a website URL in a browser, from the request through the server response to rendering.

Exercise 5: Static or Dynamic?

Consider a simple company information page and a dashboard that displays each logged-in user's orders. Explain which could be served as static HTML and why the dashboard commonly needs application logic and data access.

14. Lesson Summary

• HTML stands for HyperText Markup Language and defines webpage structure and meaning.
• Modern HTML includes semantic markup, media elements, forms and other capabilities.
• CSS controls presentation, while JavaScript adds behavior and executable logic.
• Browsers request resources, parse HTML, construct the DOM and render webpages.
• Servers return resources or application-generated responses.
• Static and dynamically generated pages can both produce HTML for a browser.
• You have created your first HTML file and are ready to study document structure.

15. Section 1 Quiz: Test Your Understanding

Answer all 10 questions before proceeding. Try to answer from memory first. Review the explanations for any question you miss.

Question 1: What does HTML stand for?

1. HyperText Markup Language
2. High Transfer Machine Language
3. Hyperlink Text Management Logic
4. Home Tool Markup Language

Question 2: Which technology primarily defines the structure and meaning of webpage content?

1. CSS
2. HTML
3. JavaScript
4. SQL

Question 3: Which technology would you primarily use to change text color and spacing?

1. HTML
2. SQL
3. CSS
4. HTTP

Question 4: Which two tasks does a browser commonly perform when processing a webpage? Select all that apply.

1. Parsing HTML into a document structure
2. Processing CSS for visual presentation
3. Automatically authoring the website's original HTML
4. Replacing the server's application database

Question 5: True or False — HTML is a markup language rather than a general-purpose programming language.

1. True
2. False

Question 6: What is the primary role of a web server in a typical website request?

1. To receive requests and send responses
2. To act as the user's browser interface
3. To replace every HTML response with CSS
4. To guarantee every webpage is static

Question 7: True or False — Every website must use Laravel or another server-side framework to display HTML.

1. True
2. False

Question 8: Which file extension is conventionally used for the first HTML page in this lesson?

1. .css
2. .sql
3. .html
4. .php

Question 9: Which three are examples of modern HTML capabilities or elements? Select all that apply.

1. Semantic elements such as <main> and <nav>
2. Native <audio> and <video> elements
3. CSS Flexbox as an HTML element
4. Form input types such as email and date

Question 10: What document representation does a browser construct while parsing HTML?

1. A relational database schema
2. The Document Object Model (DOM)
3. A CSS stylesheet file
4. A server-side PHP application

Congratulations!

You have completed Section 1 of Codementrix HTML5 Mastery. You now understand the purpose of HTML, its relationship with CSS and JavaScript, the browser-server interaction and how to create your first HTML page.

Next lesson: Section 2 — HTML Document Structure, DOCTYPE and Browser Parsing.