HTML & CSS · Quick Reference

Lesson 2 — HTML Elements & Text Cheat Sheet

HTML & CSS

In one line: HTML has six heading levels. They create a visual and semantic hierarchy — <h1> is the most important (main title, use once per page), <h6> is the least important. S...

Key Ideas

1Headings — h1 to h6. HTML has six heading levels. They create a visual and semantic hierarchy — <h1> is the most important (main title, use once per page), <h6> is the least im...

2Paragraphs & Text Formatting. The <p> tag wraps a paragraph of text. Browsers automatically add space above and below it. For inline text formatting, HTML provides several elements — each wit...

3Block vs Inline Elements. Every HTML element has a default display type. This determines how it sits on the page relative to other elements. There are two main types: block and inline.

4Semantic HTML5 Elements. Before HTML5, developers wrapped everything in <div> tags. HTML5 introduced semantic elements — tags whose names describe their purpose. They look the same as di...

5Special Characters & Entities. Some characters have special meaning in HTML (< > &) — if you type them directly, the browser might interpret them as code. Use HTML entities to display them...

Code Examples

<!-- h1: one per page — the main topic -->
<h1>Python Programming for Beginners</h1>

<!-- h2: major sections -->
<h2>Phase 1: The Basics</h2>

<!-- h3: subsections within an h2 section -->
<h3>Variable...

<!-- Paragraph -->
<p>This is a paragraph. Browsers add spacing above and below automatically.</p>

<!-- Semantic importance -->
<p>This word is <strong>very important</strong> — bold with meaning.</p>
&l...

<!-- div: generic block container -->
<div>I am block — I take the full width.</div>
<div>I start on a new line automatically.</div>

<!-- span: generic inline container -->
<p>
  This paragraph has a
  <s...