Previous Next

HTML Tags क्या हैं? – Basic HTML Tags in Hindi

HTML में webpage का structure बनाने के लिए HTML Tags का उपयोग किया जाता है। Tags browser को बताते हैं कि webpage के किसी particular content को किस प्रकार display या structure करना है। जैसे heading के लिए <h1>, paragraph के लिए <p> और link बनाने के लिए <a> tag का उपयोग किया जाता है।

HTML सीखने की शुरुआत basic tags से करना जरूरी है, क्योंकि आगे चलकर इन्हीं tags के साथ CSS और JavaScript का उपयोग करके complete webpages और web applications बनाए जाते हैं।

HTML Tag क्या होता है?

HTML Tag एक special markup instruction होता है जिसे angle brackets < > के अंदर लिखा जाता है। Tag browser को बताता है कि किसी content को webpage पर किस रूप में represent करना है।

उदाहरण के लिए:

<p>Hello World</p>

यहां <p> opening tag और </p> closing tag है। इनके बीच लिखा Hello World paragraph का content है।

Basic HTML Tags

1. <h1> से <h6> – Heading Tags

HTML में headings बनाने के लिए <h1> से <h6> तक heading tags उपलब्ध होते हैं। <h1> सबसे important और सबसे बड़ी heading level को represent करता है, जबकि <h6> सबसे lower heading level है।

Example:

<h1>My Website</h1>

<h2>About Us</h2>

Headings का उपयोग webpage के content को logical sections में organize करने के लिए किया जाता है।

2. <p> – Paragraph Tag

<p> tag का उपयोग text का paragraph बनाने के लिए किया जाता है। Articles, notes, descriptions और सामान्य text content लिखने में इसका बहुत अधिक उपयोग होता है।

Example:

<p>HTML एक markup language है।</p>

3. <br> – Line Break Tag

<br> tag का उपयोग text को अगली line में ले जाने के लिए किया जाता है। यह एक void element है, इसलिए इसका अलग closing tag नहीं होता।

Example:

Hello World<br>Welcome to HTML

इसका output दो अलग-अलग lines में दिखाई देगा।

4. <hr> – Horizontal Rule Tag

<hr> tag का उपयोग content के बीच एक thematic break या horizontal line दिखाने के लिए किया जाता है। इसका उपयोग किसी section या topic के बीच visual separation देने के लिए किया जा सकता है।

Example:

<hr>

5. <a> – Anchor Tag

<a> tag का उपयोग webpage पर hyperlink बनाने के लिए किया जाता है। इसके साथ href attribute का उपयोग करके उस webpage या URL का address दिया जाता है जहां user को जाना है।

Example:

<a href="https://example.com">Visit Website</a>

User जब Visit Website पर click करेगा, तो दिए गए URL पर जा सकता है।

6. <img> – Image Tag

<img> tag का उपयोग webpage में image दिखाने के लिए किया जाता है। इसमें सामान्यतः src attribute से image का path और alt attribute से alternative text दिया जाता है।

Example:

<img src="image.jpg" alt="HTML Image">

src browser को image का location बताता है, जबकि alt image के बारे में alternative text provide करता है।

7. <strong> – Important Text

<strong> tag का उपयोग ऐसे text को mark करने के लिए किया जाता है जिसे document में strong importance दी जा रही हो। Browser सामान्यतः इसे bold दिखाई देता है, लेकिन इसका मुख्य उद्देश्य केवल text को मोटा करना नहीं बल्कि semantic importance बताना है।

Example:

<strong>Important Information</strong>

8. <b> – Bold Text Tag

<b> tag का उपयोग text को visually bold दिखाने के लिए किया जाता है। यह अपने आप में text को semantic importance नहीं देता।

Example:

<b>HTML Tutorial</b>

9. <em> – Emphasized Text

<em> tag का उपयोग किसी text पर emphasis देने के लिए किया जाता है। Browser इसे सामान्यतः italic style में दिखाता है।

Example:

<em>This is important</em>

10. <i> – Italic Text Tag

<i> tag का उपयोग text को अलग style या italic appearance में दिखाने के लिए किया जा सकता है।

Example:

<i>HTML Basics</i>

11. <ul> – Unordered List

<ul> tag का उपयोग unordered list बनाने के लिए किया जाता है। इसके अंदर प्रत्येक list item के लिए <li> tag का उपयोग किया जाता है। Browser सामान्यतः items के आगे bullets दिखाता है।

Example:

<ul>

<li>HTML</li>

<li>CSS</li>

</ul>

12. <ol> – Ordered List

<ol> tag का उपयोग ordered list बनाने के लिए किया जाता है। इसमें list items सामान्यतः numbers के साथ दिखाई देते हैं। प्रत्येक item के लिए <li> tag का उपयोग किया जाता है।

