📝 Chapter Roadmap
1 HTML Headings
Headings are used to create titles and subtitles on your webpage. HTML provides exactly 6 levels of headings, ranging from <h1> (the largest and most important) down to <h6> (the smallest).
🚀 SEO Pro Tip: Search engines (like Google) use headings to understand your page. You should always have only ONE <h1> tag per page representing the main topic!
Heading 1 (<h1>) - Main Title
Heading 2 (<h2>) - Sub Title
Heading 3 (<h3>) - Section Title
Heading 4 (<h4>)
Heading 5 (<h5>)
Heading 6 (<h6>) - Smallest
2 Paragraphs & Whitespace
To write normal blocks of text, we use the Paragraph tag: <p>.
The "Whitespace" Rule
HTML does not care how many spaces or "Enters" (new lines) you press in your code. If you press space 10 times, the browser will ignore it and only show 1 single space. This is called "Whitespace Collapsing".
3 Line Breaks & Horizontal Rules
Since HTML ignores the "Enter" key, how do we force text onto a new line? We use the Line Break <br> tag! Both <br> and <hr> are Void Elements (they have no closing tag).
This is line two (forced to the next line).
4 Text Formatting Tags
Sometimes you want to emphasize specific words by making them bold, italic, or underlined. HTML provides special formatting tags for this.
| HTML Tag | What it does | Visual Output |
|---|---|---|
| <b> & <strong> |
Makes text Bold. Note: <strong> is better for SEO because it indicates importance. |
Bold |
| <i> & <em> |
Makes text Italic (slanted). Note: <em> stands for "Emphasized" and is better for screen readers. |
Italic |
| <u> & <ins> |
Places a line underneath the text. (<ins> means inserted text). | Underline |
| <sup> | Superscript: Pushes the text up, like a math power (e.g., x squared). | x2 |
| <sub> | Subscript: Pushes the text down, like a chemical formula. | H2O |
| <mark> | Highlights the text with a background color (usually yellow). | Highlighted |