1. Text Elements & Headings
HTML provides tags to structure your text content.
Headings (<h1>
to <h6>
)
-
Define section titles just like chapter headings in a book.
-
<h1>
is most important (main title),<h6>
is least important
sample code
<h1>Main Title</h1> <h2>Subheading</h2> <h3>Smaller Section</h3>
Paragraphs & Line Breaks
-
<p>
for paragraphs (adds space before/after) -
<br>
for line breaks (no extra space) -
<hr>
for horizontal rule (a dividing line)
Sample code.
<p>This is a paragraph.</p> <p>Another paragraph<br>with a line break.</p> <hr>
2. Text Formatting Tags
Make your text more expressive with these tags:
Basic Formatting
Tag |
Purpose |
Example |
---|---|---|
|
Important text (bold) |
|
|
Emphasized text (italic) |
|
|
Highlighted text |
|
|
Smaller text |
|
|
Deleted text |
|
|
Inserted text |
|
sample code.
<p><strong>Important:</strong> <em>Complete</em> the form.</p> <p>Price: <del>$99</del> <ins>$79</ins></p>
3. Lists in HTML
Organize information with different list types such as ordered lists, unordered lists.
Unordered List (<ul>
)
-
Bullet-point list (no specific order)
sample code:
<ul> <li>Milk</li> <li>Eggs</li> <li>Bread</li> </ul>
Ordered List (<ol>
)
-
Numbered list (for steps/rankings)
sample code.
<ol> <li>Preheat oven</li> <li>Mix ingredients</li> <li>Bake for 30 minutes</li> </ol>
Description List (<dl>
)
-
Name-value pairs (like a dictionary)
sample code:
<dl> <dt>HTML</dt> <dd>HyperText Markup Language</dd> <dt>CSS</dt> <dd>Cascading Style Sheets</dd> </dl>