BUILDING BLOCKS OF HTML

एक HTML document कुछ basic building blocks से मिलकर बना होता है। HTML के मुख्य building blocks निम्नलिखित हैं:

1. HTML Tags
2. Attributes
3. Elements

1. HTML Tags

HTML Tag एक ऐसा keyword या markup होता है जो angular brackets < > के अंदर लिखा जाता है।

HTML tags का उपयोग webpage के अलग-अलग content और structure को define करने के लिए किया जाता है।

HTML Tags की मुख्य बातें

• HTML tags angular brackets < > के अंदर लिखे जाते हैं।
• सामान्यतः HTML tags pair में आते हैं।
• किसी pair में पहला tag Start Tag और दूसरा End Tag कहलाता है।
• End Tag में tag name से पहले forward slash / लगाया जाता है।

Example

<html>
</html>

यहाँ:

• <html> → Start Tag
• </html> → End Tag

इसी प्रकार:

<head>
</head>

<h1>
</h1>

<body>
</body>

Start Tag

किसी HTML element को शुरू करने वाले tag को Start Tag कहा जाता है।

Example:

<p>

End Tag

किसी HTML element को समाप्त करने वाले tag को End Tag कहा जाता है।

End Tag में tag name से पहले forward slash / लगाया जाता है।

Example:

</p>

Example

<p>Hello World</p>

यहाँ:

• <p> → Start Tag
• Hello World → Content
• </p> → End Tag

Note: सभी HTML elements में End Tag नहीं होता। कुछ elements Empty Elements होते हैं, जैसे <br>, <hr> और <img>।

2. Attribute

Attribute किसी HTML element के बारे में additional information provide करता है।

Attribute को सामान्यतः Start Tag के अंदर लिखा जाता है।

एक HTML attribute में मुख्य रूप से दो parts होते हैं:

1. Attribute Name
2. Attribute Value

Common Attribute Examples

कुछ पुराने HTML examples में निम्न attributes देखने को मिलते हैं:

• bgcolor
• text
• align
• width
• height

Syntax

<tag_name attribute_name="attribute_value">Content</tag_name>

Example

<body bgcolor="red">
</body>

यहाँ:

• body → Tag Name
• bgcolor → Attribute Name
• "red" → Attribute Value

Note: Modern HTML में presentation के लिए bgcolor, text आदि पुराने/deprecated attributes माने जाते हैं। इनके स्थान पर सामान्यतः CSS का उपयोग किया जाता है।

Complete HTML Example

नीचे एक simple HTML document का example दिया गया है:

<html>

<head>
    <title>The Basic Building Blocks of HTML</title>
</head>

<body bgcolor="red">

    <h2>The Building Blocks</h2>

    <p>This is a paragraph tag</p>

</body>

</html>

इस Example में:

• <html> → पूरे HTML document का main element
• <head> → document की information रखने के लिए
• <title> → webpage का title define करता है
• <body> → webpage का visible content रखता है
• <h2> → heading define करता है
• <p> → paragraph define करता है
• bgcolor="red" → body का background color define करता है

WHAT IS ELEMENT?

Element HTML की complete structure होती है, जिसमें Start Tag, Content और End Tag शामिल होते हैं।

Formula

Element = Start Tag + Content + End Tag

Example

<p>Hello World</p>

इस example में पूरा:

<p>Hello World</p>

एक Element है।

यहाँ:

• <p> → Start Tag
• Hello World → Content
• </p> → End Tag

इसलिए:

Element = <p> + Hello World + </p>

TYPES OF ELEMENTS

HTML Elements मुख्य रूप से दो प्रकार के होते हैं:

1. Container Element
2. Empty Element

1. Container Elements

जिन HTML elements में:

• Start Tag होता है
• Content होता है
• End Tag होता है

उन्हें Container Elements कहा जाता है।

Example

<p>Hello World</p>

यहाँ:

• <p> → Start Tag
• Hello World → Content
• </p> → End Tag

इसलिए <p> एक Container Element का example है।

अन्य Examples

<h1>My Heading</h1>

<p>My Paragraph</p>

<div>My Content</div>

इन सभी में Start Tag + Content + End Tag मौजूद हैं।

2. Empty Elements

जिन HTML elements में सामान्यतः Content और End Tag नहीं होता, उन्हें Empty Elements कहा जाता है।

इनका उपयोग किसी specific purpose के लिए किया जाता है।

Examples

<br>

<br> का उपयोग line break देने के लिए किया जाता है।

<hr>

<hr> का उपयोग horizontal line create करने के लिए किया जाता है।

<img src="photo.jpg">

<img> का उपयोग webpage में image display करने के लिए किया जाता है।

Common Empty Elements

Note: HTML में Empty Elements को closing tag की आवश्यकता नहीं होती।