HTML में केवल headings और paragraphs बनाना ही पर्याप्त नहीं है। एक complete website में हमें दूसरे pages के links, images, audio, video, maps, documents और दूसरे external resources भी जोड़ने पड़ते हैं।

इन सभी कामों के लिए HTML में अलग-अलग elements उपलब्ध हैं।

इस Part 2 में हम links, images, responsive images, audio, video, iframe और embedded content से संबंधित HTML tags को simple examples के साथ सीखेंगे।

1. <a> Tag

<a> tag का उपयोग webpage पर hyperlink बनाने के लिए किया जाता है।

यह सबसे important HTML tags में से एक है क्योंकि इसकी मदद से users एक page से दूसरे page या किसी external website पर जा सकते हैं।

Example

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

यह एक clickable link बनाएगा।

Internal Page Link

<a href="about.html">About Us</a>

यह about.html page पर ले जाएगा।

New Tab में Link Open करना

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

target="_blank" browser को link को नए browsing context में खोलने के लिए कहता है।

2. <area> Tag

<area> tag का उपयोग image map के अंदर clickable areas बनाने के लिए किया जाता है।

यह अकेले सामान्यतः उपयोग नहीं होता। इसे <map> के साथ इस्तेमाल किया जाता है।

Example

<img src="world-map.jpg" usemap="#worldmap" alt="World Map">
<map name="worldmap">
    <area
        shape="rect"
        coords="0,0,200,150"
        href="asia.html"
        alt="Asia">
</map>

यह image के एक specific area को clickable बना सकता है।

3. <map> Tag

<map> element image map define करता है।

इसके अंदर <area> elements रखे जाते हैं।

Example

<img src="map.jpg" usemap="#mymap" alt="Map">
<map name="mymap">
    <area
        shape="rect"
        coords="0,0,100,100"
        href="page1.html"
        alt="Page 1">
</map>

Image में अलग-अलग areas को clickable बनाने के लिए <map> और <area> का combination इस्तेमाल किया जाता है।

4. <img> Tag

<img> tag webpage में image display करने के लिए इस्तेमाल किया जाता है।

Basic Example

<img src="photo.jpg" alt="My Photo">

यहाँ:

• src image का path बताता है।
• alt image के लिए alternative text देता है।

<img> एक void element है, इसलिए इसका closing tag नहीं होता।

Image Size

<img
    src="photo.jpg"
    alt="Nature"
    width="500"
    height="300">

5. <picture> Tag

<picture> element का उपयोग different conditions के अनुसार different images provide करने के लिए किया जाता है।

यह responsive images और modern image formats के लिए बहुत useful है।

Example

<picture>
    <source media="(min-width: 800px)" srcset="large.jpg">
    <source media="(min-width: 400px)" srcset="medium.jpg">
    <img src="small.jpg" alt="Beautiful Landscape">
</picture>

Browser available conditions के अनुसार suitable image चुन सकता है।

6. <source> Tag

<source> element media elements के लिए एक या अधिक alternative resources specify करता है।

यह <picture>, <audio> और <video> के साथ commonly इस्तेमाल होता है।

Example with Picture

<picture>
    <source srcset="image.webp" type="image/webp">
    <img src="image.jpg" alt="Example Image">
</picture>

Example with Video

<video controls>
    <source src="video.mp4" type="video/mp4">
</video>

7. <audio> Tag

<audio> element webpage में audio content embed करने के लिए इस्तेमाल किया जाता है।

Basic Example

<audio controls>
    <source src="music.mp3" type="audio/mpeg">
</audio>

controls attribute browser में play, pause और volume controls दिखाता है।

Direct Audio Source

<audio src="music.mp3" controls>
</audio>

हालाँकि multiple formats provide करने के लिए <source> approach अधिक flexible है।

8. <video> Tag

<video> element webpage में video display करने के लिए इस्तेमाल किया जाता है।

Basic Example

<video controls width="600">
    <source src="lesson.mp4" type="video/mp4">
</video>

Video with Poster Image

<video
    controls
    width="600"
    poster="thumbnail.jpg">
    <source src="lesson.mp4" type="video/mp4">
</video>

poster video शुरू होने से पहले दिखाई जाने वाली preview image specify करता है।

