HTML Fundamentals Cheatsheet
Quick reference for all HTML concepts covered in Lecture 1.
HTML Document Skeleton
Every HTML page starts with this structure:
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Page Title</title>
7</head>
8<body>
9
10</body>
11</html>
Common HTML Elements
Anatomy of a Link
1<a href="https://nexusberry.com" target="_blank">Visit NexusBerry</a>
2 │ │ │ │
3 │ │ │ └── Link text (visible)
4 │ │ └── Opens in new tab
5 │ └── URL destination
6 └── Anchor element
Remember: Always include https:// for external links.
Anatomy of an Image
1<img src="https://picsum.photos/600/400" alt="A scenic mountain view">
2 │ │ │
3 │ │ └── Description (for accessibility)
4 │ └── Image source URL
5 └── Self-closing tag (no </img> needed)
Remember: alt is required for accessibility. Describe what the image shows.
Nesting Rules
HTML elements can contain other elements — this is called nesting.
1
2<ul>
3 <li>First item</li>
4 <li>Second item</li>
5</ul>
6
7
8<p>This is <strong>bold text</p></strong>
9
10
11<p>This is <strong>bold text</strong></p>
Rule: Tags must close in the reverse order they were opened (like stacking boxes).
Heading Hierarchy
Use headings in order — never skip levels:
1
2<h1>Page Title</h1>
3 <h2>Section</h2>
4 <h3>Subsection</h3>
5 <h2>Another Section</h2>
6
7
8<h1>Page Title</h1>
9 <h3>Subsection</h3>
Guidelines:
- One
<h1> per page - Don't skip levels (h1 → h3)
- Don't choose heading levels for font size — use CSS for that
Common Mistakes to Avoid
1. Missing Closing Tags
1
2<p>First paragraph
3<p>Second paragraph
4
5
6<p>First paragraph</p>
7<p>Second paragraph</p>
2. Forgetting alt on Images
1
2<img src="photo.jpg">
3
4
5<img src="photo.jpg" alt="Team photo at the NexusBerry office">
3. Missing Protocol in Links
1
2<a href="nexusberry.com">Visit</a>
3
4
5<a href="https://nexusberry.com">Visit</a>
4. Putting Content in <head>
1
2<head>
3 <p>Welcome to my site</p>
4</head>
5
6
7<body>
8 <p>Welcome to my site</p>
9</body>
VS Code Shortcuts
Chrome DevTools Basics
Tip: Changes in DevTools are temporary — refresh the page to reset.
Quick Reference Table
HTML Entities (Special Characters)
What's Next?
In Lecture 2: Semantic HTML & Accessibility, you'll learn:
- Semantic elements (
<header>, <nav>, <main>, <footer>, <article>, <section>) - Why semantic HTML matters for SEO and accessibility
- ARIA basics and screen reader testing
- Building a Professional Portfolio Resume
Keep this cheatsheet handy while working on your assignment!
