Getting Started

Welcome to HTML Mastery

Your complete guide to learning HTML from scratch to advanced level

🎯 What You'll Learn

This comprehensive course will take you from absolute beginner to HTML expert through:

Interactive Lessons with live code editors
Hands-on Projects to build your portfolio
Quizzes & Exercises to test your knowledge
Real-world Examples you can use immediately

Tip: Complete each lesson in order and practice with the code examples. Don't just read - code along!

Course Structure

📚

HTML Fundamentals

Learn the basics of HTML structure, tags, and elements

Start Learning

🔗

Links & Media

Connect pages and add images, audio, and video

Start Learning

📊

Tables & Forms

Create data tables and interactive forms

Start Learning

Note: This is a complete learning environment. You don't need to install anything - just start coding in the built-in editors!

Lesson 1

HTML Document Structure

Learn the foundation of every HTML page

Basic HTML Structure

Every HTML document follows a specific structure. Let's examine the essential components:

basic-structure.html

<!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 HTML!</h1>
    <p>This is my first web page. I'm learning HTML structure.</p>
    <p>HTML uses tags to structure content on the web.</p>
</body>
</html>

Output Preview

💡 Practice Exercise

Try modifying the code above to:

Change the page title to "My Practice Page"
Add a second heading using <h2>
Add a horizontal rule with <hr>
Add a line break with <br>

Key Components Explained

1. DOCTYPE Declaration

The <!DOCTYPE html> declaration defines that this document is an HTML5 document. It must be the very first thing in your HTML document.

2. HTML Element

The <html> element is the root element and wraps all content on the page. The lang attribute specifies the language of the document.

3. Head Section

The <head> element contains meta information about the document:

<meta charset="UTF-8"> - Defines character encoding
<meta name="viewport"> - Controls layout on mobile browsers
<title> - Sets the page title shown in browser tabs

4. Body Section

The <body> element contains all the visible content of your web page - everything users see in their browser.

Pro Tip: Always include the lang attribute in your <html> tag. This helps search engines and screen readers understand your content.

🧠 Quick Knowledge Check

Which tag is used to define the main content of an HTML document?

<head>
<body>
<main>
<content>

Lesson 2

Text Formatting & Headings

Learn how to structure and format text content

HTML Headings

HTML provides six levels of headings, from <h1> (most important) to <h6> (least important).

headings.html

<!DOCTYPE html>
<html>
<head>
    <title>Text Formatting Examples</title>
</head>
<body>
    <h1>Main Title (h1)</h1>
    <h2>Chapter Title (h2)</h2>
    <h3>Section Heading (h3)</h3>
    
    <p>This is a regular paragraph with <strong>bold text</strong> and <em>italic text</em>.</p>
    
    <p>This text is <mark>highlighted</mark>, this is <small>small text</small>, 
    and this is <del>deleted text</del> with <ins>inserted text</ins>.</p>
    
    <p>Chemical formula: H<sub>2</sub>O</p>
    <p>Mathematical equation: x<sup>2</sup> + y<sup>2</sup> = z<sup>2</sup></p>
</body>
</html>

Output Preview

💡 Practice Exercise

Create a short biography page with:

Your name as an H1 heading
A brief introduction as a paragraph
Section headings for "Education", "Skills", and "Hobbies"
Use at least three different text formatting tags

Text Formatting Elements

Semantic vs. Presentational Formatting

HTML has both semantic and presentational text formatting elements:

Semantic elements describe the meaning of text, while presentational elements only define how text looks.

Element	Description	Type
`<strong>`	Important text	Semantic
`<em>`	Emphasized text	Semantic
`<mark>`	Highlighted text	Semantic
`<b>`	Bold text (without importance)	Presentational
`<i>`	Italic text (without emphasis)	Presentational

Best Practice: Use semantic elements (<strong>, <em>) when possible as they provide meaning to both browsers and assistive technologies.