🔷 1. Introduction:
In every HTML document, some basic tags are always used.
These tags help define the overall structure of the webpage.
The most important base tags are <html>, <head>, <title>, and <body>.
They are the backbone of any web page.
🔷 2. Definition:
These tags define different sections of a webpage:
<html>: Root of the HTML document.<head>: Contains meta information, title, styles, etc.<title>: Sets the name shown in the browser tab.<body>: Contains the visible content of the page.
🔷 3. Syntax + Example (Code):
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Welcome to My Site</h1>
<p>This is a sample web page.</p>
</body>
</html>
🔷 4. Description of Each Tag:
✅ <html> Tag:
- Root element for the entire HTML document.
- All other tags are written inside this tag.
- Starts the page with
<html>and ends with</html>.
✅ <head> Tag:
- Not visible to the user.
- Contains title, meta info, scripts, links to CSS.
- Example:
<head>
<title>Example</title>
</head>
✅ <title> Tag:
- Used inside
<head>. - Shows the page name in browser tab.
- Example:
<title>My Blog</title>
✅ <body> Tag:
- Contains everything that appears on the webpage.
- Text, images, tables, videos, links – all go here.
- Example:
<body>
<h1>Hello</h1>
<p>This is my first page.</p>
</body>
🔷 5. Output (What will appear in browser):
- Title (on browser tab): My Website
- Heading: Welcome to My Site
- Paragraph: This is a sample web page.
🔷 6. Real Life Example:
When you open a school website, the name seen in the browser tab comes from <title>.
The content you read – like headings, text, and photos – comes from inside the <body> tag.
The internal info like keywords and styles is inside <head>.
🔷 7. Advantages:
- Gives proper structure to the HTML file
- Separates browser data and visible content
<title>helps in SEO (Google indexing)- Easy to edit and manage
- Every browser supports these tags
🔷 8. Limitations:
- Must be used in correct order
- Incorrect nesting can lead to display errors
- Alone these tags do not style the page (CSS required)
IN HINDI
HTML के मुख्य टैग्स – <html>, <head>, <title>, <body>
🔷 1. परिचय (Introduction):
हर HTML डॉक्युमेंट में कुछ बेसिक टैग्स का प्रयोग ज़रूरी होता है।
ये टैग्स HTML पेज की रचना (structure) को निर्धारित करते हैं।
मुख्य टैग्स हैं – <html>, <head>, <title>, और <body>।
ये किसी भी वेबपेज का ढांचा (framework) तय करते हैं।
🔷 2. परिभाषा (Definition):
HTML के ये टैग्स पेज के अलग-अलग हिस्सों को दर्शाते हैं:
<html>: पूरे HTML डॉक्युमेंट का मुख्य टैग<head>: छिपी हुई जानकारी (title, CSS, meta info आदि) रखने वाला भाग<title>: ब्राउज़र टैब में दिखने वाला नाम<body>: पेज पर दिखने वाला असली कंटेंट (जैसे टेक्स्ट, इमेज, वीडियो)
🔷 3. सिंटैक्स + उदाहरण (Syntax + Example):
<!DOCTYPE html>
<html>
<head>
<title>मेरी वेबसाइट</title>
</head>
<body>
<h1>मेरी साइट में आपका स्वागत है</h1>
<p>यह एक उदाहरण वेबपेज है।</p>
</body>
</html>
🔷 4. प्रत्येक टैग का विवरण (Each Tag Description):
✅ <html> टैग:
- HTML डॉक्युमेंट का मुख्य टैग होता है
- इसके अंदर ही सभी अन्य टैग्स लिखे जाते हैं
- शुरू होता है
<html>और बंद होता है</html>से
✅ <head> टैग:
- यह वेबपेज का छिपा हुआ हिस्सा होता है
- इसमें टाइटल, मेटा जानकारी, CSS लिंक, आदि होती है
- उदाहरण:
<head>
<title>उदाहरण</title>
</head>✅ <title> टैग:
<head>टैग के अंदर लिखा जाता है- ब्राउज़र टैब में दिखने वाले नाम को सेट करता है
- उदाहरण:
<title>मेरी ब्लॉग</title>✅ <body> टैग:
- इसमें वेबपेज पर दिखने वाला सारा कंटेंट होता है
- जैसे कि हैडिंग, पैराग्राफ, चित्र, लिंक आदि
- उदाहरण:
<body>
<h1>नमस्ते</h1>
<p>यह मेरा पहला वेबपेज है।</p>
</body>🔷 5. आउटपुट (Output):
यदि ऊपर दिया गया कोड ब्राउज़र में चलाया जाए, तो आपको दिखेगा:
- ब्राउज़र टैब में टाइटल: मेरी वेबसाइट
- पेज पर:
- हेडिंग: मेरी साइट में आपका स्वागत है
- पैरा: यह एक उदाहरण वेबपेज है।
🔷 6. वास्तविक जीवन उदाहरण (Real Life Example):
जब आप किसी स्कूल या सरकारी वेबसाइट को खोलते हैं, तो जो नाम ब्राउज़र टैब में आता है वह <title> से आता है।
जो कंटेंट आप पढ़ते हैं, जैसे कि टेक्स्ट और फोटो, वह <body> टैग के अंदर होता है।
वेबपेज का फॉर्मेट और स्टाइल <head> में सेट होता है।
🔷 7. लाभ (Advantages):
- HTML फाइल की स्पष्ट संरचना बनती है
- ब्राउज़र और यूज़र के लिए जानकारी अलग-अलग हिस्सों में होती है
<title>टैग SEO में मदद करता है- आसानी से एडिट और मैनेज किया जा सकता है
- सभी ब्राउज़र इन टैग्स को सपोर्ट करते हैं
🔷 8. सीमाएँ (Limitations):
- सही क्रम में उपयोग करना ज़रूरी है
- टैग्स को ठीक से नेस्ट (nest) नहीं किया गया तो पेज खराब दिखेगा
- ये टैग्स सिर्फ स्ट्रक्चर देते हैं, डिजाइन के लिए CSS की आवश्यकता होती है
