HTML for Beginners 🎯
What is HTML?
HTML = HyperText Markup Language
Think of HTML as the skeleton of every webpage. Just like your skeleton gives your body structure, HTML gives webpages their structure.
Why do we use it?
Tell browsers what's a heading, what's a paragraph, what's a button
Create the foundation every website needs
Without HTML, websites would just be plain text with no structure
What is an HTML Tag?
A tag is like a label or command that tells the browser: "Hey, this is a heading!" or "This is a paragraph!"
Tags look like this: <p>
They use angle brackets: < >
Opening Tag + Content + Closing Tag
Most tags work in pairs:
html
<p>This is a paragraph!</p>
Breaking it down:
<p>= Opening tag (starts the paragraph)This is a paragraph!= Content (the actual text)</p>= Closing tag (ends the paragraph - notice the/)
Think of it like a sandwich:
Opening tag = top bun 🍔
Content = the filling 🥬🍅
Closing tag = bottom bun
Tag vs Element (What's the Difference?)
TAG = Just the label itself
- Example:
<h1>or</h1>
ELEMENT = The whole thing (opening + content + closing)
- Example:
<h1>Welcome!</h1>is a complete element
Quick memory trick: The element includes everything, the tag is just the bracket part.
Self-Closing Tags (Void Elements)
Some tags don't need content or a closing tag. They're self-contained.
html
<img src="cat.jpg">
<br>
<hr>
<input type="text">
Why? These tags don't wrap around content—they just do one thing:
<img>displays an image<br>creates a line break<hr>draws a horizontal line<input>creates a form field
Block vs Inline Elements
Block Elements 📦
Take up the full width available
Start on a new line
Stack like blocks
html
<h1>Heading</h1>
<p>Paragraph</p>
<div>Division</div>
Each one appears on its own line!
Inline Elements ➡️
Only take up as much space as needed
Don't start a new line
Flow with text
html
<span>This</span> <strong>flows</strong> <em>together</em>
All on the same line!
Common HTML Tags You'll Use All the Time
Headings (biggest to smallest)
html
<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Subsection</h3>
Use h1 for the main title, h2 for sections, etc.
Paragraphs
html
<p>A paragraph of text goes here.</p>
Containers
html
<div>A block container for grouping stuff</div>
<span>An inline container</span>
Text Formatting
html
<strong>Bold text</strong>
<em>Italic text</em>
Links
html
<a href="https://google.com">Click me!</a>
Images
html
<img src="photo.jpg" alt="A photo">
Lists
html
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
Quick Practice Example
html
<h1>My First Webpage</h1>
<p>This is a paragraph about HTML.</p>
<p>HTML is <strong>awesome</strong>!</p>
What this creates:
A big heading
Two paragraphs
The word "awesome" is bold
Try This Right Now! 🚀
Right-click anywhere on this webpage
Click "Inspect" or "Inspect Element"
Look at the Elements tab
You're seeing the actual HTML!
Explore: Click the little arrows to expand tags and see what's inside.
Key Takeaways ✨
✅ HTML = webpage skeleton
✅ Tags use < > brackets
✅ Most tags open <p> and close </p>
✅ Element = complete tag + content
✅ Some tags self-close <img>
✅ Block = full width, Inline = only what's needed
✅ Start with h1, p, div, span
Next step: Open a blank file, save it as index.html, and start typing tags. Open it in your browser and watch it work!