HTML Element web page का basic building block होता है।
HTML element browser को यह बताता है कि किसी content को कैसे और कहाँ display करना है।
एक complete HTML element में आमतौर पर तीन parts होते हैं:
- Opening tag
- Content
- Closing tag
Example:
<p>This is a paragraph</p>HTML Element का Structure
<tagname>Content</tagname>Example:
<h1>HTML Elements</h1>यहाँ:
<h1>opening tag है</h1>closing tag है- बीच का text content है
Types of HTML Elements
HTML elements को अलग-अलग category में divide किया जाता है।
1. Nested HTML Elements
जब एक element के अंदर दूसरा element होता है, तो उसे nested element कहते हैं।
Example:
<html>
<body>
<p>This is a paragraph</p>
</body>
</html>
Important Rule:
- Tags हमेशा properly nested होने चाहिए
- Incorrect nesting browser confusion पैदा करता है
Wrong Example:
<p><b>Text</p></b>Correct Example:
<p><b>Text</b></p>2. Empty HTML Elements
Empty elements के पास content नहीं होता और closing tag भी नहीं होता।
Common empty elements:
<br><hr><img><input>
Example:
<br>
<img src="photo.jpg" alt="Photo">3. Block-Level Elements
Block-level elements हमेशा new line से start होते हैं और पूरी width लेते हैं।
Common block-level elements:
<div><p><h1>to<h6><section><article><header><footer>
Example:
<p>This is a block element</p>
<p>This is another block</p>4. Inline Elements
Inline elements same line में रहते हैं और जितनी जरूरत हो उतनी ही space लेते हैं।
Common inline elements:
<span><a><img><strong><em>
Example:
<p>This is <strong>important</strong> text.</p>Block vs Inline Elements
| Feature | Block Element | Inline Element |
|---|---|---|
| New Line | Yes | No |
| Full Width | Yes | No |
| Nest Inline | Yes | Yes |
| Nest Block | Yes | No |
HTML Elements और Browser Behavior
Browser automatically decide करता है कि:
- कौन सा element line break देगा
- कौन सा element inline रहेगा
- default font size क्या होगा
HTML सिर्फ structure define करता है, design CSS से control होती है।
HTML Elements और Attributes
Elements attributes के साथ extra information ले सकते हैं।
Example:
<p class="text">Paragraph</p>यहाँ:
classattribute element को identify करता है- CSS और JavaScript में use होता है
Case Sensitivity in HTML Elements
HTML elements case sensitive नहीं होते।
Example:
<P>Text</P>
<p>Text</p>लेकिन best practice:
- Lowercase tags use करें
- Clean और readable code लिखें
HTML Elements और SEO
SEO-friendly HTML के लिए:
- Proper heading elements use करें
- Semantic elements का उपयोग करें
- Unnecessary
<div>avoid करें - Meaningful structure रखें
Search engines HTML elements के structure से content समझते हैं।
Common HTML Elements List
| Element | Description |
|---|---|
<html> | Root element |
<head> | Meta information |
<body> | Visible content |
<p> | Paragraph |
<a> | Link |
<img> | Image |
<div> | Container |
<span> | Inline container |
Common Beginner Mistakes
- Tags close करना भूल जाना
- Incorrect nesting
- Block और inline elements का misuse
- Extra
<br>का overuse
Quick Summary
- HTML elements webpage के building blocks हैं
- Elements opening और closing tags से बनते हैं
- Elements nested हो सकते हैं
- Block और inline elements अलग behavior रखते हैं
Practice Questions
- HTML element क्या होता है?
- Block और inline elements में difference क्या है?
- Empty element क्या होता है?