HTML Attributes Tutorial in Hindi | href, src, alt, style Attribute with Examples

HTML Introduction HTML Quotation Page no 1 HTML Links HTML Images HTML Tables HTML Lists You tube WhatsApp ID Attribute HTML Iframes HTML Forms

HTML Text Formatting Elements

HTML टेक्स्ट फॉर्मेटिंग एलिमेंट्स

HTML also defines special elements for defining text with a special meaning.HTML में कुछ special elements होते हैं जो text को अलग meaning और style देने के लिए use किए जाते हैं।

HTML uses elements like <b> and <i> for formatting output like bold or italic text.HTML में <b> और <i> जैसे elements text को bold या italic दिखाने के लिए use किए जाते हैं।

• <b> - Bold text (मोटा टेक्स्ट)
• <strong> - Important text (महत्वपूर्ण टेक्स्ट)
• <i> - Italic text (तिरछा टेक्स्ट)
• <em> - Emphasized text (जोर देकर लिखा गया टेक्स्ट)
• <u> - Underline text (रेखा वाला टेक्स्ट)
• <mark> - Marked text (हाइलाइट किया हुआ टेक्स्ट)
• <small> - Small text (छोटा टेक्स्ट)
• <big> - Big text (बड़ा टेक्स्ट)
• <del> - Deleted text (हटाया गया टेक्स्ट)
• <ins> - Inserted text (जोड़ा गया टेक्स्ट)
• <sub> - Subscript text (नीचे लिखा टेक्स्ट)
• <sup> - Superscript text (ऊपर लिखा टेक्स्ट)

HTML Attributes  (HTML एट्रिब्यूट्स)

HTML attributes provide additional information about HTML elements. Attributes are used to define extra properties of elements and they are written inside the start tag of an element.

HTML attributes HTML elements के बारे में अतिरिक्त जानकारी प्रदान करते हैं। ये elements की extra properties को define करने के लिए उपयोग किए जाते हैं और हमेशा element के start tag के अंदर लिखे जाते हैं।

• All HTML elements can have attributes
• Attributes provide additional information about an element
• Attributes are always specified in the start tag
• Attributes usually come in name/value pairs like: name="value"

• All HTML elements can have attributes – सभी HTML elements में attributes हो सकते हैं
• Attributes provide additional information about an element – Attributes किसी element के बारे में अतिरिक्त जानकारी देते हैं
• Attributes are always specified in the start tag – Attributes हमेशा start tag में लिखे जाते हैं
• Attributes usually come in name/value pairs like: name="value" – Attributes आमतौर पर name/value pair में होते हैं

The href Attribute

HTML links are defined with the <a> tag. The link address is specified in the href attribute:

Example

<a href="https://youtube.com/@musicmp3song001?si=SAcoGbSD5xXofsWD">This is a link</a>

HTML links <a> tag से define किए जाते हैं। Link का address href attribute में लिखा जाता है।

The src Attribute

HTML images are defined with the <img> tag.The filename of the image source is specified in the src attribute:

HTML images <img> tag से define होती हैं। Image का filename src attribute में लिखा जाता है।

Example

<img src="img_girl.jpg">

The above example shows how an image is added in HTML using the src attribute.

ऊपर दिया गया उदाहरण दिखाता है कि HTML में image को src attribute की मदद से कैसे जोड़ा जाता है।

The width and height Attributes

HTML images also have width and height attributes, which specify the width and height of the image.

HTML images में width और height attributes भी होते हैं, जो image की चौड़ाई और ऊँचाई को निर्धारित करते हैं।

Example

<img src="img_girl.jpg" width="500" height="600">

The width and height are specified in pixels by default; so width="500" means 500 pixels wide.

width और height default रूप से pixels में होते हैं; इसलिए width="500" का मतलब 500 pixels चौड़ाई है।

You will learn more about images in our HTML Images chapter.

आप HTML Images chapter में images के बारे में और अधिक सीखेंगे।

