HTML Notes – Chapter 2
Basic HTML Elements
1. Headings
HTML provides 6 levels of headings: <h1> to <h6>.
<h1> is the largest, <h6> is the smallest.
Used to structure content hierarchically.
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Small Heading</h3>
2. Paragraphs and Line Breaks
Paragraphs are defined with <p>. Line breaks with <br>.
<p>This is a paragraph.</p>
<p>This is another paragraph.<br>This line is broken.</p>
3. Text Formatting Tags
Tag Description Example
<b> Bold text <b>Important</b>
<i> Italic text <i>Note</i>
<u> Underlined text <u>Underlined</u>
<mark> Highlighted text <mark>Highlight</mark>
<small> Smaller text <small>Small note</small>
<strong> Strong importance (bold) <strong>Warning</strong>
<em> Emphasized text (italic) <em>Focus</em>
4. Comments in HTML
Comments help explain code but are not displayed in the browser. Syntax: <!-- comment here -->
<!-- This is a comment -->
<p>Visible text.</p>
5. Links (Hyperlinks)
Created using <a> tag with href attribute.
<a href="[Link] Google</a>
<a href="[Link]">About Us</a>
6. Images
Inserted with <img>. Attributes: src, alt, width, height.
<img src="[Link]" alt="Red Flower" width="200" height="150">
7. Lists
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol>
<li>Introduction</li>
<li>Basics</li>
<li>Advanced</li>
</ol>
<ul>
<li>Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
<li>Backend</li>
</ul>
8. Horizontal Rule
<h2>Section 1</h2>
<p>Content...</p>
<hr>
<h2>Section 2</h2>
9. Example for Classroom
<!DOCTYPE html>
<html>
<head>
<title>Chapter 2 Example</title>
</head>
<body>
<h1>Learning HTML Elements</h1>
<p>This is a paragraph with <b>bold</b> and <i>italic</i> text.</p>
<hr>
<h2>Useful Links</h2>
<a href="[Link] Wikipedia</a>
<hr>
<h2>Topics Covered</h2>
<ol>
<li>Headings</li>
<li>Paragraphs</li>
<li>Lists</li>
<li>Links</li>
<li>Images</li>
</ol>
</body>
</html>
10. Key Points for Teachers
- Demonstrate each element practically in class.
- Highlight difference between ordered and unordered lists.
- Stress the importance of alt attribute in images (for accessibility).
- Encourage students to use comments in their code.
