📄 Lesson 3: Text Elements
Headings
HTML provides six heading levels for organizing content. Use them hierarchically - h1 for main title, h2 for sections, h3 for subsections, etc.
<h1>Page Title</h1>
<h2>Section Title</h2>
<h3>Subsection</h3>
<h4>Minor Heading</h4>
<h5>Even Smaller</h5>
<h6>Smallest Heading</h6>
This is H1
This is H2
This is H3
This is H4
This is H5
This is H6
Paragraphs
The <p> tag is used for blocks of text. Always use proper paragraphs instead of line breaks for document structure.
<p>This is the first paragraph of text. It contains multiple sentences.</p>
<p>This is a second paragraph. Each paragraph is a separate block.</p>
This is the first paragraph of text. It contains multiple sentences about the topic.
This is a second paragraph. Each paragraph is a separate block with space between them.
Line Breaks and Horizontal Rules
Use <br> for line breaks (single new lines) and <hr> for horizontal dividers:
<p>Line one<br>Line two</p>
<hr>
<p>Content after divider</p>
Line one
Line two
Content after divider
Text Formatting
<strong> and <b> - Bold text
<strong>Important text</strong> (semantic - use this)
<em> and <i> - Italic text
<em>Emphasized text</em> (semantic - use this)
<mark> - Highlighted text
<mark>Important highlight</mark>
<del> - Deleted text
<del>Removed content</del>
<ins> - Inserted text
<ins>Added content</ins>
This has bold text and italic text.
This has highlighted text and deleted text.
This has inserted text showing new content.
Superscript and Subscript
For mathematical notation or special text positioning:
<p>E=mc<sup>2</sup></p>
<p>H<sub>2</sub>O</p>
Code and Preformatted Text
For displaying code snippets or preserving spacing:
<p>Use the <code>console.log()</code> function in JavaScript.</p>
<pre><code>
function hello() {
console.log("Hello, world!");
}
</code></pre>
Abbreviations
Use the <abbr> tag to define abbreviations with full text on hover:
<p>The <abbr title="Hyper Text Markup Language">HTML</abbr> specification is maintained by the W3C.</p>
The HTML specification is maintained by the W3C.
Blockquotes
Use <blockquote> for quoted text:
<blockquote>
<p>The only way to do great work is to love what you do.</p>
<footer>— Steve Jobs</footer>
</blockquote>
The only way to do great work is to love what you do.
Key Takeaways
- Use h1-h6 hierarchically for document structure
- Use <p> for paragraphs, not <br> for spacing
- Use semantic tags (<strong>, <em>) not just visual ones (<b>, <i>)
- Use <mark>, <del>, <ins> for semantic text modifications
- Use <code>, <pre> for code snippets