HTML Tutorial
Learn HTML step by step with easy examples
What is HTML?
HTML stands for HyperText Markup Language. It's the standard language used to create web pages. Think of HTML as the skeleton of a website - it provides the basic structure and content.
HTML uses "tags" to mark up content. Tags are keywords surrounded by angle brackets:
Basic HTML Structure
Every HTML document has the same basic structure. Let's start with a simple example:
Hello World!
This is my first paragraph.
Let's break this down:
- <!DOCTYPE html>Tells the browser this is an HTML5 document
- <html>The root element that contains all other elements
- <head>Contains information about the page (not visible to users)
- <title>Sets the page title (shown in browser tab)
- <body>Contains all the visible content of the page
Headings
HTML has 6 levels of headings, from h1 (largest) to h6 (smallest). Use them to organize your content:
This is a Main Heading
This is a Section Heading
This is a Subsection Heading
This is a Smaller Heading
This is an Even Smaller Heading
This is the Smallest Heading
Tip:
Use headings in order (h1, then h2, then h3, etc.). Don't skip levels. This helps screen readers and search engines understand your content structure.
Paragraphs and Text Formatting
Learn how to add and format text on your web pages:
This is a paragraph. It can contain multiple sentences and will wrap to the next line automatically.
This is another paragraph. Each paragraph tag creates a new block of text.
You can add a line break
This text is bold and important.
This text is emphasized (italic).
This is highlighted text.
This is smaller text.
This is deleted text and inserted text.
Links
Links connect web pages together. The anchor tag <a> creates links:
Link Attributes Explained:
href- The destination URL or filetarget="_blank"- Opens link in a new tabtitle- Tooltip text when hovering over the link
Images
Add images to your web pages with the img tag:
Important:
Always include the alt attribute. It describes the image for people who can't see it and helps with accessibility.
Lists
Create ordered (numbered) and unordered (bulleted) lists:
My Favorite Foods:
Steps to Make Coffee:
Nested Lists
You can put lists inside other lists:
Web Development Skills:
Tables
Tables display data in rows and columns. Here's how to create a simple table:
| Name | Age | City |
|---|---|---|
| John | 25 | New York |
| Sarah | 30 | London |
| Mike | 28 | Tokyo |
Table Elements Explained:
<table>- Creates the table<thead>- Table header section<tbody>- Table body section<tr>- Table row<th>- Table header cell<td>- Table data cell
Forms
Forms collect information from users. Here's a simple contact form:
Contact Us
Common Input Types:
type="text" - Regular text input
type="email" - Email address
type="password" - Password (hidden text)
type="number" - Numbers only
type="checkbox" - Checkboxes
type="radio" - Radio buttons
type="date" - Date picker
type="file" - File upload
Practice Exercise
Try creating a simple "About Me" page using what you've learned. Include:
- A main heading with your name
- A paragraph about yourself
- A list of your hobbies
- A link to your favorite website
- An image (you can use a placeholder)
Use our code editor to practice! Start with the basic HTML structure and add your content.