HTML Basic
HTML किसी भी वेबसाइट का ढांचा (Structure) बनाता है। यह web page को बताता है कि कौन-सा content कहाँ और कैसे दिखाना है। उदाहरण के लिए — अगर वेबसाइट एक शरीर है, तो HTML उसकी हड्डियाँ (Bones) है, CSS उसकी Skin है, और JavaScript उसका Brain।
2. HTML Document की बेसिक संरचना हर HTML पेज की एक fix structure होती है। इस structure को हम HTML Boilerplate कहते हैं। Example:
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to HTML Basics!</h1>
<p>This is my first paragraph in HTML.</p>
</body>
</html>इसका मतलब समझिए:
| Code Part | Explanation |
|---|---|
| <!DOCTYPE html> | यह बताता है कि document HTML5 version में लिखा गया है। |
| <html> | यह पूरी HTML file का root element होता है। |
| <head> | इसमें page की background जानकारी होती है (title, meta data आदि)। |
| <title> | यह browser tab में दिखने वाला page का नाम होता है। |
| <body> | यहाँ वो content होता है जो user को web page पर दिखता है। |
3. HTML Tags और Elements क्या हैं? HTML में हर चीज़ Tag के रूप में लिखी जाती है। Tag हमेशा Angle Brackets < > में लिखा जाता है।
Example:
<p>This is a paragraph.</p><p>→ Opening tag</p>→ Closing tagThis is a paragraph.→ Content
Tag + Content + Closing Tag = HTML Element
4. Commonly Used HTML Tags
| Tag | Description | Example |
|---|---|---|
<h1> से <h6> | Headings (बड़े से छोटे तक) | <h1>Hello</h1> |
<p> | Paragraph | <p>This is text</p> |
<br> | Line Break | Line1<br>Line2 |
<hr> | Horizontal Line | <hr> |
<b> | Bold Text | <b>Important</b> |
<i> | Italic Text | <i>Stylish</i> |
<u> | Underlined Text | <u>Note</u> |
<a> | Hyperlink | <a href="https://example.com">Visit</a> |
<img> | Image | <img src="photo.jpg" alt="My Photo"> |
<ul>, <ol>, <li> | Lists | <ul><li>Item</li></ul> |
<table> | Tables | <table><tr><td>Data</td></tr></table> |
5. HTML में Comments कैसे लिखते हैं?
Comments वे लाइनें होती हैं जो browser को दिखती नहीं, सिर्फ developer के reference के लिए होती हैं।
<!-- यह एक comment है -->
<p>Hello World!</p>Comments का use code को explain करने के लिए किया जाता है।
6. HTML में Text कैसे लिखा जाता है?
Example 1: Headings
<h1>यह सबसे बड़ा heading है</h1>
<h2>यह थोड़ा छोटा है</h2>
<h3>और छोटा</h3>
<h4>छोटा</h4>
<h5>और छोटा</h5>
<h6>सबसे छोटा</h6>Example 2: Paragraphs
<p>यह मेरा पहला paragraph है।</p>
<p>यह दूसरा paragraph है जिसमें थोड़ा और content है।</p>Example 3: Line Break & Horizontal Line
<p>Hello<br>World!</p>
<hr>🔹 7. HTML में Links जोड़ना (Hyperlinks)
<a href="https://codekeet.com">Visit CodeKeet</a>href = “Hyperlink Reference” (यानि link का address) आप चाहे तो link को नए tab में खोलने के लिए ये attribute जोड़ सकते हैं:
<a href="https://codekeet.com" target="_blank">Open in New Tab</a>8. HTML में Images जोड़ना
<img src="photo.jpg" alt="My Photo" width="300" height="200">| Attribute | काम |
|---|---|
src | Image का path |
alt | जब image load न हो तो text दिखाना |
width | Image की चौड़ाई |
height | Image की ऊँचाई |
Pro Tip: हमेशा alt text देना ज़रूरी है ताकि SEO और accessibility दोनों अच्छे रहें।
9. HTML में Text Formatting
| Tag | काम | Example |
|---|---|---|
<b> | Bold | <b>Important</b> |
<i> | Italic | <i>Italic text</i> |
<u> | Underline | <u>Note</u> |
<strong> | Strong importance | <strong>Warning!</strong> |
<em> | Emphasized text | <em>Focus here</em> |
<mark> | Highlight text | <mark>Important</mark> |
<small> | Small text | <small>Note</small> |
<del> | Deleted text | <del>Old Price</del> |
<ins> | Inserted text | <ins>New Price</ins> |
10. HTML Attributes क्या हैं?
Attributes किसी tag को extra जानकारी देते हैं। यह हमेशा opening tag में लिखे जाते हैं।
Example:
<p align="center">यह text center में है</p>
<a href="https://youtube.com" target="_blank">YouTube</a>
<img src="image.jpg" alt="Nature" width="400">| Attribute | Description |
|---|---|
href | Link का address |
src | Image का path |
alt | Image का alternate text |
width, height | Size control |
align | Alignment (left, center, right) |
title | Hover पर tooltip दिखाना |
11. HTML में Lists (सूचियाँ)
Unordered List (Bullets)
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>Ordered List (Numbers)
<ol>
<li>Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
</ol>Nested List
<ul>
<li>Frontend <ul>
<li>HTML</li>
<li>CSS</li>
</ul> </li>
<li>Backend</li>
</ul>12. HTML में Tables
<table border="1">
<tr>
<th>Name</th>
<th>Subject</th>
</tr>
<tr>
<td>Ravi</td>
<td>HTML</td>
</tr>
<tr>
<td>Meena</td>
<td>CSS</td>
</tr>
</table>यहाँ <th> = Table Header, <td> = Table Data, <tr> = Table Row
13. HTML Boilerplate Shortcut (VS Code में)
अगर आप VS Code इस्तेमाल कर रहे हैं, तो सिर्फ ! टाइप करके Enter दबाइए — पूरा HTML Boilerplate अपने आप बन जाएगा।
14. HTML Output कैसे देखें?
-
File को
.htmlextension से save करें (जैसेindex.html) -
Browser में open करें (Chrome, Edge, Firefox)
-
Output तुरंत दिख जाएगा!
15. Practice Section
आप नीचे दिए गए उदाहरणों को खुद टाइप करके देखें:
Example 1:
<!DOCTYPE html>
<html>
<head>
<title>Practice HTML</title>
</head>
<body>
<h2>My First Practice Page</h2>
<p>HTML सीखना आसान है!</p>
<hr>
<p><b>Bold</b>, <i>Italic</i>, और <u>Underline</u> Example</p>
</body>
</html>Example 2:
<!DOCTYPE html>
<html>
<head>
<title>HTML Example 2</title>
</head>
<body>
<h1>My Favorite Websites</h1>
<ul>
<li><a href="https://google.com" target="_blank">Google</a></li>
<li><a href="https://youtube.com" target="_blank">YouTube</a></li>
<li><a href="https://w3schools.com" target="_blank">W3Schools</a></li>
</ul>
</body>
</html>16. Quick Summary (संक्षेप में)
| Concept | Description |
|---|---|
| Tag | HTML का Building Block |
| Element | Opening + Content + Closing |
| Attribute | Tag की extra जानकारी |
| Head | Hidden Info |
| Body | Visible Content |
| Comment | Code Explanation |
| Save Extension | .html |
| Run करने का तरीका | Browser में file open करें |
Bonus Tip:
“HTML को सिर्फ पढ़ो मत, लिखो — हर दिन 10 मिनट practice करो।”
Code जितना खुद लिखोगे, उतनी जल्दी याद रहेगा।