Step 2
Step 2 — HTML with meaning
0 views
Step 2 — HTML with meaning
HTML is about meaning. Don't drown in <div>s; pick tags that say what this is. Search engines, screen readers, and your future self benefit.
1. First page
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My first page</title>
</head>
<body>
<header>
<h1>Hello, my first page</h1>
</header>
<main>
<article>
<h2>Today's line</h2>
<p>I wrote my first HTML.</p>
</article>
</main>
<footer>
<p>© 2026 me</p>
</footer>
</body>
</html>
<header>, <main>, <article>, <footer> — semantic tags that name their role.
2. Tag families
Structure
<header> <nav> <main> <article> <section> <aside> <footer>
Body
<h1>..<h6> <p> <ul>/<ol>/<li> <blockquote> <figure>/<figcaption>
Inline
<a href> <strong> <em> <code> <time datetime> <mark>
Forms
<form action="/submit" method="post">
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
<button type="submit">Send</button>
</form>
3. Input types
<input type="text"> <input type="email"> <input type="password">
<input type="number"> <input type="tel"> <input type="url">
<input type="date"> <input type="color"> <input type="file">
<input type="checkbox"> <input type="radio">
type="email" triggers automatic validation and keyboard hints on mobile.
4. Accessibility — alt · label · aria
<img src="logo.png" alt="Codingstairs logo">
<img src="decoration.svg" alt=""> <!-- decorative → empty alt -->
<label for="name">Name</label>
<input id="name" name="name">
<button aria-label="Search">🔍</button>
<div role="alert">Saved</div> <!-- only when semantics don't cover -->
5. Metadata · SEO
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page title - Site name</title>
<meta name="description" content="One-sentence summary">
<meta property="og:title" content="Page title">
<meta property="og:description" content="summary">
<meta property="og:image" content="https://example.com/og.jpg">
<meta property="og:url" content="https://example.com/page">
<meta name="twitter:card" content="summary_large_image">
<link rel="icon" href="/favicon.ico">
<link rel="canonical" href="https://example.com/page">
</head>
title + description + og:image covers 80% of SEO basics.
6. Semantic vs anti-pattern
Anti-pattern:
<div class="header">
<div class="title">My blog</div>
<div class="nav"><div class="nav-item"><a href="/">Home</a></div></div>
</div>
Semantic:
<header>
<h1>My blog</h1>
<nav><ul><li><a href="/">Home</a></li></ul></nav>
</header>
7. Try it
Save as index.html, double-click — the browser opens it. In VS Code, type ! + Tab for the boilerplate.
8. Validators
- validator.w3.org
- Chrome DevTools → Lighthouse → Accessibility
- WAVE browser extension
9. Gotchas
- Multiple
<h1>— convention is one per page; inside<article>counts separately - Overused
<section>— if no heading,<div>is enough - Missing
alt— mandatory (oralt=""for decorative) <table>for layout — tables are for tabular data
Deeper
Next
Step 3 — CSS adds color, spacing, alignment to the same HTML.