Welcome to Part 1 of the HTML5 & Semantic Web Development Course. HTML (HyperText Markup Language) is the absolute foundation of everything you see, interact with, and build on the World Wide Web. Every website, from simple personal blogs to complex web apps like Google Maps or Netflix, is constructed on a skeleton of HTML.

In this first part of the course, we will explore the core structure of web documents. You will learn the history of HTML, how web browsers interpret markup, the anatomy of tags and attributes, and the exact boilerplate code needed to build a modern, standard-compliant webpage.

Chapter 1: Introduction to HTML & How the Web Works

1.1 What is HTML?

HTML stands for HyperText Markup Language. It is not a programming language—meaning it does not have logic, loops, or variable assignments. Instead, it is a markup language used to define the structure and layout of web content.

HyperText: Refers to text that contains links to other text, allowing users to navigate between documents easily.
Markup Language: Uses tags to annotate text, images, and other content, instructing the browser on how to display them.

1.2 The Client-Server Model

When you open a browser (Chrome, Firefox, Safari) and type a URL like https://freetechlearner.com, you trigger a sequence of actions:

Request: Your browser (the client) sends a request over the internet to the computer hosting the website (the server).
Response: The server processes the request and sends back files, primarily HTML, CSS, and JavaScript.
Parsing & Rendering: Your browser parses (reads) the HTML document from top to bottom, fetches any linked assets (like stylesheets or images), and renders the graphical webpage on your screen.

1.3 The Triad of Web Technologies

Modern web development relies on three core languages:

HTML: Structure. (e.g., “This is a paragraph”, “This is a button”).
CSS (Cascading Style Sheets): Presentation and design. (e.g., “The button is blue with rounded corners”).
JavaScript: Behavior and interactivity. (e.g., “When the button is clicked, open a modal”).

Chapter 2: The Anatomy of an HTML Element

An HTML document is composed of elements. An element is a complete building block that defines a piece of content.

2.1 Element Syntax

Most elements consist of an opening tag, content, and a closing tag:

<p class="intro">Welcome to the course!</p>

Opening Tag (<p class="intro">): Tells the browser where the element begins. It consists of the tag name (p for paragraph) enclosed in angle brackets.
Attributes (class="intro"): Provide extra information about the element. Attributes always appear in the opening tag and consist of a name and a value (name="value").
Content (Welcome to the course!): The actual text, images, or nested elements inside the tag.
Closing Tag (</p>): Tells the browser where the element ends. It looks like the opening tag but includes a forward slash (/) before the tag name.

2.2 Self-Closing (Void) Elements

Not all HTML elements have content or closing tags. These are called void elements (or self-closing tags). They represent standalone nodes like line breaks, inputs, or images.

Examples:

<br> - Inserts a line break.
<hr> - Inserts a thematic horizontal rule.
<img> - Embeds an image.
<input> - Creates an input field.

Note: In modern HTML5, you do not need to add a trailing slash (like <br />), though it remains valid.

Chapter 3: The Document Type Definition

Every modern HTML document must start with a document type declaration on the very first line:

<!DOCTYPE html>

3.1 Why Do We Need It?

Historically, during the “Browser Wars” of the late 1990s, browsers rendered pages differently depending on which version of HTML was used.

Standards Mode: The browser follows modern HTML5 and CSS specifications strictly.
Quirks Mode: If the <!DOCTYPE> declaration is missing or malformed, the browser assumes the page was written for old, non-standard browsers from the 90s (like Netscape or Internet Explorer 4) and alters its layout rendering to prevent breaking old pages.
Always include <!DOCTYPE html> to ensure your website renders consistently in modern browsers.

Chapter 4: The Root & Head Elements

An HTML document has a hierarchical tree structure, known as the DOM (Document Object Model).

4.1 The Root Element (`<html>`)

The <html> element wraps the entire document. Everything except the <!DOCTYPE> goes inside it. It should always declare the primary language of the page for screen readers and search engines:

<html lang="en">
  <!-- Document content goes here -->
</html>

4.2 The Head Element (`<head>`)

The <head> element is a container for metadata—data about the HTML document. Metadata is not displayed directly on the webpage but is critical for search engines, browsers, and social media platforms.

Key tags inside <head>:

<meta charset="utf-8">: Defines the character encoding. UTF-8 covers almost all characters and symbols in the world.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures the website is responsive and displays properly on mobile screens.
<title>: Sets the title of the webpage, shown in the browser tab and search engine results.
<link>: Links external resources, like CSS stylesheets (e.g., <link rel="stylesheet" href="styles.css">).
<style>: Allows embedding internal CSS styles directly in the document.

Chapter 5: The Body Element & Core Structure

The <body> element contains all the visible content of the webpage—headings, text, images, videos, forms, and navigation menus.

Here is the default scaffolding of a standard-compliant HTML5 document:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
</head>
<body>
    <h1>Welcome to HTML5!</h1>
    <p>This is my very first webpage, built step-by-step.</p>
</body>
</html>

Chapter 6: Basic Document Walkthrough

6.1 Creating the File

To write HTML, you only need a text editor (like Visual Studio Code, Notepad, or Vim).

Create a new folder on your computer.
Inside that folder, create a file named index.html. (Note: The name index is a web standard. When a web server serves a folder, it automatically looks for a file named index.html to load as the homepage).

6.2 Testing in Your Browser

Once you save the file with the code from Chapter 5, you can view it:

Double-click the index.html file or drag it into any open web browser.
You will see the heading “Welcome to HTML5!” in large bold text, and the paragraph “This is my very first webpage…” below it.

6.3 Browser Developer Tools

All modern web browsers include Developer Tools (DevTools) that let you inspect the structure of any webpage:

Right-click anywhere on your webpage and select Inspect (or press F12 / Ctrl+Shift+I).
Go to the Elements panel.
You will see the live HTML tree structure of the page. You can double-click tags or text to temporarily edit them in real-time. This is the most powerful tool for debugging layout and structure.