1. HTML Fundamentals, Document Structure & Headings

Theory & Practical Manual: DOCTYPE, html, head, body, headings, paragraphs, pre & attributes

Module 1: HTML5 Architecture & Document Tree Theory

HTML (HyperText Markup Language) is the standard skeleton markup language of web browsers.

Core Theory & Principles

<!DOCTYPE html> is the document type declaration notifying the browser that the page uses HTML5 standard rendering rules.
<html> is the root container tag wrapping all content.
<head> contains metadata (charset, viewport, title, links to CSS). Content inside head is not rendered on screen.
<body> contains all visible elements (headings, paragraphs, images, tables).
Elements consist of opening tag, content, and closing tag (<tag>Content</tag>).

Practical Key Takeaways

Mastering HTML5 Architecture & Document Tree Theory builds fundamental development capability. Review practical code and outputs carefully.

💻 Practical Code Example - HTML5 Architecture & Document Tree Theory

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 Standard Page</title>
</head>
<body>
    <h1>Welcome to HTML5 Master Class by Instructor</h1>
    <p>This is a standard compliant HTML5 web page.</p>
</body>
</html>

📤 Expected Output / Browser Rendered Result:

Heading: Welcome to HTML5 Master Class by Instructor Paragraph: This is a standard compliant HTML5 web page.

Module 2: HTML Headings (h1-h6), Paragraphs & Preformatted Text

Structuring document hierarchy and text display.

Core Theory & Principles

<h1> to <h6> represent 6 levels of headings.
<h1> defines the primary main title (crucial for SEO). Only one <h1> should exist per page.
<p> defines a paragraph block with default margin top and bottom.
<br> is a self-closing void element inserting a line break without starting a new paragraph.
<pre> preserves exact white spaces, tabs, and line breaks as typed in source code.

Practical Key Takeaways

Mastering HTML Headings (h1-h6), Paragraphs & Preformatted Text builds fundamental development capability. Review practical code and outputs carefully.

💻 Practical Code Example - HTML Headings (h1-h6), Paragraphs & Preformatted Text

<h1>Heading Level 1 (Main Topic)</h1>
<h2>Heading Level 2 (Sub-topic)</h2>
<p>First paragraph text.<br>Line break applied here.</p>
<pre>
Line 1: Indented text
Line 2:    Preserved spacing
</pre>

📤 Expected Output / Browser Rendered Result:

Rendered Headings H1 & H2 First paragraph text. Line break applied here. Line 1: Indented text Line 2: Preserved spacing