HTML Attributes
Attributes give extra information about an HTML element.
What is an Attribute?
- Every HTML element can have attributes
- Attributes are always written in the start tag
- They usually come in name/value pairs like
name="value"
Example
<a href="https://www.workownix.com">Workownix</a>Here href is the attribute name and https://www.workownix.com is its value.
The href Attribute
The <a> tag makes a link. The href attribute says where the link goes.
Example
<!DOCTYPE html>
<html>
<body>
<p><a href="https://www.workownix.com">Go to the Workownix home page</a></p>
</body>
</html>The src, width and height Attributes
The <img> tag needs a src attribute with the path to the image. width and height set its size in pixels.
Example
<img src="images/biryani.jpg" alt="A plate of chicken biryani" width="400" height="250">The path can be:
| Type | Example | Meaning |
|---|---|---|
| Absolute URL | https://example.com/pic.jpg | An image on another website |
| Relative URL | images/pic.jpg | An image inside your own website folder |
Prefer relative URLs for your own images. They keep working if your domain name changes.
The alt Attribute
alt gives a text description of an image. Screen readers read it out for blind users, and the browser shows it if the image cannot load. Search engines also use it to understand the picture.
Example
<!DOCTYPE html>
<html>
<body>
<img src="missing-photo.jpg" alt="Students in a computer lab" width="300" height="180">
<p>The image file is missing, so the browser shows the alt text.</p>
</body>
</html>The style Attribute
style adds CSS directly to one element, for example a colour or a font size.
Example
<!DOCTYPE html>
<html>
<body>
<p style="color:green;">Admissions are open!</p>
<p style="font-size:20px;">Classes start on Monday.</p>
</body>
</html>You will learn more in the HTML Styles chapter.
The lang Attribute
Put the lang attribute on the <html> tag to tell browsers and search engines the language of the page.
Example
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>For a page in Urdu you would write lang="ur". It helps screen readers use the right pronunciation.
The title Attribute
title adds a small tooltip that appears when the mouse rests on the element.
Example
<!DOCTYPE html>
<html>
<body>
<p title="Monday to Saturday, 9 am to 9 pm">Hover over this line to see our timings.</p>
</body>
</html>Good Habits
- Write attribute names in lowercase:
href, notHREF. - Always put values inside double quotes:
width="300". - If the value itself contains double quotes, wrap it in single quotes:
title='He said "hello"'.
Common Attributes
| Attribute | Used on | Purpose |
|---|---|---|
href | <a> | The link address |
src | <img> | The image file |
alt | <img> | Text description of an image |
width, height | <img> | Size in pixels |
style | Any element | Inline CSS |
lang | <html> | Language of the page |
title | Any element | Tooltip text |
id, class | Any element | Names for CSS and JavaScript |
Exercise
Exercise
Where are attributes written?