Start Here

HTML Fundamentals

Learn HTML from scratch! Build web pages with proper structure, semantic elements, and accessibility in mind.

📝 How to Practice HTML

Edit the HTML code on the left side
See your changes instantly in the white preview area
Click quick buttons to try pre-built examples
Use ⛶ Expand for full-screen editing
The preview shows exactly how browsers render your HTML

🏗️ HTML Document Structure

Every HTML document follows this basic structure. Think of it as the skeleton of your webpage!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Page Title</title>
  </head>
  <body>
    <!-- Your content goes here -->
  </body>
</html>

<!DOCTYPE html>

Tells browser this is HTML5

<head>

Metadata, title, links to CSS

<body>

Visible content goes here

📚 Essential HTML Tags

📝

Text Elements

<h1> - <h6>Headings (h1 is largest)

<p>Paragraph of text

<span>Inline text container

<strong>Important (bold) text

<em>Emphasized (italic) text

<br>Line break

📦

Container Elements

<div>Generic container (block)

<header>Page/section header

<nav>Navigation links

<main>Main content area

<section>Thematic grouping

<footer>Page/section footer

📝 Practice: Headings & Paragraphs

Try:

HTML Code

Live Preview

Welcome to My Website

About Me

Hello! I'm learning HTML and it's fun!

This is my first webpage.

My Hobbies

I enjoy coding and reading books.

📋 HTML Lists

📌 Three Types of Lists:

<ul>

Unordered (bullets)

<ol>

Ordered (numbers)

<dl>

Definition list

📋 Practice: Lists

Try:

HTML Code

Live Preview

My Favorite Foods

Pizza 🍕
Sushi 🍣
Ice Cream 🍦

Steps to Make Tea

Boil water
Add tea bag
Wait 3 minutes
Add sugar/milk (optional)
Enjoy! ☕

🔗 Links & Images

🔗

Anchor Tag

<a href="url">Link Text</a>

href - destination URL

target="_blank" - new tab

🖼️

Image Tag

<img src="url" alt="description">

src - image source URL

alt - accessibility text

🔗 Practice: Links & Images

Try:

HTML Code

Live Preview

Useful Links

Learn more at Google

My Favorite Image

📊 HTML Tables

Tables are used to display data in rows and columns:

<table>

Table container

<tr>

Table row

<th>

Header cell (bold)

<td>

Data cell

📊 Practice: Tables

Try:

HTML Code

Live Preview

Student Grades

Name	Subject	Grade
Alice	Math	A
Bob	Science	B+
Charlie	English	A-

📝 HTML Forms

🎯 Forms collect user input!

Forms are essential for login pages, search boxes, contact forms, and more.

<form>

Form container

<input>

Text, email, password...

<textarea>

Multi-line text

<select>

Dropdown menu

<button>

Clickable button

<label>

Input label (accessibility)

📝 Practice: Forms

Try:

HTML Code

Live Preview

Contact Us

🏛️ Semantic HTML

Semantic HTML uses meaningful tags that describe the content. This improves accessibility and SEO!

<header>Logo, Navigation

<nav>Navigation Links

<main>

<article>

<section>

<aside>

Sidebar

<footer>Copyright, Links

🌐 Practice: Build a Complete Page

Try:

HTML Code

Live Preview

My Portfolio

About Me

Hi! I'm a web developer learning HTML.

My Projects

Portfolio Website
Blog Page

💡 HTML Best Practices

✅

Always use lowercase tags

✅

Close all tags properly

<p>text</p> not <p>text

✅

Use semantic elements

✅

Add alt to images

For accessibility and SEO

✅

Indent your code

Makes it easier to read

✅

Validate your HTML

Use W3C validator