Introduction

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.