9. <track> Tag

<track> element video या audio media के लिए timed text tracks provide करता है।

इसका common use subtitles और captions के लिए होता है।

Example

<video controls width="600">
    <source src="lesson.mp4" type="video/mp4">
    <track
        kind="subtitles"
        src="subtitles-en.vtt"
        srclang="en"
        label="English">
</video>

यह video के लिए English subtitles provide करता है।

10. <iframe> Tag

<iframe> element दूसरे webpage या external content को current webpage के अंदर embed करने के लिए इस्तेमाल किया जाता है।

Basic Example

<iframe
    src="https://example.com"
    width="600"
    height="400">
</iframe>

iframe का उपयोग maps, videos और अन्य embeddable content के लिए भी किया जाता है।

YouTube Video Embed Example

<iframe
    width="560"
    height="315"
    src="https://www.youtube.com/embed/VIDEO_ID"
    title="YouTube video"
    allowfullscreen>
</iframe>

यहाँ VIDEO_ID को actual YouTube video ID से replace करना होगा।

11. <embed> Tag

<embed> element external content को webpage में embed करने के लिए इस्तेमाल किया जा सकता है।

Example

<embed
    src="document.pdf"
    type="application/pdf"
    width="600"
    height="500">

यह browser की capabilities के अनुसार external resource display कर सकता है।

12. <object> Tag

<object> element external resource को document में represent करने के लिए इस्तेमाल किया जाता है।

यह images, PDFs और अन्य supported resources के लिए इस्तेमाल किया जा सकता है।

Example

<object
    data="document.pdf"
    type="application/pdf"
    width="600"
    height="500">
</object>

कुछ situations में fallback content भी दिया जा सकता है।

<object
    data="document.pdf"
    type="application/pdf"
    width="600"
    height="500">
    <p>Your browser cannot display this PDF.</p>
</object>

13. <canvas> Tag

<canvas> element JavaScript की मदद से graphics draw करने के लिए एक drawing surface provide करता है।

Canvas स्वयं graphics नहीं बनाता; सामान्यतः JavaScript इसका drawing context control करता है।

Example

<canvas id="myCanvas" width="400" height="200">
    Your browser does not support canvas.
</canvas>

JavaScript से इसमें drawing की जा सकती है:

<script>
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");
    ctx.fillRect(50, 50, 150, 80);
</script>

14. <svg> Element

<svg> का उपयोग scalable vector graphics बनाने के लिए किया जाता है।

SVG technically HTML element नहीं बल्कि SVG namespace का element है, लेकिन इसे HTML documents में directly use किया जा सकता है।

Example

<svg width="200" height="150">
    <circle
        cx="100"
        cy="75"
        r="50"
        fill="blue">
    </circle>
</svg>

यह एक circle create करेगा।

SVG का उपयोग logos, icons, diagrams और vector graphics के लिए किया जा सकता है।

15. <circle> SVG Element

<circle> SVG में circle बनाने के लिए इस्तेमाल होता है।

Example

<svg width="200" height="150">
    <circle
        cx="100"
        cy="75"
        r="50">
    </circle>
</svg>

यहाँ:

• cx = center का x-coordinate
• cy = center का y-coordinate
• r = radius

16. <rect> SVG Element

<rect> SVG में rectangle या square बनाने के लिए इस्तेमाल होता है।

Example

<svg width="300" height="200">
    <rect
        x="50"
        y="40"
        width="150"
        height="100">
    </rect>
</svg>

17. <line> SVG Element

<line> SVG में straight line बनाने के लिए इस्तेमाल होता है।

Example

<svg width="300" height="150">
    <line
        x1="20"
        y1="20"
        x2="250"
        y2="100"
        stroke="black">
    </line>
</svg>

18. <polyline> SVG Element

<polyline> multiple connected straight lines बनाने के लिए इस्तेमाल होता है।

Example

<svg width="300" height="200">
    <polyline
        points="20,150 80,50 140,120 220,30"
        fill="none"
        stroke="black">
    </polyline>
</svg>

19. <polygon> SVG Element

<polygon> बंद geometric shape बनाने के लिए इस्तेमाल होता है।

Example

