Introduction to HTML Attributes
If you’re just starting with HTML, you’ve probably seen strange things like href="..." or alt="..." inside tags and wondered what they mean. These are HTML attributes, and they control how your elements behave, look, and describe themselves.
In this article, you’ll learn what attributes are, how to read and write them, and how to use some of the most common ones. You’ll type real code, see what it does, and be able to modify it yourself.
What is an HTML Attribute?
HTML pages are built from elements like <p>, <a>, <img>, and many more. Attributes are extra information you add to these elements to change how they work.
Think of an element as a basic object (like a car) and attributes as the settings (color, speed, music volume). The car is still a car, but the attributes make it unique.
Here’s a simple example:
<a href="https://example.com">Visit Example</a>
<a>is the element (a link)href="https://example.com"is an attributehrefis the attribute name"https://example.com"is the attribute value
The attribute tells the browser where the link should go when clicked.
Basic Attribute Rules
Before we start coding, there are a few simple rules:
Attributes go inside the opening tag:
<tagname attribute="value">Content</tagname>Use lowercase names (like
href,alt,id). Browsers are forgiving, but lowercase is standard.Put values in quotes:
title="My Page" class="button primary"Separate multiple attributes with spaces:
<img src="cat.jpg" alt="A cute cat" width="300">
Now let’s use these rules in practice.
Example 1: Adding a Link with href and target
We’ll start with a simple HTML page and add a link using attributes.
<!DOCTYPE html>
<html>
<head>
<title>My First Attributes</title>
</head>
<body>
<!-- A simple heading -->
<h1>Welcome to My Page</h1>
<!-- A link with two attributes -->
<a href="https://www.wikipedia.org" target="_blank">
Visit Wikipedia
</a>
</body>
</html>
What’s happening here?
href="https://www.wikipedia.org"tells the browser the destination URL of the link.target="_blank"tells the browser to open the link in a new tab.
If you open this file in your browser and click the link, Wikipedia will open in a new tab. You just used your first attributes successfully.
Try it yourself
- Create a file named
links.htmlon your computer. - Copy the code above into it and save.
- Double-click the file to open it in your browser.
- Change the URL in
hrefto another site you like, such ashttps://www.mozilla.org.
You’ll see how one small attribute value change completely changes where the link goes.
Example 2: Images with src, alt, width, and height
Images use attributes a lot. Let’s add an image to your page.
<!DOCTYPE html>
<html>
<head>
<title>Image Attributes</title>
</head>
<body>
<h1>My Favorite Animal</h1>
<!-- An image element with helpful attributes -->
<img
src="https://via.placeholder.com/300x200"
alt="Placeholder image of a gray rectangle"
width="300"
height="200"
>
</body>
</html>
What each attribute does:
src(source): the web address of the image.alt(alternative text): text shown if the image can’t load; also read aloud by screen readers for people who are blind or have low vision.widthandheight: control the size of the image (usually in pixels).
Try breaking the src on purpose, like:
src="https://via.placeholder.com/does-not-exist"
The image won’t load, but you should see the alt text instead. That’s exactly why alt is important.
Try it yourself
Change the values:
- Use a different image URL in
src(maybe a photo you’ve uploaded or found online). - Adjust
widthandheightto see how the displayed size changes.
Notice how you didn’t change the <img> tag itself—only its attributes. Yet the final result is completely different.
Example 3: Identifying and Grouping Elements with id and class
Attributes aren’t just for links and images. Two of the most powerful attributes are id and class. They don’t change how things look by themselves, but they let you identify and group elements so you can style them with CSS or interact with them using JavaScript later.
Let’s see them in action:
<!DOCTYPE html>
<html>
<head>
<title>IDs and Classes</title>
<style>
/* Style all elements with class="button" */
.button {
background-color: #4CAF50; /* green */
color: white;
padding: 10px 15px;
text-decoration: none; /* remove underline */
}
/* Style the element with id="main-title" */
#main-title {
color: #333;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<!-- This heading has a UNIQUE id -->
<h1 id="main-title">My First Styled Page</h1>
<!-- These two links share the SAME class -->
<a href="#" class="button">Primary Action</a>
<a href="#" class="button">Secondary Action</a>
</body>
</html>
What’s happening here?
id="main-title"gives that specific<h1>a unique identifier.class="button"groups the links together so they can share the same style.- In the
<style>section, we use CSS:.button { ... }targets all elements withclass="button".#main-title { ... }targets the element with thatid.
This shows how attributes connect HTML to CSS.
Try it yourself
- Change the
background-colorin.buttontoblueorred. - Add another
<a href="#" class="button">Another Button</a>and see it get the same style automatically. - Change the
idname in the HTML but forget to change it in the CSS, and notice how the style disappears. This helps you see how the link between them works.
Example 4: Making Forms Usable with name, value, and placeholder
Forms are how users send information (like login details or search terms). Attributes are crucial for making forms clear and usable.
<!DOCTYPE html>
<html>
<head>
<title>Form Attributes</title>
</head>
<body>
<h1>Contact Form</h1>
<form>
<!-- Text input with helpful attributes -->
<label for="username">Your Name:</label>
<input
type="text"
id="username" <!-- connects label to input -->
name="username" <!-- name used when form is sent -->
placeholder="Enter your full name" <!-- hint text -->
>
<br><br>
<!-- Submit button with a value -->
<input
type="submit"
value="Send Message" <!-- text shown on the button -->
>
</form>
</body>
</html>
What the attributes do:
type="text"tells the browser this is a text field.id="username"gives the input a unique identifier.name="username"is the key that will be used when the form data is sent.placeholder="Enter your full name"shows light gray hint text.type="submit"andvalue="Send Message"create a submit button with text.
Even though we’re not actually sending the form anywhere yet, this structure already feels like a real form because of the attributes.
Try it yourself
- Change the
placeholdertext to something more fun. - Change
value="Send Message"to"Contact Me"and see the button label change. - Add another input:
<input type="email" name="email" placeholder="Your email address">
You’re now using attributes to make forms understandable to both users and the browser.
Common Attribute Mistakes (and How to Avoid Them)
As a beginner, you might run into a few common issues:
Forgetting quotes around values
<!-- Bad --> <a href=https://example.com> <!-- Good --> <a href="https://example.com">Misspelling attribute names
hferinstead ofhrefsreinstead ofsrc
If something doesn’t work, carefully check the attribute spelling.
Putting attributes in the wrong place Attributes must be inside the opening tag, not after it.
<!-- Bad --> <a> href="https://example.com"</a> <!-- Good --> <a href="https://example.com">Link</a>
Being careful with small details goes a long way in HTML.
Quick Recap and What’s Next
You’ve just taken a big step into real HTML coding. Here’s what you learned:
- Attributes are extra information inside an element’s opening tag.
- They follow the pattern
name="value"and are separated by spaces. - Attributes like
href,src, andaltcontrol links and images. idandclasshelp you identify and group elements for styling and scripting.- Form attributes like
type,name, andplaceholdermake inputs useful and user-friendly.
From here, a good next step is to:
- Build a small personal page with links, images, and a contact form.
- Experiment with changing attribute values and noticing the results.
- Look up other useful attributes like
title,disabled, andrequiredwhen you need them.
Every time you write an HTML tag, ask yourself: Should this have attributes? As you practice, attributes will start to feel natural—and you’ll have much more control over your pages.
