HTML Attributes | Names, Values and Useful Examples

Well, this is something you cannot really escape: HTML attributes are everywhere, waiting for you to enter a tag. They need not give you nightmares, though. Once you can spot an attribute’s name and value, the extra information starts to make sense. I am learning too, peeps, so let us take the useful ones a step at a time.

What Are HTML Attributes?

If someone promises to give you a ball, what is the first thing that comes to mind? What type is it? What colour is it? Those details tell you more about the ball. In a similar way, HTML attributes configure or describe an element. Not every element needs every attribute, and making up a name does not give it a built-in browser behaviour.

Here is a real example rather than the old imaginary football element. The label supplies a visible name for the input, while type and placeholder configure parts of its behaviour and presentation:

<label for="reader">Your name</label>
<input id="reader" type="text" placeholder="Type your name">

In type="text", the attribute name is type and the value is text. Put attributes inside the start tag, before its closing angle bracket. That bracket is not an end tag: </p>, for example, is a separate end tag for a paragraph. The input is a void element and has no closing input tag.

Use lowercase names and quoted values consistently while learning. Spaces around the equals sign are allowed, but keeping the same style makes mistakes easier to see. A placeholder is only a hint, not a replacement for the visible label. Once someone types, the label still needs to explain what belongs in the field.

HTML Attributes for Language: lang

You may have seen lang hanging around the html tag. It identifies the language of the content, which helps assistive technology choose an appropriate pronunciation. The declaration describes the text; it does not translate the page or restrict who can read it.

<html lang="en-US">

The language subtag en means English. The optional region subtag US gives a more specific regional designation; plain en can also be appropriate. Choose a valid language tag that matches your actual content. Where a passage changes language, you can mark the element containing that passage with its own lang value.

The title Attribute Is Not the Title Element

Do you remember the title element? Well, this is not it. A document’s title belongs in its head and names the document. The global title attribute supplies advisory information on an element, and many desktop browsers show that information in a tooltip when a pointer pauses over it.

<p title="This is an awesome movie website">Straight From a Movie</p>

Put that bit in an HTML file and open it in a browser. The original screenshot shows the hover result. However, touch users and people navigating with a keyboard may not receive it in the same way. Do not put essential instructions, a required form label or the only explanation of a link inside a tooltip.

HTML Attributes for Links: href

Wondering how to show a link on your website? You must meet Mr. a element, then. Its href attribute supplies the destination. The text between the start and end tags gives the reader something meaningful to activate.

<a href="https://straightfromamovie.com/">Straight From a Movie</a>

When you save the file and view it in a browser, the words become a link. Activating it navigates to the specified destination. Go ahead and give it a shot! I hear it is a great website. This example stays in the same browsing context; a new tab is a separate choice, not something that href itself promises.

Image Attributes: src and alt

Working with images? The img element is another useful piece of the puzzle. In this simple example, src points to a file and alt provides its text alternative. Keep soar.jpg next to the HTML file for that relative path to work, or adjust the path to your actual folder structure.

<img src="soar.jpg" alt="Songs of a Ruin book cover">

Alternative text is not merely a message for a broken download. It also conveys the image’s purpose to people who cannot see it. A meaningful cover can be described as a cover; a purely decorative image normally gets an empty alt="". If an image is the only content of a link, its alternative text should communicate the link’s purpose. Avoid adding the same nearby explanation again just to fill the attribute.

That is it? That is it! No closing tag here: img is a void element. The original image result appears below. A working file path and a useful description are more important than making the example look clever.

Width, Height and an Image That Does Not Stretch

Notice how the old image appeared at its own dimensions. Can we primp and preen it to fit? Of course. Numeric HTML width and height values describe dimensions in CSS pixels, but an unrelated pair can distort the picture. The old square example below is not automatically an improvement over the cover’s natural proportions.

Use dimensions that match the source’s aspect ratio when supplying both values. For a simple responsive presentation, CSS such as max-width: 100%; height: auto; lets an image shrink with its container while retaining its proportions. Do not add a literal percent sign to a numeric HTML width attribute and treat it as the same syntax as a CSS percentage.

Using style with a span

Did you know you could colour part of a sentence? The span element can group that text, and a style attribute can apply CSS declarations to it. Style is a global attribute, not a special power that belongs only to span. Without styling, span does not automatically make anything blue.

<span style="color: blue">blue</span>

The attribute still has a quoted value, but inside that value the CSS property and value are separated by a colon: color: blue. Close the span after the words you want to affect. For repeated formatting across a site, a class and a stylesheet are easier to maintain than copying the same inline declaration into every element.

The Link Exercise: Two Different Answers

Almost thought I was a teacher for a second! The original exercise mixed two requests together: a text link that opens a picture, and a picture that is itself clickable. Both are possible, but they are not identical. Start with the first one: show text, then navigate to the image file when it is activated.

<a href="soar.jpg">View the Songs of a Ruin cover</a>

If you want the image itself to be the clickable content instead, put it inside the anchor. In this version the alternative text identifies what the link offers:

<a href="soar.jpg"><img src="soar.jpg" alt="View the Songs of a Ruin cover"></a>

Replace soar.jpg with the location of your own image. Save the file, reload it and check the result. The browser may display an image destination directly; you do not need another HTML document just to link to that file. A separate page is useful if you want a heading, explanation or other content around it. Exercise vanquished!

Quoted Values and Boolean Attributes

Do you notice how we have used double quotes throughout? HTML permits single-quoted values too, and some values can be unquoted under strict syntax rules. That does not make HTML magically smart or repair a value containing spaces. Quoting values consistently is the clearer beginner habit, and it avoids accidentally turning part of a value into another attribute.

A different rule applies to boolean HTML attributes such as disabled. Their presence turns the feature on; the string false does not turn it off. The following button remains disabled:

<button type="button" disabled="false">Still disabled</button>

Remove the attribute to enable that button. Do not generalise this rule to every attribute: a normal text-valued attribute and a boolean attribute are different cases. When you need the exact quoting rules, the HTML standard’s attribute syntax section is the authoritative reference.

One Final Word on HTML Attributes

This chapter gives you the gist, not a catalogue of every attribute. Keep asking what an element means, which attribute it supports and what value is expected. That is more useful than memorising a bag of words and hoping the browser guesses your intention.

For another small example you can build on, read our HTML button tutorial. Keep your file paths honest, your descriptions useful and your quotes paired. Later, dude!