1) HTML Introduction
Definition
HTML (HyperText Markup Language) structures web pages using elements (tags).
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My First Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first HTML page.</p>
</body>
</html>
Explanation
<!DOCTYPE html>→ HTML5 mode.<head>→ metadata (title, meta, links, scripts).<body>→ visible content.
2) Editors & Setup
Definition
Write HTML in any text editor (VS Code, Notepad, Sublime). Save files with .html.
Quick Tips
- File →
index.html - Open in browser by double-click or drag-drop.
Starter Snippet
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Starter</title></head>
<body>Ready to build 🚀</body>
</html>
3) HTML Page Structure
Definition
Common layout parts: header, nav, main, aside, footer.
Example
<header>Logo</header>
<nav><a href="#">Home</a> | <a href="#">Docs</a></nav>
<main>
<section>
<h2>Welcome</h2>
<p>Intro content…</p>
</section>
<aside>Related links</aside>
</main>
<footer>© 2025 Postwires</footer>
Notes
Use semantic elements for accessibility & SEO.
4) Elements & Tags
Definition
An element = opening tag + content + closing tag. Some are void (no closing tag).
Example
<p>Paragraph</p>
<img src="logo.png" alt="Logo">
<br>
Notes
<img>, <br>, <hr>, <meta>, <link> are void elements.
5) Attributes (global + common)
Definition
Attributes add info to elements: name="value".
Common
- Global:
id,class,style,title,lang,dir,hidden,tabindex,data-* - Common:
href,src,alt,type,value,target
Example
<p id="intro" class="lead" title="hover text">Hello</p>
6) Headings <h1>–<h6>
Definition
Provide content hierarchy.
Example
<h1>Page Title</h1>
<h2>Section</h2>
<h3>Subsection</h3>
Best Practice
One <h1> per page; nest logically.
7) Paragraphs & Line Breaks
Definition
Text blocks use <p>. Use <br> for a line break.
Example
<p>This is a paragraph.</p>
<p>This is another.<br>With a line break.</p>
<hr>
8) Text Formatting
Definition
Presentational + semantic emphasis.
Example
<p><b>Bold</b> vs <strong>Strong importance</strong></p>
<p><i>Italic</i> vs <em>Emphasis</em></p>
<p><u>Underline</u>, <mark>Highlight</mark></p>
<p>H<sub>2</sub>O, x<sup>2</sup></p>
<small>Small text</small>, <del>Deleted</del>, <ins>Inserted</ins>
9) Comments
Definition
Notes ignored by browsers.
Example
<!-- This is a comment -->
<p>Visible text</p>
10) Links <a>
Definition
Navigate to URLs or anchors.
Example
<a href="https://www.postwires.com" target="_blank" rel="noopener">Visit Postwires</a>
<a href="#contact">Jump to contact section</a>
Notes
Use rel="noopener" with _blank for security.
11) Images <img>
Definition
Embed images.
Example
<img src="/images/cover.jpg" alt="Cover image" width="400">
Notes
Always include meaningful alt text.
12) Lists <ul>, <ol>, <dl>
Definition
- Unordered (bullets), Ordered (numbers), Definition (terms).
Example
<ul><li>Apple</li><li>Banana</li></ul>
<ol><li>Step 1</li><li>Step 2</li></ol>
<dl><dt>HTML</dt><dd>Markup language</dd></dl>
13) Tables
Definition
Tabular data with headers and cells.
Example
<table>
<caption>Scores</caption>
<thead><tr><th>Name</th><th>Score</th></tr></thead>
<tbody>
<tr><td>Asha</td><td>95</td></tr>
<tr><td>Ravi</td><td>88</td></tr>
</tbody>
</table>
Advanced
rowspan, colspan, <tfoot> for summaries.
14) Block vs Inline
Definition
- Block: starts on new line (
div,p,section) - Inline: flows within text (
span,a,strong)
Example
<div>Block</div>
<span>Inline</span>
15) <div> & <span>
Definition
Generic containers: block (div) and inline (span).
Example
<div class="card">
<span class="badge">New</span>
<p>Content…</p>
</div>
16) Semantic Elements
Definition
Meaningful structure: header, nav, main, section, article, aside, footer, figure, figcaption.
Example
<article>
<header><h2>News</h2></header>
<p>Story…</p>
<footer>Author • Date</footer>
</article>
17) Forms — Basics
Definition
Collect user input.
Example
<form action="/subscribe" method="post">
<label>Name <input name="name" required></label>
<label>Email <input type="email" name="email" required></label>
<button type="submit">Subscribe</button>
</form>
18) Input Types
Common Types
text, email, password, number, url, tel, date, time, color, range, file, checkbox, radio, hidden, search
Example
<input type="number" min="0" max="10" step="1">
<input type="checkbox" name="agree"> I agree
<input type="radio" name="plan" value="free"> Free
19) Select, Textarea, Datalist
Example
<select name="country">
<option>India</option><option>USA</option>
</select>
<textarea rows="4" cols="30">Your message…</textarea>
<input list="langs" name="lang">
<datalist id="langs">
<option value="HTML"><option value="CSS"><option value="JS">
</datalist>
20) Form Attributes & Validation
Useful
action, method, enctype, autocomplete, novalidate
Validation
required, min, max, minlength, maxlength, pattern
Example
<input type="text" required minlength="3" pattern="[A-Za-z ]+">
21) Buttons
Types
type="submit" | "button" | "reset"
Example
<button type="submit">Send</button>
<button type="reset">Clear</button>
<button type="button" onclick="alert('Hi')">Click</button>
22) File Paths (absolute vs relative)
Example
<!-- Absolute -->
<img src="https://cdn.example.com/logo.png" alt="Logo">
<!-- Relative -->
<img src="/assets/logo.png" alt="Logo">
<img src="images/logo.png" alt="Logo">
23) Iframe
Definition
Embed another page.
Example
<iframe src="https://www.example.com" width="600" height="300" loading="lazy" title="Example"></iframe>
24) Audio
Example
<audio controls>
<source src="song.mp3" type="audio/mpeg">
Your browser does not support audio.
</audio>
25) Video
Example
<video controls width="480" poster="thumb.jpg">
<source src="clip.mp4" type="video/mp4">
Sorry, your browser can’t play this video.
</video>
26) YouTube Embed
Example
<iframe width="560" height="315"
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
title="YouTube video" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
27) Head Element Essentials
Definition
<head> holds metadata: meta, title, link, script.
Example
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Learn HTML basics.">
<link rel="icon" href="/favicon.ico">
<link rel="stylesheet" href="/styles.css">
<title>HTML Guide</title>
</head>
28) Meta Tags
Useful Meta
charset(encoding)viewport(mobile scaling)description(SEO snippet)robots(indexing)theme-color(PWA chrome)
Example
<meta name="robots" content="index,follow">
<meta name="theme-color" content="#0ea5e9">
29) Favicon
Example
<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
30) Inline CSS (quick styling)
Example
<p style="color:#2563eb; font-weight:600;">Styled text</p>
Note
Prefer external CSS for real projects.
31) Class & ID
Definition
class= reusable style/JS hookid= unique identifier
Example
<p id="hero" class="lead">Welcome</p>
<a href="#hero">Go to top</a>
32) Entities & Symbols
Definition
Reserved characters & symbols.
Example
<div> & © ® ™ ₹
33) Emojis
Example
<p>HTML is fun 😎🔥</p>
Tip
Use UTF-8: <meta charset="utf-8">.
34) Images: Responsive & Figure
Example
<figure>
<img src="img.jpg" alt="Sunset" style="max-width:100%; height:auto;">
<figcaption>Sunset at the beach</figcaption>
</figure>
35) Accessibility Basics
Definition
Make content usable for everyone.
Practices
- Proper headings order.
alttext for images.- Labels for inputs.
- Sufficient color contrast.
- Landmarks (
main,nav,footer). - Keyboard focus indicators.
Example (labels)
<label for="email">Email</label>
<input id="email" type="email" required>
36) SEO Basics for HTML
Checklist
- One
<h1>+ descriptive title. - Unique meta description.
- Semantic structure.
- Descriptive link text.
- Image
alt.
Example
<title>HTML Tables Explained (Beginner Guide)</title>
<meta name="description" content="Learn HTML tables with headers, rows, and accessibility tips for beginners.">
37) Data Attributes data-*
Definition
Custom data on elements.
Example
<button data-plan="pro" onclick="alert(this.dataset.plan)">Choose</button>
38) Download Links
Example
<a href="/files/guide.pdf" download>Download Guide (PDF)</a>
39) Lazy Loading
Example
<img src="photo.jpg" alt="Photo" loading="lazy">
<iframe src="map.html" loading="lazy" title="Map"></iframe>
40) HTML5 APIs (overview)
Common
- Geolocation (with JS)
- Web Storage (
localStorage,sessionStorage) - Canvas (draw via JS)
- Audio/Video (media controls)
- Drag & Drop
Example (Storage)
<button onclick="localStorage.setItem('name','Shivam')">Save</button>
<button onclick="alert(localStorage.getItem('name'))">Read</button>
41) Canvas (intro)
Example
<canvas id="c" width="200" height="100"></canvas>
<script>
const ctx = document.getElementById('c').getContext('2d');
ctx.fillStyle = '#2563eb';
ctx.fillRect(20, 20, 160, 60);
</script>
42) SVG (inline)
Example
43) Open Graph & Social Meta
Example
<meta property="og:title" content="HTML Guide">
<meta property="og:description" content="Beginner-friendly HTML documentation">
<meta property="og:type" content="article">
<meta property="og:image" content="https://www.postwires.com/og-image.jpg">
44) Fav Tips (Performance)
Checklist
- Minify CSS/JS.
- Use
loading="lazy". - Compress images (WebP).
- Preload critical fonts.
- Keep DOM simple.
About the Author
