HTML – Attributes

Attributes give extra information about HTML elements. They are always written in the start tag.

Basic pattern:

• <tagname attributeName="value">Content</tagname>

Parts of an attribute

Each attribute has two parts:

• Name: what property you are setting (for example: id, class, src, href)
• Value: the setting for that property (for example: "main-title", "button-primary")

Example:

• <p id="intro">Welcome!</p>
• id → attribute name
• "intro" → attribute value

Common attribute rules

• Attributes are written inside the opening tag.
• Attribute values should be inside double quotes ("") in modern HTML.
• One element can have multiple attributes.

Example:

• <img src="cat.png" alt="Cute cat" width="200">

Core attributes (used very frequently)

Some important attributes that many elements support:

1. id

• Gives a unique name to an element.
• Should be unique on the page.
• Often used with JavaScript or CSS.
• Example: <h1 id="main-title">Welcome</h1>

1. class

• Used to group elements that share the same style or behavior.
• Multiple elements can have the same class.
• Example: <p class="highlight">Important note</p>

1. title

• Provides extra information as a tooltip when you hover over the element.
• Example: <abbr title="HyperText Markup Language">HTML</abbr>

1. style

• Lets you write inline CSS directly inside the element.
• Example: <p style="color: blue;">Blue text</p>
• For real projects, it’s better to keep CSS in a separate stylesheet instead of using style everywhere.

Deprecated/old attributes

In older HTML, attributes like align, border, bgcolor were used to control layout and styling.

Example:

• <p align="center">Centered text</p>

These are not recommended in modern HTML. Use CSS instead:

• <p style="text-align: center;">Centered text</p>

Knowing about them is still useful because you might see them in legacy code or interview questions.

Suggested image prompt

"Illustration of an HTML tag with callouts labeling the element name, attribute name, and attribute value, plus a second example showing id and class on different elements."

Interview-style questions from this topic

1. What is an HTML attribute? Where is it placed?
2. What is the difference between the id and class attributes?
3. Why should id values be unique on a page?
4. What is the purpose of the title attribute?
5. Why is using inline styles (<tag style="...">) not recommended for large projects?
6. Name some old/deprecated attributes and what replaced them in modern HTML.