HTML5 Tags and Attributes Explained in HinEnglish

Welcome to this tutorial where we explain the HTML5 tags and their attributes in simple HinEnglish. 🌟

1. <nav> Tag 🚀

Kaam: Navigation links ke liye use hota hai, jaise menu ya site map.

Attributes: Global attributes (jaise class, id, style)

Example:

    <nav>
      <a href="home.html">🏠 Home</a>
      <a href="about.html">ℹ️ About Us</a>
      <a href="services.html">🛠️ Services</a>
    </nav>

2. <article> Tag 📄

Kaam: Ek independent block create karta hai, jaise ek blog ya news article.

Attributes: Global attributes.

Example:

    <article>
      <h2>🎉 HTML5 Features</h2>
      <p>Semantic tags help improve website readability.</p>
    </article>

3. <aside> Tag 📂

Kaam: Side content ke liye hota hai, jo main content se related ho (like tips or ads).

Attributes: Global attributes.

Example:

    <aside>
      <h4>💡 Tip</h4>
      <p>Use <header> and <footer> for better SEO.</p>
    </aside>

4. <audio> Tag 🎵

Kaam: Audio file embed karne ke liye.

Attributes:

  • autoplay 🎶: Audio ko auto-play karne ke liye.
  • controls 🎛️: Audio player controls dikhane ke liye.
  • loop 🔁: Audio ko repeat karne ke liye.
  • muted 🔇: Audio ko mute karne ke liye.
  • src 🌐: Audio file ka URL specify karne ke liye.

Example:

    <audio controls autoplay>
      <source src="song.mp3" type="audio/mpeg">
      🎧 Browser does not support this audio.
    </audio>

5. <video> Tag 🎥

Kaam: Video file embed karne ke liye.

Attributes:

  • autoplay 🎞️: Video ko auto-play karne ke liye.
  • controls 🎛️: Video controls dikhane ke liye.
  • height 📏: Height set karne ke liye.
  • width 📏: Width set karne ke liye.
  • loop 🔁: Video ko repeat karne ke liye.
  • muted 🔇: Video ko mute start karne ke liye.
  • src 🌐: Video file ka URL specify karne ke liye.

Example:

    <video width="400" height="300" controls>
      <source src="movie.mp4" type="video/mp4">
      🎥 Browser does not support this video.
    </video>

6. <source> Tag 🔀

Kaam: Alternative formats for <audio> or <video> specify karta hai.

Attributes:

  • src 🌐: Media file ka URL.
  • type 📋: File ka type (e.g., audio/mpeg, video/mp4).

Example:

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

7. <embed> Tag 🌐

Kaam: External resources (e.g., PDFs, multimedia) ko embed karta hai.

Attributes:

  • src 🌐: Resource ka URL.
  • height 📏: Height set karta hai.
  • width 📏: Width set karta hai.
  • type 📋: File ka type specify karta hai.

Example:

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

8. <object> Tag 🖼️

Kaam: External object embed karta hai (e.g., multimedia, PDF).

Attributes:

  • data 🌐: Resource ka URL.
  • type 📋: File ka type specify karta hai.
  • height 📏: Height set karta hai.
  • width 📏: Width set karta hai.

Example:

    <object data="presentation.pdf" type="application/pdf" width="600" height="400">
      📂 PDF viewer not supported.
    </object>

9. <picture> Tag 🖼️

Kaam: Responsive images ke liye. Screen size ke hisaab se images dikhata hai.

Attributes:

  • None specific, but uses child elements (<source>).

Example:

    <picture>
      <source srcset="large-image.jpg" media="(min-width: 800px)">
      <source srcset="small-image.jpg" media="(max-width: 799px)">
      <img src="default.jpg" alt="Responsive Image">
    </picture>

10. <svg> Tag 🎨

Kaam: Scalable vector graphics ke liye (2D graphics). <svg> ke andar shapes like circles, lines, rectangles, polygons draw kiye jaate hain.

Example:

    <svg width="100" height="100">
      <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"></circle>
    </svg>

11. <meter> Tag 🧭

Kaam: Measurement represent karta hai jaise range, scales.

Attributes:

  • value 📊: Represented value.
  • min 📉: Minimum range.
  • max 📈: Maximum range.
  • low 📉: Low end value.
  • high 📈: High end value.

Example:

    <meter value="60" min="0" max="100"></meter>

12. <ruby> Tag 🔤

Kaam: Ruby annotations provide karta hai, jo ek text ke pronunciation ya meaning ko clarify karta hai.

Example:

    <ruby>
      <rb>漢字</rb>
      <rt>kanji</rt>
    </ruby>
Next Post Previous Post