Lesson 5 of 30

HTML Attributes

2 min read · Free · No login needed

Attributes give extra information about an element. They always sit inside the start tag, in the form name="value". The value is usually written inside double quotes.

Common attributes

href — the address a link goes to: <a href="https://kamaldnp.com">Visit us</a>
src — the file an image or script loads: <img src="photo.jpg">
alt — text shown if an image cannot load, and read by screen readers.
width and height — the size of an image in pixels.
title — a small tooltip that appears when the mouse hovers over the element.
style — CSS written directly on the element.

Quotes matter

Always put attribute values in quotes. Double quotes are the standard. Single quotes also work, but mixing them or leaving them out causes bugs — especially when the value itself contains spaces. For example, href=https://kamaldnp.com without quotes may work, but title=My Photo without quotes breaks, because the browser reads only My as the value.

Every element has attributes

Almost every HTML element accepts the global attributes — id, class, style, and title. You will use id and class constantly when you start styling pages with CSS, so remember them now.

Tip: Attribute names are not case-sensitive, but the convention is to write them in lowercase: href, not HREF.

Example

<!DOCTYPE html>
<html>
<head>
<title>Attributes</title>
</head>
<body>

<a href="https://kamaldnp.com" title="Visit KAMALDNP">KAMALDNP Academy</a>
<p><img src="logo.png" alt="KAMALDNP logo" width="120" height="120"></p>

</body>
</html>

Output

Output — how it looks in the browser

Try it yourself: copy the code above into a file named test.html, open it in your browser, and change the text to see what happens. That is how you learn — by changing things and watching the result.

HTML Elements HTML Headings