0
0
HTMLmarkup~5 mins

What are attributes in HTML

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Attributes add extra information to HTML elements. They help control how elements behave or look.

To give an image a description with alt text for accessibility.
To set a link's destination URL.
To add a unique ID to an element for styling or scripting.
To specify the size or type of an input field in a form.
To make a button perform an action when clicked.
Syntax
HTML
<element attribute="value">Content</element>
Attributes go inside the opening tag of an element.
They usually have a name and a value inside quotes.
Examples
The href attribute tells the link where to go.
HTML
<a href="https://example.com">Visit site</a>
The src attribute sets the image file, and alt describes it.
HTML
<img src="photo.jpg" alt="A smiling dog">
The type attribute defines the input field type, and placeholder shows a hint.
HTML
<input type="text" placeholder="Enter your name">
Sample Program

This page uses attributes like id to name the heading, href and target to make the link open in a new tab, and src and alt for the image.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Attributes Example</title>
</head>
<body>
  <h1 id="main-title">Welcome!</h1>
  <a href="https://openai.com" target="_blank">Go to OpenAI</a>
  <br>
  <img src="https://via.placeholder.com/150" alt="Placeholder image">
</body>
</html>
OutputSuccess
Important Notes

Always use quotes around attribute values.

Some attributes like disabled can work without a value.

Attributes help browsers and assistive tools understand your page better.

Summary

Attributes add details to HTML elements.

They are written inside the opening tag with a name and value.

Attributes control behavior, appearance, and accessibility.