<svg width="300" height="200">
    <polygon
        points="150,20 250,170 50,170">
    </polygon>
</svg>

यह triangle जैसी shape बना सकता है।

20. <path> SVG Element

<path> SVG में complex shapes और paths बनाने के लिए इस्तेमाल होता है।

Example

<svg width="300" height="200">
    <path
        d="M 20 100 C 80 20, 180 20, 260 100"
        fill="none"
        stroke="black">
    </path>
</svg>

SVG paths complex drawings के लिए बहुत powerful होते हैं।

21. <foreignObject> SVG Element

<foreignObject> SVG के अंदर दूसरे XML namespace का content embed करने की सुविधा देता है। HTML documents में इसका उपयोग advanced SVG layouts के लिए किया जा सकता है।

Example

<svg width="300" height="150">
    <foreignObject x="20" y="20" width="260" height="100">
        <div xmlns="http://www.w3.org/1999/xhtml">
            HTML content inside SVG
        </div>
    </foreignObject>
</svg>

यह advanced use case है और beginners को इसकी आवश्यकता सामान्य HTML websites के लिए नहीं होती।

22. <math> Element

HTML document में MathML content को represent करने के लिए <math> element का उपयोग किया जा सकता है।

यह mathematical formulas को structured तरीके से display करने के लिए उपयोगी है।

Example

<math>
    <mi>x</mi>
    <mo>+</mo>
    <mn>2</mn>
    <mo>=</mo>
    <mn>5</mn>
</math>

यह MathML markup का simple example है।

23. <mi> MathML Element

<mi> MathML में identifier या variable को represent करता है।

Example

<math>
    <mi>x</mi>
</math>

24. <mn> MathML Element

<mn> MathML में number को represent करता है।

Example

<math>
    <mn>25</mn>
</math>

25. <mo> MathML Element

<mo> mathematical operator को represent करता है।

Example

<math>
    <mi>x</mi>
    <mo>+</mo>
    <mn>5</mn>
</math>

26. <mrow> MathML Element

<mrow> MathML expressions के elements को एक horizontal group में organize करता है।

Example

<math>
    <mrow>
        <mi>x</mi>
        <mo>+</mo>
        <mn>5</mn>
    </mrow>
</math>

27. <mfrac> MathML Element

<mfrac> fraction represent करने के लिए इस्तेमाल होता है।

Example

<math>
    <mfrac>
        <mn>1</mn>
        <mn>2</mn>
    </mfrac>
</math>

यह 1/2 जैसी mathematical fraction represent करता है।

28. <msup> MathML Element

<msup> superscript expression बनाने के लिए उपयोग होता है।

Example

<math>
    <msup>
        <mi>x</mi>
        <mn>2</mn>
    </msup>
</math>

यह x² जैसी expression represent करता है।

29. <msub> MathML Element

<msub> subscript expression बनाने के लिए उपयोग होता है।

Example

<math>
    <msub>
        <mi>x</mi>
        <mn>1</mn>
    </msub>
</math>

यह x₁ जैसी expression represent करता है।

30. <semantics> MathML Element

<semantics> MathML expression के semantic information और annotations को organize करने के लिए इस्तेमाल किया जा सकता है।

Example

<math>
    <semantics>
        <mi>x</mi>
    </semantics>
</math>

यह advanced mathematical markup का हिस्सा है।

31. <annotation> MathML Element

<annotation> mathematical expression के बारे में additional machine-readable information provide कर सकता है।

Example

<math>
    <semantics>
        <mi>x</mi>
        <annotation encoding="application/x-tex">
            x
        </annotation>
    </semantics>
</math>

32. <annotation-xml> MathML Element

<annotation-xml> MathML expression से संबंधित XML-based annotation provide करता है।

Example

<math>
    <semantics>
        <mi>x</mi>
        <annotation-xml encoding="application/xml">
            <ci>x</ci>
        </annotation-xml>
    </semantics>
</math>

यह advanced MathML use case है।

33. <mtext> MathML Element

<mtext> mathematical expression के अंदर ordinary text represent करने के लिए उपयोग किया जाता है।

Example

<math>
    <mtext>Area</mtext>
    <mo>=</mo>
    <mi>π</mi>
    <msup>
        <mi>r</mi>
        <mn>2</mn>
    </msup>
