HTML Attributes

  • This lesson explains what HTML attributes are, how they work, and how to use common attributes like id, class, src, href, and alt with examples.
  • 🎯 What Are HTML Attributes ?

     ✅ Attributes give extra information about an HTML element
    ✅ They control behavior, identity, and meaning

    📌 Attributes are always written:

    Inside the opening tag

    As name = value

    🧱 Attribute Syntax

    <tagname attribute="value"> Content </tagname>

Paragraph with ID Attribute

This code creates a paragraph displaying "Hello" and assigns it an ID for identification and styling.

<p id = "para1" > Hello </p>
  • 📌 Explanation:

    • p → tag

    • id → attribute

    • "para1" → value

    🔖 Common HTML Attributes

    ✅ id

    ➡️ Gives a unique identity to an element

    <h1 id= "main-title" > Heading </h1>

    ✅ class

    ➡️ Used to apply same styling to multiple elements

    <p class="text">Paragraph 1</p>

    <p class="text">Paragraph 2</p>

    ✅ src

    ➡️ Used with images to specify file location

    <img src="photo.jpg">

    ✅ href

    ➡️ Used in links to specify destination URL

    <a href="https://google.com">Go to Google</a>

    ✅ alt

    ➡️ Alternate text for images
    ➡️ Improves SEO & accessibility

    <img src="car.jpg" alt="Red car">

    🧠 Quick Summary

     ✅ Elements = Tags + Content
    ✅ Attributes = Extra information
    ✅ Attributes are written in opening tag only
    ✅ Attributes help CSS & JavaScript later