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