HTML Elements
Element = Opening tag + Content + Closing tag
<p>This is an element</p>
<p>This is an element</p>
Live Example:
This is a paragraph element with content
↑ This is an actual HTML paragraph elementHTML Attributes
Provide additional information about elements
<a href="https://example.com">Click Here</a>
Live Example:
Click Here (opens example.com) ↑ The 'href' is an attribute that provides the destination URL
Click Here (opens example.com) ↑ The 'href' is an attribute that provides the destination URL
Headings (h1 to h6)
<h1>Most Important</h1>
<h6>Least Important</h6>
<h6>Least Important</h6>
💡 Tip: Do not use headings to make text bold — use CSS instead.
Heading Level 1
This is h1
Heading Level 2
This is h2
Heading Level 3
This is h3
Heading Level 4
This is h4
Heading Level 5
This is h5
Heading Level 6
This is h6
Paragraph & Anchor Tags
<p>This is a paragraph</p>
<a href="https://...">Visit Site</a>
<a href="https://...">Visit Site</a>
This is a sample paragraph showing how paragraphs work in HTML. They create blocks of text with automatic spacing.
Click here to see an anchor tag in action (this link stays on the page).
Image Tag
<img src="image.jpg" alt="description">
Image Example (placeholder):
↑ Image with src and alt attributes
Text Formatting Tags
| Tag | Example | Result |
|---|---|---|
| <b> | <b>Bold</b> |
Bold text |
| <i> | <i>Italic</i> |
Italic text |
| <u> | <u>Underline</u> |
Underlined text |
| <big> | <big>Big</big> |
Big text |
| <small> | <small>Small</small> |
Small text |
| <sub> | H<sub>2</sub>O |
H2O (water formula) |
| <sup> | x<sup>2</sup> |
x2 (x squared) |
Combined formatting example:
Bold, italic, underlined, big, small, H2O and x2 all in one sentence!
Line Break & Horizontal Rule
<br> <!--this will give a line break-->
<hr> <!--this will give a horizontal line-->
<hr> <!--this will give a horizontal line-->
This is line one.
This is line two after a line break.
Above this is a horizontal rule:
Below this is a horizontal rule.
PRE Tag (Preformatted Text)
Preserves spaces and new lines as written
<pre>
This is
pre-formatted
</pre>
This is
pre-formatted
</pre>
This is
pre-formatted
text with
preserved spacing
and line breaks
📝 Note: Unlike normal HTML, the PRE tag respects every space and newline exactly
as typed in the code.
📋 Quick Reference Summary
Elements
- ✓ <p>Paragraph</p>
- ✓ <h1> to <h6>
- ✓ <a>Anchor</a>
- ✓ <img> (self-closing)
Formatting
- ✓ <b>Bold</b>
- ✓ <i>Italic</i>
- ✓ <u>Underline</u>
- ✓ <sub> & <sup>
Special
- ✓ <br> (line break)
- ✓ <hr> (horizontal rule)
- ✓ <pre>Pre</pre>