</math>

34. <menclose> MathML Element

<menclose> MathML expression के आसपास notation या enclosure लगाने के लिए उपयोग किया जाता है।

Example

<math>
    <menclose notation="box">
        <mi>x</mi>
    </menclose>
</math>

यह advanced MathML element है।

35. <mover> MathML Element

<mover> किसी mathematical expression के ऊपर दूसरा expression रखता है।

Example

<math>
    <mover>
        <mi>x</mi>
        <mo>¯</mo>
    </mover>
</math>

36. <munder> MathML Element

<munder> mathematical expression के नीचे दूसरा expression रखता है।

Example

<math>
    <munder>
        <mi>x</mi>
        <mo>_</mo>
    </munder>
</math>

37. <munderover> MathML Element

<munderover> expression के ऊपर और नीचे दोनों additional expressions रख सकता है।

Example

<math>
    <munderover>
        <mo>∑</mo>
        <mn>1</mn>
        <mn>10</mn>
    </munderover>
</math>

38. <msqrt> MathML Element

<msqrt> square root expression बनाने के लिए उपयोग किया जाता है।

Example

<math>
    <msqrt>
        <mn>25</mn>
    </msqrt>
</math>

39. <mroot> MathML Element

<mroot> general root expression represent करता है।

Example

<math>
    <mroot>
        <mn>8</mn>
        <mn>3</mn>
    </mroot>
</math>

यह cube root जैसी expression represent कर सकता है।

40. <mtable> MathML Element

<mtable> mathematical expressions को table-like structure में arrange करने के लिए उपयोग होता है।

Example

<math>
    <mtable>
        <mtr>
            <mtd><mn>1</mn></mtd>
            <mtd><mn>2</mn></mtd>
        </mtr>
        <mtr>
            <mtd><mn>3</mn></mtd>
            <mtd><mn>4</mn></mtd>
        </mtr>
    </mtable>
</math>

41. <mtr> MathML Element

<mtr> MathML table की एक row represent करता है।

Example

<math>
    <mtable>
        <mtr>
            <mtd><mn>1</mn></mtd>
            <mtd><mn>2</mn></mtd>
        </mtr>
    </mtable>
</math>

42. <mtd> MathML Element

<mtd> MathML table की एक cell represent करता है।

Example

<math>
    <mtable>
        <mtr>
            <mtd><mi>x</mi></mtd>
            <mtd><mn>10</mn></mtd>
        </mtr>
    </mtable>
</math>

Important Note About SVG and MathML

SVG और MathML को HTML document के अंदर use किया जा सकता है, लेकिन इनके अपने specifications और element sets हैं।

इसलिए सामान्य HTML website बनाते समय आपको हर SVG या MathML element याद करने की आवश्यकता नहीं है। Beginners के लिए पहले standard HTML elements सीखना अधिक important है।

Part 2 में Covered Important Elements

इस part में हमने links, images, multimedia, embedded content तथा SVG और MathML के commonly encountered elements देखे।

मुख्य elements:

<a>
<area>
<map>
<img>
<picture>
<source>
<audio>
<video>
<track>
<iframe>
<embed>
<object>
<canvas>

और SVG/MathML के important elements:

<svg>
<circle>
<rect>
<line>
<polyline>
<polygon>
<path>
<foreignObject>
<math>
<mi>
<mn>
<mo>
<mrow>
<mfrac>
<msup>
<msub>
<semantics>
<annotation>
<annotation-xml>
<mtext>
<menclose>
<mover>
<munder>
<munderover>
<msqrt>
<mroot>
<mtable>
<mtr>
<mtd>

आगे क्या सीखेंगे?

अब तक हमने HTML document structure, text elements, links, images, multimedia और embedded content cover किया है।

Part 3 में हम HTML के सबसे important data-structure elements सीखेंगे:

• <ul>
• <ol>
• <li>
• <dl>
• <dt>
• <dd>
• <table>
• <caption>
• <thead>
• <tbody>
• <tfoot>
• <tr>
• <th>
• <td>
• <colgroup>
• <col>

इसके बाद हम forms और form controls की तरफ बढ़ेंगे।