HTML - zero to complete
🚀
Great starting point! Since you know programming concepts, I’ll use those as bridges. Let’s map things out first, then dive in.
📍 The Big Picture
Think of a webpage like a document with 3 layers:
| Layer | Language | Role | Programming Analogy |
|---|---|---|---|
| Structure | HTML | What’s on the page | The data / variables |
| Style | CSS | How it looks | Formatting / display logic |
| Behavior | JavaScript | What it does | The functions & logic |
We’re covering the first two today.
🧱 HTML Basics
What is HTML?
HTML = HyperText Markup Language. It’s not a programming language — it has no logic. It’s a way to label content so the browser knows what everything is.
You label things using tags.
Tags — The Core Concept
A tag looks like this:
<tagname>content goes here</tagname>
- The opening tag:
<tagname> - The closing tag:
</tagname>(note the/) - Together they form an element
Think of tags like type annotations — you’re telling the browser what type of thing this content is.
<h1>This is a big heading</h1>
<p>This is a paragraph.</p>
<button>Click me</button>
Your First HTML File
Every HTML file has this skeleton:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first webpage.</p>
</body>
</html>
Let me break this down line by line:
| Line | Meaning |
|---|---|
<!DOCTYPE html> |
“Hey browser, this is modern HTML5” |
<html lang="en"> |
The root element. Everything lives inside this. lang="en" tells browsers/screen readers the language |
<head> |
Invisible metadata — settings, title, links to CSS |
<meta charset="UTF-8"> |
Support all characters (emoji, Arabic, etc.) |
<meta name="viewport"...> |
Makes the page work on mobile screens |
<title> |
The text shown in the browser tab |
<body> |
Everything visible on the page goes here |
💡 Analogy:
<head>is like a config file at the top of your program.<body>is the actual running code.
The Most Common HTML Tags
Headings — like section titles (h1 is biggest, h6 is smallest):
<h1>Main Title</h1>
<h2>Sub Title</h2>
<h3>Smaller Sub Title</h3>
Paragraphs:
<p>This is a block of text.</p>
Bold & Italic:
<strong>This is bold/important</strong>
<em>This is italic/emphasized</em>
Links:
<a href=" https://google.com">Go to Google</a>
href is the destination. Think of it as a parameter.
Images:
<img src="cat.jpg" alt="A cute cat">
Notice: <img> has no closing tag — it’s a self-closing tag (it holds no content, just attributes).
Line break (like \n):
<br>
Horizontal line:
<hr>
Attributes — Parameters for Tags
Attributes give extra info to a tag. They go inside the opening tag:
<tagname attribute="value">content</tagname>
Examples:
<a href=" https://google.com" target="_blank">Open in new tab</a>
<img src="photo.jpg" alt="Description" width="300">
<input type="text" placeholder="Enter your name">
💡 Analogy: If a tag is a function call, attributes are its named arguments.
img(src="photo.jpg", alt="Description")← that’s basically what you’re writing.
Lists
Unordered list (bullets):
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
</ul>
Ordered list (numbers):
<ol>
<li>Wake up</li>
<li>Brush teeth</li>
<li>Code</li>
</ol>
Nesting — Elements Inside Elements
Elements can live inside each other. This creates a tree structure (like a data tree):
<ul>
<li>
<a href=" https://google.com">Google</a>
</li>
<li>
<strong>Important item</strong>
</li>
</ul>
⚠️ Rule: Always close tags in the reverse order you opened them. ✅
<strong><em>text</em></strong>❌<strong><em>text</strong></em>
The Two “Container” Tags — <div> and <span>
These are generic containers with no built-in meaning. You use them to group things so you can style them.
<div>
<p>This paragraph is inside a div.</p>
<p>So is this one.</p>
</div>
<p>This is <span>one word</span> in a paragraph.</p>
| Tag | Type | Use |
|---|---|---|
<div> |
Block (takes full width, starts new line) | Group sections |
<span> |
Inline (sits within text) | Style part of text |
Semantic Tags (HTML5 — Modern HTML)
Instead of using <div> for everything, HTML5 gave us meaningful tags:
<header> → top of the page / section
<nav> → navigation links
<main> → the main content
<section> → a section of content
<article> → a standalone piece (like a blog post)
<aside> → sidebar content
<footer> → bottom of page
Example of a full page layout in HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Blog</title>
</head>
<body>
<header>
<h1>My Blog</h1>
<nav>
<a href="/home">Home</a>
<a href="/about">About</a>
</nav>
</header>
<main>
<article>
<h2>My First Post</h2>
<p>Hello world! This is my blog.</p>
</article>
</main>
<footer>
<p>© 2026 My Blog</p>
</footer>
</body>
</html>
💡 Semantic tags are like meaningful variable names —
articleContentvsdiv4. Same function, but one tells you what it is.
✅ HTML Chapter 1
You now know:
- [x] What HTML is and how files are structured
- [x] Tags, elements, and attributes
- [x] All common content tags
- [x] Lists, links, images
- [x]
divvsspan - [x] Semantic HTML5 layout tags
Tags: #programming #html #webdevelopment #html5 #vdsology #vdsologyhtml #htmlchapter1
Write a comment