HTML attributes provide additional information about HTML elements. They always come in name/value pairs and are placed inside the start tag.
The href Attribute
The <a> tag defines a hyperlink. The href attribute specifies the URL the link goes to:
<a href="https://www.w3schools.com">Visit W3Schools</a>The src Attribute
The <img> tag is used to embed an image. The src attribute specifies the path to the image:
<img src="https://www.w3schools.com/html/img_5terre.jpg">💡 Tip: The
srcattribute is required. Without it, the browser doesn't know which image to display.
The alt Attribute
The alt attribute specifies alternative text for an image if it cannot be displayed.
<img src="wrong_url.jpg" alt="A beautiful sunset over the ocean">If the image cannot be displayed, the browser will show the alt text instead.
💡 Note: Always include the
altattribute — it helps screen readers (accessibility) and search engines understand your images.
The width and height Attributes
The <img> tag should also contain width and height attributes. They specify the width and height of the image (in pixels):
<img src="pic_trulli.jpg" alt="Trulli" width="500" height="333">The alt Attribute Explained
The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
The title Attribute
The title attribute specifies extra information about an element. The value of this attribute is usually shown as a tooltip (a small popup that appears when you hover over the element):
<p title="I'm a tooltip">This is a paragraph.</p>The lang Attribute
You should always include the lang attribute inside the <html> tag, to declare the language of the Web page. This is important for accessibility and search engines.
<html lang="en">Some examples:
| Language | Code |
|---|---|
| English | en |
| Spanish | es |
| French | fr |
| German | de |
| Japanese | ja |
| Nepali | ne |
The style Attribute
The style attribute is used to add styles to an element, such as color, font, size, and more:
<p style="color: blue; font-size: 18px;">This is a blue paragraph.</p>Class and ID Attributes
The class attribute specifies one or more class names for an element. The class attribute is used to point to a class in a style sheet, or to reference the class with JavaScript.
The id attribute specifies a unique id for an HTML element. The value of the id attribute must be unique within the HTML document.
<div class="intro" style="background: lightblue; padding: 20px;">
This intro section is styled by its class.
</div>
<div id="unique" style="background: lightgreen; padding: 20px;">
This div has a unique id.
</div>Summary of Common Attributes
| Attribute | Used On | Description |
|---|---|---|
href |
<a> |
URL the link points to |
src |
<img>, <script>, <iframe> |
Path to the resource |
alt |
<img> |
Alternative text if resource can't load |
width / height |
<img>, <video>, <iframe> |
Size in pixels |
title |
Any element | Tooltip text |
style |
Any element | Inline CSS styles |
class |
Any element | CSS class name(s) |
id |
Any element | Unique identifier |
lang |
<html> |
Language of the page |
name |
<input>, <form>, <meta> |
Name of the element |
value |
<input>, <option> |
Value of the element |
placeholder |
<input>, <textarea> |
Hint text |
required |
<input>, <textarea>, <select> |
Must be filled before submit |
target |
<a> |
Where to open the link |
disabled |
<input>, <button>, <select> |
Makes element non-interactive |
Knowledge Check
4 questions — test your understanding
What does the href attribute do?
What is the purpose of the alt attribute on images?
Which attribute makes an input field required before form submission?
What is the difference between class and id?
Next: HTML Headings