Web Development - HTML Attributes
HTML Attributes
HTML attributes give extra information about an element.
They are written inside the opening tag as name="value".
Think of attributes as small settings that change how an element works or looks.
Basic Syntax
Some HTML elements need attributes to do their job.
For example, the <a> element creates a link, and the
href attribute tells the browser where the link should go:
Example
Using the href attribute on a link:
<a href="https://www.w3schools.com">Visit W3Schools</a>
Try it Yourself »
- Attributes go inside the opening tag.
- Most attributes use
name="value"format. - Always use quotes around values (double quotes are most common).
Common HTML Attributes
Here are some attributes you will use often:
| Attribute | Used On | Purpose |
|---|---|---|
href |
<a> |
Link destination (URL) |
src,
alt,
width,
height
|
<img> |
Image file, fallback text, and size |
lang |
<html> |
Language of the document (for example: en) |
title |
Most elements | Tooltip text shown on hover |
style |
Most elements | Inline CSS styling |
id, class |
Most elements | Unique styling / group styling |
Attributes in Action
Images often use several attributes together.
src selects the picture,
alt shows helpful text if the image cannot load,
and width/height set the size.
Quoting Attribute Values
Attribute values should always be wrapped in quotes. Double quotes are most common, but single quotes also work:
Example
<p title="This is a greeting">Hello</p>
<p title='This is also a greeting'>Hello</p>
Try it Yourself »
Inline Styles
The style attribute lets you change how an element looks.
You will learn much better ways to style pages later, but this is useful for small tests:
id and class
Use id for one special element,
and class for elements that share the same style.
These two attributes are very important when you start working with CSS.
Example
<h1 id="site-title">My Site</h1>
<p class="lead">Welcome!</p>
<p class="lead">Enjoy your stay.</p>
Try it Yourself »
Tip: Use an id only once per page. Choose clear names like main-nav or hero.
Note: You will use class a lot when you learn CSS.
Summary
- Attributes go inside the opening tag.
- They follow the
name="value"format. - Some attributes work only with certain elements (like
hreffor links). - Many attributes work on almost everything (like
id,class,title,style).
Next, you will learn how to change colors, fonts, and alignment using HTML Styles.
