Think of a webpage like a house. HTML is the skeleton—the structure that holds everything together. Just like a skeleton gives your body its shape, HTML gives a webpage its structure.
Without HTML, a webpage would be nothing. With HTML, you can create headings, paragraphs, images, links, and everything else you see on websites.
HTML stands for HyperText Markup Language. Don't worry about the fancy name—just remember that HTML is the code that tells the browser "this is a heading" or "this is a paragraph" or "this is a link."
What HTML Is and Why We Use It
HTML is a language that web browsers understand. It's made up of special words (called tags) that tell the browser how to display content.
Why Do We Use HTML?
We use HTML because:
It structures content - Tells the browser what each part of the page is
It's universal - All browsers understand HTML
It's simple - Easy to learn and write
It works everywhere - Works on computers, phones, tablets
Think of HTML like the blueprint for a house. The blueprint shows where walls go, where doors are, and how rooms are arranged. HTML shows where headings go, where paragraphs are, and how the page is organized.
A Simple Example:
<h1>Welcome to My Website</h1>
<p>This is a paragraph of text.</p>
This HTML tells the browser:
The browser reads this code and displays it on the screen.
What an HTML Tag Is
An HTML tag is a special word wrapped in angle brackets (< and >). Tags tell the browser what kind of content something is.
The Box Analogy
Think of an HTML tag like a box with a label:
┌─────────────────────┐
│ <p> │ ← Opening tag (label on the box)
│ │
│ This is text │ ← Content (what's inside the box)
│ │
│ </p> │ ← Closing tag (closing the box)
└─────────────────────┘
The tag is like the label that says "This box contains a paragraph."
The Sentence Analogy
Or think of it like a sentence:
The opening tag is like saying "I'm starting a sentence"
The content is the actual words
The closing tag is like saying "I'm ending the sentence"
Basic Tag Structure:
Tags look like this:
<p> - Opening tag
</p> - Closing tag
The / in the closing tag means "end here."
Opening Tag, Closing Tag, and Content
Most HTML tags come in pairs: an opening tag and a closing tag, with content in between.
The Three Parts:
<p>This is the content</p>
│ │ │ │
│ │ │ └─ Closing tag
│ │ └─── End of content
│ └────────────────────── Content (the actual text)
└──────────────────────── Opening tag
Breaking It Down:
Opening tag: <p> - Says "start a paragraph here"
Content: This is the content - The actual text that appears
Closing tag: </p> - Says "end the paragraph here"
Visual Example:
Opening Tag Content Closing Tag
│ │ │
│ │ │
<p> This is a paragraph of text. </p>
│ │ │
│ │ │
"Start" "What you see" "End"
Real Examples:
Heading:
<h1>My First Heading</h1>
│ │ │ │
│ │ │ └─ Closing tag
│ │ └─── End of content
│ └──────────────────── Content
└─────────────────────── Opening tag
Paragraph:
<p>This is a paragraph.</p>
│ │ │ │
│ │ │ └─ Closing tag
│ │ └─── End of content
│ └────────────────────── Content
└──────────────────────── Opening tag
Link:
<a>Click here</a>
││ │ │
││ │ └─ Closing tag
││ └─── End of content
│└────────────── Content
└──────────────── Opening tag
What an HTML Element Means
An HTML element is the complete thing—the opening tag, the content, AND the closing tag all together.
Tag vs Element:
Tag = Just the label (the <p> and </p> parts)
Element = The whole thing (tag + content + tag)
Visual Breakdown:
HTML Element (the complete thing):
┌─────────────────────────────────────┐
│ <p>This is a paragraph.</p> │
│ │ │ │ │ │
│ │ │ │ │ │
│ │ └──────────────────┘ │ │
│ │ Content │ │
│ │ │ │
│ └───────────────────────┘ │
│ Opening Tag Closing Tag │
└─────────────────────────────────────┘
Tags (just the labels):
<p> and </p>
Simple Way to Remember:
Example:
<h1>Hello World</h1>
When people say "HTML element," they mean the whole package—opening tag, content, and closing tag.
Self-Closing (Void) Elements
Some HTML elements don't have content, so they don't need a closing tag. These are called self-closing or void elements.
Think of it like this: Some boxes don't have anything inside them—they're just markers or placeholders.
Examples of Self-Closing Elements:
Line Break:
<br>
This creates a line break (moves to the next line). There's no content, so no closing tag needed.
Image:
<img src="photo.jpg">
This shows an image. The image file is separate, so there's no content between tags.
Horizontal Rule:
<hr>
This creates a horizontal line. Again, no content, so no closing tag.
Visual Comparison:
Regular Element (has content):
┌─────────────────────┐
│ <p> │ ← Opening tag
│ Content here │ ← Content (needs closing)
│ </p> │ ← Closing tag
└─────────────────────┘
Self-Closing Element (no content):
┌─────────────────────┐
│ <br> │ ← Just the tag, no content
│ │ ← No closing tag needed
└─────────────────────┘
You might see them written two ways:
Old way:
<br>
<hr>
<img src="photo.jpg">
New way (with slash):
<br />
<hr />
<img src="photo.jpg" />
Both ways work! The / before the > is optional but some people prefer it.
Common Self-Closing Elements:
Remember: If an element doesn't have content between tags, it's probably self-closing!
Block-Level vs Inline Elements
HTML elements behave differently when displayed. Some take up a full line (block-level), and some only take up as much space as needed (inline).
Block-Level Elements
Block-level elements take up the full width of their container and start on a new line.
Think of them like building blocks that stack on top of each other:
┌─────────────────────────────────┐
│ <h1>Heading</h1> │ ← Takes full width
└─────────────────────────────────┘
┌─────────────────────────────────┐
│ <p>Paragraph</p> │ ← Takes full width, new line
└─────────────────────────────────┘
┌─────────────────────────────────┐
│ <div>Division</div> │ ← Takes full width, new line
└─────────────────────────────────┘
Each block-level element:
Inline Elements
Inline elements only take up as much space as their content and stay on the same line.
Think of them like words in a sentence that flow together:
┌─────┐ ┌──────┐ ┌─────┐
│ <a> │ │ <span>│ │ <b> │ ← All on same line
│link │ │text │ │bold │
└─────┘ └──────┘ └─────┘
Each inline element:
Visual Comparison:
Block-Level Layout:
┌──────────────────────────────┐
│ <h1>Heading</h1> │ ← Full width, new line
└──────────────────────────────┘
┌──────────────────────────────┐
│ <p>Paragraph one</p> │ ← Full width, new line
└──────────────────────────────┘
┌──────────────────────────────┐
│ <p>Paragraph two</p> │ ← Full width, new line
└──────────────────────────────┘
Inline Layout:
┌────┐ ┌─────┐ ┌──────┐ ┌─────┐
│<a> │ │<span>│ │<b> │ │<i> │ ← All on same line
│link│ │text │ │bold │ │ital│
└────┘ └─────┘ └──────┘ └─────┘
Common Block-Level Elements:
<h1>, <h2>, <h3>, etc. - Headings
<p> - Paragraphs
<div> - Division/container
<ul>, <ol> - Lists
<li> - List items
<section> - Section
<article> - Article
Common Inline Elements:
Mixing Block and Inline:
You can put inline elements inside block elements:
<p>This is a paragraph with a <a href="#">link</a> inside it.</p>
The <p> is block-level (takes full width), but the <a> inside it is inline (only takes needed space).
Visual Example of Mixing:
┌────────────────────────────────────────┐
│ <p> │ ← Block element
│ This is text with a │
│ ┌─────┐ │
│ │ <a> │ link in it. │ ← Inline element
│ └─────┘ │
│ </p> │
└────────────────────────────────────────┘
Here are the most common HTML tags you'll use when building webpages:
Headings
Headings create titles and subtitles. There are 6 levels:
<h1>Main Heading (Biggest)</h1>
<h2>Subheading</h2>
<h3>Smaller Subheading</h3>
<h4>Even Smaller</h4>
<h5>Small</h5>
<h6>Smallest Heading</h6>
Use headings to organize your content, like chapter titles in a book.
Paragraphs
Paragraphs are for regular text:
<p>This is a paragraph. It contains regular text that forms a paragraph.</p>
<p>This is another paragraph.</p>
Links
Links let users navigate to other pages:
<a href="https://example.com">Click here</a>
The href tells the browser where to go when clicked.
Images
Images display pictures:
<img src="photo.jpg" alt="Description">
Lists
Unordered list (bullet points):
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
Ordered list (numbered):
<ol>
<li>First step</li>
<li>Second step</li>
<li>Third step</li>
</ol>
Divisions
<div> is a container that groups other elements:
<div>
<h2>Section Title</h2>
<p>Some content here.</p>
</div>
Spans
<span> is for styling small pieces of text inline:
<p>This is <span style="color: red;">red text</span> in a paragraph.</p>
Text Formatting
Bold:
<b>Bold text</b>
<strong>Also bold (semantic)</strong>
Italic:
<i>Italic text</i>
<em>Also italic (semantic)</em>
Line Breaks
<p>First line<br>Second line</p>
Horizontal Rule
<hr>
Creates a horizontal line to separate sections.
Quick Reference Table
| Tag | Type | Purpose | Example |
<h1> to <h6> | Block | Headings | <h1>Title</h1> |
<p> | Block | Paragraph | <p>Text</p> |
<div> | Block | Container | <div>Content</div> |
<a> | Inline | Link | <a href="#">Link</a> |
<span> | Inline | Text wrapper | <span>Text</span> |
<img> | Inline | Image | <img src="pic.jpg"> |
<ul>, <ol> | Block | Lists | <ul><li>Item</li></ul> |
<br> | Inline | Line break | <br> |
<hr> | Block | Horizontal line | <hr> |
<b>, <i> | Inline | Formatting | <b>Bold</b> |
Try It Yourself: Inspect HTML in Your Browser
One of the best ways to learn HTML is to see it in action. Here's how:
How to Inspect HTML:
Open any website in your browser
Right-click on any part of the page
Click "Inspect" or "Inspect Element"
Look at the HTML code that appears
You'll see all the HTML tags that make up that webpage! Try clicking on different parts of the page and watch how the HTML highlights.
What You'll See:
All the HTML tags
How elements are nested (inside each other)
Block vs inline elements in action
Real examples of how HTML is used
Practice Exercise:
Open a simple website
Inspect a heading - see the <h1> or <h2> tag
Inspect a paragraph - see the <p> tag
Inspect a link - see the <a> tag
Notice how elements are inside other elements
This is how professional developers learn and debug HTML!
Key Takeaways
HTML is the skeleton of a webpage - it structures everything
Tags are labels - they tell the browser what kind of content something is
Elements are complete - opening tag + content + closing tag
Opening and closing tags wrap around content
Self-closing elements don't need closing tags (like <br>)
Block-level elements take full width and start on new lines
Inline elements only take needed space and stay on same line
Common tags like <h1>, <p>, <a>, <img> are used everywhere
Inspect HTML in your browser to see it in action
Don't Worry About Remembering Everything
There are many HTML tags, and you don't need to memorize them all right away. Start with the basics:
<h1> for headings
<p> for paragraphs
<a> for links
<img> for images
As you practice, you'll naturally learn more tags. The important thing is understanding the concept of tags and elements. Once you get that, learning new tags is easy!
Remember: Every webpage you visit is made with HTML. You're learning the language of the web!
