HTML Attributes Explained for Beginners
In previous lessons we learned what elements are and how they nest. But elements alone are not always enough. Sometimes you need to tell the browser extra information: where is the image? where does the link go? what color is this text? That is exactly what attributes do.
What Is an Attribute?
An attribute is extra information added inside the opening tag to tell the browser more details about the element.
<!-- This is an element without an attribute -->
<p>Hello!</p>
<!-- This is an element with an attribute -->
<p style="color: red;">Hello! I am red.</p>
Basic rule: an attribute is always written inside the opening tag only — not in the closing tag. It follows the form name="value".
Attribute Format — The Correct Syntax
<tag-name attribute-name="value">content</tag-name>
<!-- Real example -->
<a href="https://www.devarabi.com">Visit the site</a>
In this example:
a— the tag name (link)href— the attribute name"https://www.devarabi.com"— the attribute value
Most Important HTML Attributes — Full Explanation
1. The href Attribute — Link Destination
Used with the <a> tag (link). It defines which page or website the visitor goes to when clicking the link.
<a href="https://www.devarabi.com">Click here to go to DevArabi</a>
<!-- Link to another page on the same site -->
<a href="/courses/html/intro.php">HTML Introduction</a>
2. The src Attribute — Image Source
Used with the <img> tag to define the path of the image you want to display.
<!-- Image from the internet -->
<img src="https://example.com/photo.jpg">
<!-- Image stored on the same site -->
<img src="/assets/images/logo.png">
3. The alt Attribute — Alternative Text
Used with <img> to provide text if the image fails to load.
It is also very important for SEO and for visually impaired users.
<img src="/assets/images/logo.png" alt="DevArabi programming learning site logo">
alt="" tells the browser "this image is decorative only." But if the image is important, write a real description. Google reads this text to understand your page topic.
4. The style Attribute — Inline Styling
Used to add CSS styling directly to the element — such as color, size, and background.
<p style="color: blue;">This text is blue.</p>
<h1 style="font-size: 40px; color: green;">A big green heading</h1>
<p style="background-color: yellow; padding: 10px;">Text on a yellow background</p>
style directly in HTML is fine for learning and quick testing. But in real projects, it is better to separate CSS into its own file. We will learn this later.
5. The id Attribute — Unique Identifier
Each element can have a unique id. It is used to target a specific element with CSS or JavaScript.
<h1 id="main-title">Main title</h1>
<p id="intro-text">This is the introductory paragraph.</p>
id on a single page. Every id must be completely unique — like an ID card number.
6. The class Attribute — Shared Classification
Unlike id, it can be used on multiple elements in the same page. It is useful for applying the same styling to a group of elements.
<p class="important-note">This is an important note.</p>
<p class="important-note">This is another important note.</p>
<p class="important-note">And this is a third note.</p>
7. The title Attribute — Hover Message
When you hover over an element that contains title, a small message appears.
<p title="Extra info shown on hover">Hover over this text!</p>
<a href="https://devarabi.com" title="Arabic programming learning site">DevArabi</a>
Summary — Table of Common Attributes
| Attribute | Used with | What it does |
|---|---|---|
href |
<a> |
Defines the link destination |
src |
<img>, <script> |
Defines the source of a file or image |
alt |
<img> |
Alternative text if the image does not load |
style |
أي عنصر | Inline CSS styling on the element |
id |
أي عنصر | Unique identifier for an element (not repeated) |
class |
أي عنصر | Shared classification for multiple elements |
title |
أي عنصر | Message shown on mouse hover |
width / height |
<img>, <table> |
Defines the width and height of the element |
Quotation Marks — Double or Single?
Attribute values are written inside quotes. The accepted standard is to use double quotes " ".
<!-- ✅ Best and most common -->
<a href="https://devarabi.com">Website</a>
<!-- ✅ Also works, but less common -->
<a href='https://devarabi.com'>Website</a>
<!-- When do we use single quotes? When the value contains double quotes -->
<p title='Ahmed "the pro" in programming'>Meet Ahmed</p>
A Complete Element with Multiple Attributes
A single element can contain multiple attributes at the same time:
<img
src="/assets/images/logo.png"
alt="DevArabi logo"
width="200"
height="100"
title="Arabic programming learning site"
id="site-logo"
class="header-image"
>
Notice that we wrote each attribute on a separate line — this is not required, but it makes the code more readable, especially when there are many attributes.
Frequently Asked Questions — FAQ
Are attributes mandatory?
No, attributes are optional in most cases. But some are practically required — like alt for images (important for SEO) and href for links (without it the link does not work).
Can one element have more than one attribute?
Yes, with no limit. You can add dozens of attributes to a single element — just write them one after another inside the opening tag with a space between them.
What is the difference between id and class?
id is unique — it is not repeated on the page. class is shared — it can be used on many elements in the same page. Rule: use id for a single specific element, and class for a group of similar elements.
Does attribute order matter?
No, the browser reads attributes regardless of their order in the tag. But traditionally, id and class are written first, then the rest for easier reading.