Example:

<ol>

<li>HTML सीखें</li>

<li>CSS सीखें</li>

</ol>

13. <li> – List Item Tag

<li> tag का उपयोग list के अंदर एक individual item बनाने के लिए किया जाता है। इसका उपयोग सामान्यतः <ul> या <ol> के अंदर किया जाता है।

Example:

<li>JavaScript</li>

14. <div> – Division Tag

<div> एक generic container element है। इसका उपयोग webpage के अलग-अलग content को एक group या section में रखने के लिए किया जाता है। CSS के साथ इसका बहुत अधिक उपयोग किया जाता है।

Example:

<div>

<h2>About HTML</h2>

<p>HTML webpage का structure बनाता है।</p>

</div>

HTML Tags का उपयोग क्यों किया जाता है?

HTML tags webpage को एक proper structure देने में मदद करते हैं। बिना tags के browser के लिए यह समझना मुश्किल होगा कि कौन सा content heading है, कौन सा paragraph है, कौन सा link है और कौन सा image है।

उदाहरण के लिए यदि हमें किसी webpage पर एक heading और उसके नीचे paragraph दिखाना है, तो हम इस तरह HTML लिख सकते हैं:

<h1>HTML Tutorial</h1>

<p>यह HTML सीखने के लिए एक basic tutorial है।</p>

इससे browser को content का structure समझने में आसानी होती है।

HTML Tags और Attributes में अंतर

Tag webpage के element या structure को define करता है, जबकि Attribute उस element को additional information देता है।

उदाहरण:

<a href="https://example.com">Example</a>

इसमें <a> tag है और href attribute है।

सभी Basic Tags का Complete HTML Example

नीचे एक simple HTML webpage का example दिया गया है जिसमें ऊपर बताए गए कई basic HTML tags को एक साथ इस्तेमाल किया गया है:

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Basic HTML Tags</title>
</head>
<body>
    <h1>Welcome to HTML</h1>
    <p>
        HTML का उपयोग webpage का structure बनाने के लिए किया जाता है।
    </p>
    <h2>Basic HTML Tags</h2>
    <p>
        HTML में अलग-अलग tags का उपयोग content को structure करने के लिए किया जाता है।
    </p>
    <hr>
    <h2>Text Formatting</h2>
    <p>
        <strong>Important Text</strong><br>
        <b>Bold Text</b><br>
        <em>Emphasized Text</em><br>
        <i>Italic Text</i>
    </p>
    <h2>HTML Topics</h2>
    <ul>
        <li>HTML Tags</li>
        <li>HTML Elements</li>
        <li>HTML Attributes</li>
    </ul>
    <h2>Learning Steps</h2>
    <ol>
        <li>HTML सीखें</li>
        <li>CSS सीखें</li>
        <li>JavaScript सीखें</li>
    </ol>
    <h2>Image Example</h2>
    <img src="html-image.jpg" alt="HTML Example Image">
    <h2>Useful Link</h2>
    <p>
        <a href="https://example.com">
            Visit Example Website
        </a>
    </p>
    <div>
        <h2>About HTML</h2>
        <p>
            HTML एक markup language है जिसका उपयोग
            webpages का structure बनाने के लिए किया जाता है।
        </p>
    </div>
</body>
</html>

Example में इस्तेमाल किए गए Tags

Tag	उपयोग
<h1>, <h2>	Headings बनाने के लिए
<p>	Paragraph लिखने के लिए
<br>	Line break के लिए
<hr>	Thematic break या horizontal line के लिए
<a>	Hyperlink बनाने के लिए
<img>	Image दिखाने के लिए
<strong>	Important text को mark करने के लिए
<b>	Text को bold दिखाने के लिए
<em>	Text पर emphasis देने के लिए
<i>	Italic या अलग visual style के लिए
<ul>	Unordered list बनाने के लिए
<ol>	Ordered list बनाने के लिए
<li>	List item बनाने के लिए
<div>	Content को generic container में group करने के लिए

निष्कर्ष

HTML Tags webpage के structure और content को define करने का basic तरीका हैं। <h1>, <p>, <a>, <img>, <ul>, <ol> और <div> जैसे tags HTML सीखने वाले beginners के लिए बहुत important हैं।

इन basic tags की अच्छी understanding होने के बाद आप HTML में webpages बनाना शुरू कर सकते हैं और आगे CSS के माध्यम से उनके design तथा JavaScript के माध्यम से उनकी functionality को improve कर सकते हैं।

Previous Next

Code copied!

Page Views

Visit ID

Not tracked yet

Visit Time

Time on Page

0 seconds

Request

Full Name *

Email Address *

Mobile Number

Message *

INITIALIZING...