HTML Attributes

Add extra information to your HTML elements using attributes like class, id, and src to control styling, behavior, and content.

Think of an HTML element as a person. The tag tells you what kind of person they are — a teacher, a student, a doctor. But attributes tell you specific details about that person — their name, age, or where they live. An attribute is extra information you add to an HTML tag. It goes inside the opening tag and gives the browser more details about what to do with that element. Every attribute has a name and a value, separated by an equals sign.

Anatomy of an Attribute

Before we jump into specific attributes, let's break down exactly how they work: The attribute name tells the browser what kind of information you're providing. The value tells it exactly what that information is. Always wrap values in quotes — it prevents weird bugs.

Global Attributes

Some attributes work on every single HTML element. These are called global attributes. You can add them to paragraphs, images, divs, links — anything.

The id Attribute

An id gives an element a unique name on your page. Think of it like a Social Security number — only one element can have that specific id. Alex wants to add a unique identifier to the main heading on their portfolio: IDs are super useful for CSS styling and JavaScript interactions. But remember — each id must be unique on your page. No duplicates allowed.

The class Attribute

Unlike ids, class attributes can be shared by multiple elements. Think of classes like t-shirt sizes — lots of people can wear "medium." Alex wants to group similar elements together for styling: Notice how the last project has two classes: project-card and featured. You separate multiple classes with spaces. That element gets all the styling from both classes.

The title Attribute

The title attribute adds a tooltip that appears when someone hovers over an element. Perfect for extra context or explanations.

Element-Specific Attributes

While global attributes work everywhere, many attributes only work with specific elements. These attributes are designed for particular jobs.

Link Attributes (href, target)

The href attribute tells a link where to go. Without it, you just have regular text. The target attribute controls how the link opens. Each href value does something different. File names link to other pages. mailto: opens email. #section-name jumps to an element with that id on the same page.

Image Attributes (src, alt, width, height)

Images need the src attribute to know what picture to show. The alt attribute describes the image for screen readers and shows text if the image fails to load.

Data Attributes

Sometimes you need to store custom information with an element. That's where data- attributes come in. You can make up any name after "data-" and JavaScript can read it later. Alex wants to store project information for interactive features: Data attributes are invisible to users but super powerful for developers. You might use data-price on product elements or data-category on blog posts.

Boolean Attributes

Some attributes don't need values — they're either present or not. These are called boolean attributes. If the attribute exists, it's "true." If it's missing, it's "false." Common boolean attributes include disabled, required, and hidden:

Common Mistakes with Attributes

Even experienced developers make these attribute mistakes. Here's how to avoid them: And remember — attribute names are case-insensitive, but it's good practice to keep them lowercase. CLASS and class both work, but stick with lowercase for consistency. Attributes turn basic HTML elements into powerful, interactive components. They're the bridge between HTML structure, CSS styling, and JavaScript behavior. Master them, and you'll have precise control over every element on your pages.

Quiz