The alt Attribute

The alt attribute specifies an alternative text to be used, if an image cannot be displayed.

alt attribute एक वैकल्पिक (alternative) text बताता है, जो तब दिखाई देता है जब image display नहीं हो पाती।

The value of the alt attribute can be read by screen readers.

alt attribute की value को screen readers

The value of the alt attribute can be read by screen readers. This way, someone "listening" to the webpage, e.g. a vision impaired person, can "hear" the element.

alt attribute की value को screen readers पढ़ सकते हैं। इस तरह जो लोग webpage को सुनकर उपयोग करते हैं, जैसे कि दृष्टि से कमजोर (vision impaired) व्यक्ति, वे इस element को सुन सकते हैं।

Example

<img src="img_girl.jpg" alt="Girl with a jacket">

Example Image

The style Attribute

The style attribute is used to specify the styling of an element, like color, font, size etc.

style attribute का उपयोग किसी element की styling बताने के लिए किया जाता है, जैसे color, font, size आदि।

Example

<p style="color:red">This is a paragraph.</p>

Example Image

The lang Attribute

The language of the document can be declared in the <html> tag. The language is declared with the lang attribute.

Document की language को <html> tag में declare किया जा सकता है। Language को lang attribute की मदद से define किया जाता है।

Declaring a language is important for accessibility applications (screen readers) and search engines:

Language declare करना accessibility applications (screen readers) और search engines के लिए महत्वपूर्ण होता है।

<!DOCTYPE html>
<html lang="en-US">
<body>

...

</body>
</html>

The first two letters specify the language (en). If there is a dialect, add two more letters (US).

पहले दो letters language को बताते हैं (en)। अगर dialect हो, तो दो और letters जोड़ दिए जाते हैं (US)।

The title Attribute

Here, a title attribute is added to the <p> element. The value of the title attribute will be displayed as a tooltip when you mouse over the paragraph:

यहाँ title attribute को <p> element में जोड़ा गया है। जब आप paragraph पर mouse ले जाते हैं, तो title attribute की value tooltip के रूप में दिखाई देती है।

Example

<p title="I'm a tooltip"> This is a paragraph.
</p>

We Suggest: Use Lowercase Attributes

The HTML5 standard does not require lowercase attribute names.

HTML5 standard में lowercase attribute names जरूरी नहीं हैं।

The title attribute can be written with uppercase or lowercase like title or TITLE.

title attribute को uppercase या lowercase दोनों तरह से लिखा जा सकता है जैसे title या TITLE।

UPCISS recommends lowercase in HTML, and demands lowercase for stricter document types like XHTML.

UPCISS HTML में lowercase use करने की सलाह देता है, और XHTML जैसे stricter document types में lowercase जरूरी होता है।

We Suggest: Quote Attribute Values

The HTML5 standard does not require quotes around attribute values. The href attribute, demonstrated above, can be written without quotes:

HTML5 standard में attribute values के आसपास quotes जरूरी नहीं हैं। ऊपर दिखाया गया href attribute बिना quotes के भी लिखा जा सकता है।

Bad

<a href=https://www.upciss.com>

Good

<a href="https://www.upciss.com">

UPCISS recommends quotes in HTML, and demands quotes for stricter document types like XHTML.

UPCISS HTML में quotes use करने की सलाह देता है, और XHTML जैसे stricter document types में quotes जरूरी होते हैं।

Sometimes it is necessary to use quotes. This example will not display the title attribute correctly, because it contains a space:

कभी-कभी quotes का उपयोग जरूरी होता है। नीचे दिए गए example में title attribute सही से display नहीं होगा क्योंकि इसमें space है।

Example

<p title=About UPCISS>

Example Image

Single or Double Quotes?

Double quotes around attribute values are the most common in HTML, but single quotes can also be used.

HTML में attribute values के लिए double quotes सबसे ज्यादा उपयोग किए जाते हैं, लेकिन single quotes भी उपयोग किए जा सकते हैं।

