Understanding HTML Elements
HTML elements are defined by tags. Most elements have an opening tag, content, and a closing tag. Elements are the building blocks that structure your webpage.
💻 Basic Elements
<!-- Headings (h1 to h6) -->
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
<!-- Paragraphs -->
<p>This is a paragraph of text.</p>
<p>Another paragraph here.</p>
<!-- Line breaks -->
<p>First line<br>Second line</p>
<!-- Horizontal rule -->
<hr>
<!-- Div and Span -->
<div>Block-level container</div>
<span>Inline container</span>🔧 Block vs Inline Elements
<!-- Block Elements (take full width) -->
<div>Division</div>
<p>Paragraph</p>
<h1>Heading</h1>
<ul>Unordered List</ul>
<section>Section</section>
<article>Article</article>
<!-- Inline Elements (take only needed width) -->
<span>Span text</span>
<a href="#">Link</a>
<strong>Bold text</strong>
<em>Italic text</em>
<code>Code</code>
<img src="image.jpg" alt="Image">🎯 Self-Closing Elements
<!-- Elements that don't need closing tags -->
<!-- Line break -->
<br>
<!-- Horizontal rule -->
<hr>
<!-- Image -->
<img src="photo.jpg" alt="Description">
<!-- Input fields -->
<input type="text" placeholder="Enter text">
<input type="email" placeholder="Email">
<!-- Meta tags -->
<meta charset="UTF-8">
<meta name="description" content="Page description">
<!-- Link to external resources -->
<link rel="stylesheet" href="styles.css">🎯 Key Takeaways
- Block elements: Take full width, start on new line (div, p, h1-h6)
- Inline elements: Take only necessary width (span, a, strong, em)
- Self-closing: No closing tag needed (br, hr, img, input)
- Nesting: Elements can contain other elements
- Semantic meaning: Use appropriate tags for content type
- Hierarchy: h1 is most important, h6 is least important