HTML Attributes

Attributes give extra information about an HTML element. They are always written inside the opening tag, as a name and a value.

<a href="https://www.example.com" title="Go to Example">Visit Example</a>

Here href and title are attributes of the <a> tag. The value is written after an equal sign, inside quotes.

---

Syntax

<tagname attribute_name="attribute_value">Content</tagname>

• An element can have more than one attribute, separated by a space.
• Use double quotes around the value. Single quotes also work.
• Attribute names are written in lowercase.

---

Common attributes

Attribute	Used with	Meaning
href	<a>	Address of the link
src	<img>, <script>, <video>	Address of the file to load
alt	<img>	Text shown if the image cannot load, and read by screen readers
width, height	<img>, <iframe>	Size in pixels
title	Any element	Extra text shown as a tooltip on mouse hover
id	Any element	A unique name for one element
class	Any element	A group name that many elements can share
style	Any element	Inline CSS
lang	Any element	Language of the content

---

Example with many attributes

<img src="logo.png" alt="Tutorials Class logo" width="200" height="80">

The alt attribute is very important for accessibility and SEO. Never leave it out for useful images.

---

Boolean attributes

Some attributes have no value. If they are present, they are ON. Examples are disabled, required, checked and readonly.

<input type="text" required>
<input type="checkbox" checked>
<button disabled>Save</button>

---

Custom data attributes

You can create your own attributes that start with data-. They store extra information for JavaScript.

<li data-product-id="105">Mobile Phone</li>

---

Summary

• Attributes add extra information to an element, in name="value" form.
• They go in the opening tag only.
• Learn class and id next, as they are used with CSS and JavaScript.

• Previous Page
• Next Page

---

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.