Coding/Learn/html/introduction
HTML Beginner Course
01.Introduction to HTML
02.Anatomy of an HTML Element
03.The Sacred HTML5 Skeleton
04.Headings (h1 to h6)
05.Paragraphs, Line Breaks & Dividers
06.Text Formatting & Emphasis
07.Hyperlinks & Navigation (<a>)
08.Images & The Sacred Alt Text (<img>)
09.Ordered & Unordered Lists (<ul>, <ol>, <li>)
10.Block vs Inline Elements
11.Generic Containers (<div> & <span>)
12.Semantic HTML (<header>, <nav>, <main>, <footer>)
13.Tables (<table>, <tr>, <th>, <td>)
14.Native Audio & Video Elements
15.The Invisible Brain (<head> & Meta Tags)
16.Interactive Forms (<form>)
17.Input Types (<input>)
18.Accessible Labels & Submit Buttons
19.Textareas & Select Dropdowns (<textarea>, <select>)
20.Capstone: Building Your First Web Profile Page
Course Certificate0%

Complete all lessons to earn

LearnIntroduction to HTML
1 / 20 0%
Lesson 01 of 20
4 mins read

Introduction to HTML

All TracksNext Lesson
In Plain English

HTML (HyperText Markup Language) is not a programming language—it is a markup language. It doesn’t do complex math or calculate rocket trajectories; its job is to tell web browsers: "Hey, this chunk is a headline, this is a paragraph, and that is a picture of a cat."

The Mental Model

"Think of building a house. HTML is the wooden frame and brick walls. CSS is the paint and fancy wallpaper. JavaScript is the electrical wiring that turns on the lights when you clap your hands. Without HTML, there is literally no house!"

Deep Dive: How It Works

Created by Tim Berners-Lee in 1991, HTML was originally designed so scientists could share research papers with clickable links without mailing floppy disks to each other.

A web browser (Chrome, Safari, Firefox) is basically a giant translator. It downloads raw HTML text files over the internet and magically paints them into visual buttons, text, and layouts on your screen.

HTML uses "tags" wrapped in angle brackets like <p> and </p>. The opening tag starts an element, and the closing tag with a forward slash ends it.

Syntax Blueprint

<tagname>Content goes here</tagname>

Opening tag opens the element, closing tag (with slash) marks where it ends.

PointCore Rules to Remember

Point star
Markup, Not Programming: HTML describes content structure and meaning, not computational logic.
Point star
Tags Work in Pairs: Most HTML tags require an opening <tag> and a closing </tag>.
Point star
Universal Standard: Every single website from Google to YouTube relies on HTML at its core.

Common Beginner Traps & How to Fix Them

Mistake:Forgetting the closing slash

Why it happens: Writing <p>hello<p> instead of <p>hello</p>.

How to fix: Always include the forward slash in closing tags: </p>.

Pro Tip: HTML is case-insensitive, but writing lowercase tags like <p> instead of <P> is the universal professional standard.

Live Interactive Example

Hit Run Code to see it live
Your Very First HTML Snippet
HTML5
1
2
3
Live Browser Preview
Click "Preview / Apply" to view the rendered output.
How it works: The <h1> tag creates a large headline, and <p> tags organize text into readable paragraphs.

Your Turn: Micro Challenge

No pressure! Edit the starter code below and test your solution with instant feedback.

Micro Exercise

Create your first heading and paragraph

  • PointWrite an <h1> tag containing "Hello Web!"
  • PointDirectly below it, write a <p> tag containing "I am learning HTML."
1
2
Browser Preview & Output
Click "Check HTML" to test your solution.

Finished reading and practicing?

Mark this lesson as completed to update your course progress.

All TracksNext Lesson
Overview100 SheetLearnCertificates