Example

<!DOCTYPE html>
<html>
<body>
   <h2>Single or Double Quotes?</h2>
   <p>In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes:</p>
   <p>Move your mouse over the paragraphs below to see the effect:</p>
   <p title='Jk "Jitendra" UPCISS'>Jitendra with double quotes</p>
   <p title="Jk 'Jitendra' UPCISS">Jitendra with single quotes</p>

</body>

</html>

In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes.

कुछ situations में जब attribute value के अंदर ही double quotes होते हैं, तब single quotes का उपयोग करना जरूरी हो जाता है।

Move your mouse over the paragraphs below to see the effect:

नीचे दिए गए paragraphs पर mouse ले जाकर इसका effect देख सकते हैं।

Jitendra with double quotes

Jitendra with single quotes

In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes:

कुछ situations में जब attribute value के अंदर double quotes होते हैं, तब single quotes का उपयोग करना जरूरी होता है:

<p title='Jk "Jitendra" UPCISS'>

Or vice versa:

या इसके विपरीत:

<p title="Jk 'Jitendra' UPCISS">

Example

<!DOCTYPE html>
<html>
<body>
   <p>In HTML, spaces and new lines are ignored:</p>

<p>
  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.
</p>

</body>
</html>

Output 

In HTML, spaces and new lines are ignored:

HTML में spaces और new lines को ignore किया जाता है।

My Bonnie lies over the ocean.My Bonnie lies over the sea.My Bonnie lies over the ocean.Oh, bring back my Bonnie to me.

HTML Display

You cannot be sure how HTML will be displayed.

आप यह निश्चित नहीं कर सकते कि HTML कैसे display होगा।

Large or small screens, and resized windows will create different results.

बड़ी या छोटी screens और resized windows अलग-अलग परिणाम दिखा सकती हैं।

With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code.

HTML code में extra spaces या extra lines जोड़कर output को बदला नहीं जा सकता।

The browser will remove any extra spaces and extra lines when the page is displayed:

जब page display होता है, तब browser extra spaces और extra lines को हटा देता है।

Problem

This poem will display on a single line:

यह poem एक ही line में display होगी।

The HTML <pre> Element

The HTML <pre> element defines preformatted text.

HTML <pre> element preformatted text को define करता है।

The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks:

<pre> element के अंदर लिखा text fixed-width font (आमतौर पर Courier) में दिखता है और यह spaces तथा line breaks दोनों को preserve करता है।

Example

<!DOCTYPE html>
<html>
<body>

<p>The pre tag preserves both spaces and line breaks:</p>

<pre>
   My Bonnie lies over the ocean.

   My Bonnie lies over the sea.

   My Bonnie lies over the ocean.

   Oh, bring back my Bonnie to me.
</pre>

</body>
</html>

The pre tag preserves both spaces and line breaks.

<pre> tag spaces और line breaks दोनों को preserve करता है।

My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

The HTML Style Attribute

Setting the style of an HTML element can be done with the style attribute.

HTML element की style को style attribute की मदद से set किया जा सकता है।

The HTML style attribute has the following syntax:

HTML style attribute का syntax इस प्रकार होता है:

<tagname style="property:value;">

The property is a CSS property. The value is a CSS value.

property एक CSS property होती है और value एक CSS value होती है।

Example Image

📚 Continue Learning – Next Topic

Great! Now that you have learned about the HTML style attribute, the next lesson will show you how to apply background colors to HTML elements. This will help you make your web pages more colorful, readable, and visually attractive.

अगला पाठ: अब जब आपने HTML style attribute के बारे में सीख लिया है, तो अगले पेज में आप सीखेंगे कि background color का उपयोग करके HTML elements का background कैसे बदला जाता है। इससे आपकी web pages अधिक सुंदर, साफ़ और professional दिखाई देंगी।

← Previous Page Next Page →