HTML Basic का मतलब है HTML के वे core concepts जिन्हें समझे बिना आगे का कोई भी HTML topic clear नहीं हो सकता।
इस chapter में आप HTML document structure, basic tags, elements, attributes और browser rendering को practical examples के साथ सीखेंगे।
Basic HTML Document Structure
हर HTML page एक fixed structure follow करता है।
Basic HTML Example
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to HTML</h1>
<p>This is my first HTML page.</p>
</body>
</html>HTML Document के Main Parts
1. <!DOCTYPE html>
- Browser को बताता है कि यह document HTML5 में लिखा गया है
- यह HTML tag नहीं है, बल्कि declaration है
- हमेशा document की पहली line में होता है
2. <html> Tag
- HTML document का root element
- पूरा HTML code इसके अंदर लिखा जाता है
Example:
<html>
...
</html>3. <head> Section
<head> section में page की meta information होती है।
यह information user को direct दिखाई नहीं देती।
Common head elements:
<title><meta><link><style>
4. <title> Tag
- Browser tab में दिखाई देने वाला title
- SEO के लिए बहुत important
Example:
<title>HTML Basic Tutorial</title>5. <body> Section
<body> में वह content लिखा जाता है जो user को screen पर दिखाई देता है।
जैसे:
- Text
- Images
- Links
- Buttons
- Forms
HTML Headings
HTML में headings <h1> से <h6> तक होती हैं।
Example:
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Section Heading</h3>Important Points:
<h1>सबसे important heading होती है- SEO के लिए
<h1>का सही use जरूरी है - Headings hierarchy follow करनी चाहिए
HTML Paragraph
Paragraph लिखने के लिए <p> tag का उपयोग किया जाता है।
Example:
<p>This is a paragraph.</p>Browser automatically paragraph के पहले और बाद space देता है।
HTML Line Break
Line break के लिए <br> tag का use किया जाता है।
Example:
<p>Hello<br>World</p><br> एक empty tag है, इसका closing tag नहीं होता।
HTML Links
Links बनाने के लिए <a> tag का use होता है।
Example:
<a href="https://example.com">Visit Website</a>href Attribute
hrefका मतलब है Hyperlink Reference- यह destination URL define करता है
HTML Images
Image add करने के लिए <img> tag का use किया जाता है।
Example:
<img src="image.jpg" alt="Sample Image">Important Image Attributes:
src– image pathalt– alternate text (SEO + accessibility)
HTML Attributes
Attributes elements को extra information देते हैं।
Format:
<tag attribute="value">Example:
<p class="text">Paragraph</p>HTML Empty Elements
कुछ HTML elements के पास content नहीं होता।
Example:
<br><hr><img>
ये elements self-closing होते हैं।
HTML View Source
किसी भी website का HTML देखने के लिए:
- Right click → View Page Source
- या Ctrl + U
इससे आप real websites का HTML structure समझ सकते हैं।
HTML Comments
Comments code explanation के लिए होते हैं और browser में दिखाई नहीं देते।
Example:
<!-- This is a comment -->Common Beginner Mistakes
- HTML file को
.txtमें save करना - Closing tag भूल जाना
- Incorrect nesting of tags
- Multiple
<h1>का गलत use
Quick Summary
- HTML document का fixed structure होता है
<html>,<head>,<body>basic tags हैं- Headings, paragraph, link और image core elements हैं
- Attributes extra information देते हैं
Practice Questions
<!DOCTYPE html>का क्या काम है?<head>और<body>में difference क्या है?<img>tag मेंaltattribute क्यों जरूरी है?