HTML PROGRAMMING:HTML – Attributes

Mastering html – attributes concepts and implementation.

Attributes provide additional information about HTML elements. They are always written inside the opening tag and help define behavior, identity, or appearance.

Basic syntax:

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

Parts of an attribute

Every attribute has two parts:

  • Name: The property you want to set (for example: id, class, src, href).
  • Value: The value assigned to 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 always placed inside the opening tag.
  • Attribute values should be enclosed in double quotes ("").
  • A single element can have multiple attributes.

Example:

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

Core attributes (used very frequently)

  1. id
  • Uniquely identifies an element on the page.
  • Must be unique within the document.
  • Commonly used by CSS and JavaScript.
  • Example: <h1 id="main-title">Welcome</h1>
  1. class
  • Used to group multiple elements together.
  • Many elements can share the same class.
  • Commonly used for styling and behavior.
  • Example: <p class="highlight">Important note</p>
  1. title
  • Displays extra information as a tooltip on hover.
  • Useful for abbreviations or additional hints.
  • Example: <abbr title="HyperText Markup Language">HTML</abbr>
  1. style
  • Allows inline CSS inside an element.
  • Example: <p style="color: blue;">Blue text</p>
  • Not recommended for large projects because it mixes structure with styling.

Deprecated / old attributes

Older HTML versions used attributes like align, border, and bgcolor for styling.

Example:

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

In modern HTML, these are replaced by CSS:

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

You should avoid using deprecated attributes, but it is useful to recognize them when working with legacy code.

Suggested image prompt

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

Interview-style questions from this topic

  1. What is an HTML attribute?
  2. Where are attributes placed in an element?
  3. What is the difference between id and class?
  4. Why must id values be unique?
  5. What is the purpose of the title attribute?
  6. Why are inline styles discouraged in modern HTML?

Hands-on Examples

Align Attribute Example (Legacy)

<!DOCTYPE html>
<html>
<head>
  <title>Align Attribute Example</title>
</head>
<body>
  <p align="left">This is left aligned</p>
  <p align="center">This is center aligned</p>
  <p align="right">This is right aligned</p>
</body>
</html>

The align attribute was commonly used in older HTML to control text alignment. In modern HTML, this approach is outdated. CSS should be used instead to separate structure from presentation.

Progress
PreviousNext: HTML – Formatting

Related Page