HTML Attributes Tutorial for Beginners – Simple Explanation

HTML attributes give extra information about HTML elements. They help you customize how things look and behave. Think of them like settings or options for each tag.

What Are HTML Attributes?

All HTML elements can have attributes
Attributes provide extra information about an element
Attributes are always written inside the start tag (never the closing tag)
Attributes usually come in name/value pairs like name="value"

Basic Attribute Syntax

<tagname attributename="value">Content</tagname>

The href Attribute (for Links)

The <a> tag creates a link. The href attribute tells the browser where that link should go. Without it, a link does nothing.

Example

<a href="https://www.google.com">Click here to go to Google</a>

Try it Yourself

The href can also link to other pages on your own site, like href="about.html" or href="/contact.html".

The src Attribute (for Images)

The <img> tag embeds an image. The src attribute tells the browser where the image file is located. Without it, you just get a broken icon.

Example

<img src="my-picture.jpg">

There are two ways to write the URL in the src attribute:

Absolute URL – Points to an image on another website. Example: src="https://example.com/images/cat.jpg". But be careful. External images can disappear or change without warning. Also, some images are copyrighted so you might not have permission to use them.

Relative URL – Points to an image inside your own website. Example: src="images/cat.jpg". This is almost always better. Your images will not break if you change your domain name later.

Tip: Always use relative URLs for your own images. Keep your images in a folder called “images” right next to your HTML file. That keeps things organized.

The width and height Attributes

These attributes control how big your image appears on the page. The values are in pixels.

Example

<img src="dog.jpg" width="400" height="300">

Try it Yourself

If you only set width, the height will adjust automatically to keep the image looking right. But setting both gives you more control.

The alt Attribute (for Images)

The alt attribute provides a text description of an image. It shows up if the image fails to load. It also helps people who use screen readers (software that reads web pages out loud).

Technically, the alt attribute is required. Always include it.

Example

<img src="sunset.jpg" alt="Orange sun setting over the ocean">

Now watch what happens if the image cannot be found:

See how the alt text shows up instead? That is why it matters.

The style Attribute (Add Some Flavor)

The style attribute lets you add CSS styles directly to an element. You can change colors, fonts, sizes, and more.

Example

<p style="color:red;">This paragraph is red.</p>
<p style="font-size:20px;">This text is bigger.</p>
<p style="background-color:lightblue;">This has a blue background.</p>

Try it Yourself

Later you will learn better ways to style pages, but the style attribute is great for quick experiments.

The lang Attribute (Set Your Language)

You should always add the lang attribute to your <html> tag. It tells browsers and search engines what language your page is written in. This helps with translation tools and screen readers.

English page example:

Example

<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>

You can also add a country code:

English in the US

<html lang="en-US">

Spanish in Mexico

<html lang="es-MX">

French in France

<html lang="fr-FR">

You can look up language codes online if you need something specific.

The title Attribute (Tooltips)

The title attribute adds a little tooltip. When someone hovers their mouse over the element, the text pops up.

Example

<p title="I am a secret tooltip">Hover your mouse over this paragraph.</p>

Try it Yourself

Go ahead, hover over the text in the preview. See the tooltip appear? That is the title attribute.

Always Use Lowercase for Attribute Names

Technically, HTML does not care if you use uppercase or lowercase. HREF and href both work. But almost every developer uses lowercase. It is the standard. It looks cleaner. Stick with lowercase.

Good: <a href="page.html">

Not great: <a HREF="page.html">

Always Quote Your Attribute Values

HTML does not strictly require quotes, but you should use them anyway. Without quotes, things break if your value has a space.

Good (with quotes):

<a href="https://www.google.com">Google</a>

Bad (no quotes, will cause problems):

<a href=https://www.google.com>Google</a>

Double quotes are most common. But single quotes work too. Use double quotes unless you have a good reason not to.

Sometimes you need both. For example, if your attribute value has double quotes inside it, wrap everything in single quotes:

<p title='John "Shotgun" Nelson'>Some text</p>

Or the other way around:

<p title="John 'Shotgun' Nelson">Some text</p>

Quick Summary

Attributes go in the start tag, not the closing tag
The href attribute tells links where to go
The src attribute tells images where to load from
The width and height control image size
The alt attribute provides a text backup for images
The style attribute adds quick CSS styles
The lang attribute declares your page language
The title attribute creates tooltips on hover
Always use lowercase attribute names
Always put quotes around attribute values (double quotes preferred)

Tip: Open VS Code and practice adding attributes to your HTML elements. Make a link with href. Add an image with src, alt, width, and height. Add a title tooltip. Break things on purpose to see what happens. That is how you learn.