HTML Attributes

HTML attributes give extra information about elements. Here are the key points:

All HTML elements can have attributes.
Attributes give additional information about an element.
Attributes always go in the start tag.
Attributes usually come in name/value pairs, like name="value".

The href Attribute

The <a> tag makes a hyperlink. Its href attribute sets the URL the link goes to.

Example

A link to the PromptCookbook website.

A page with a hyperlink made with the a tag whose href points to https://prompt-cookbook.com with the link text "Visit PromptCookbook".

> Output: complete HTML page

Prompt

A page with a hyperlink made with the a tag whose href points to https://prompt-cookbook.com with the link text "Visit PromptCookbook".

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Href</title>
</head>
<body>

<a href="https://prompt-cookbook.com">Visit PromptCookbook</a>

</body>
</html>

The src Attribute

The <img> tag puts an image on the page. Its src attribute sets the path to the image.

There are two ways to write the path. An absolute URL points to an image on another website, like https://prompt-cookbook.com; note that external images may be under copyright and can change or disappear without warning. A relative URL points to an image on your own site and leaves out the domain name, like img_girl.jpg (relative to the current page) or /images/img_girl.jpg (relative to the domain).

Tip: Relative URLs are almost always best, because they keep working if you change domain.

Example

An image set with just the src attribute.

A page that embeds an image with the img tag using only the src attribute set to "img_girl.jpg".

> Output: complete HTML page

Prompt

A page that embeds an image with the img tag using only the src attribute set to "img_girl.jpg".

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Src</title>
</head>
<body>

<img src="img_girl.jpg">

</body>
</html>

The width and height Attributes

The <img> tag should also have width and height attributes, which set the image's size in pixels.

Example

An image with a set width and height.

A page with an image (img tag, src "img_girl.jpg") that sets its size with the width="500" and height="600" attributes (pixels).

> Output: complete HTML page

Prompt

A page with an image (img tag, src "img_girl.jpg") that sets its size with the width="500" and height="600" attributes (pixels).

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Width Height</title>
</head>
<body>

<img src="img_girl.jpg" width="500" height="600">

</body>
</html>

The alt Attribute

The alt attribute on <img> is required. It gives alternate text shown when the image cannot load, such as on a slow connection, when the src is wrong, or for someone using a screen reader.

With a working image

An image with alt text.

A page with an image (src "img_girl.jpg") that includes the required alt attribute "Girl with a jacket" as alternate text.

> Output: complete HTML page

Prompt

A page with an image (src "img_girl.jpg") that includes the required alt attribute "Girl with a jacket" as alternate text.

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alt</title>
</head>
<body>

<img src="img_girl.jpg" alt="Girl with a jacket">

</body>
</html>

When the image is missing

The alt text is shown because the image does not exist.

A page that tries to show an image that does not exist (src "img_typo.jpg") so the alt text "Girl with a jacket" is shown instead.

> Output: complete HTML page

Prompt

A page that tries to show an image that does not exist (src "img_typo.jpg") so the alt text "Girl with a jacket" is shown instead.

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alt Error</title>
</head>
<body>

<img src="img_typo.jpg" alt="Girl with a jacket">

</body>
</html>

The style Attribute

The style attribute adds styles to an element, such as color, font, and size.

Example

A paragraph styled to be red.

A page with a paragraph that uses the style attribute to make its text red: "This is a red paragraph."

> Output: complete HTML page

Prompt

A page with a paragraph that uses the style attribute to make its text red: "This is a red paragraph."

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Style</title>
</head>
<body>

<p style="color:red;">This is a red paragraph.</p>

</body>
</html>

The lang Attribute

You should always put the lang attribute on the <html> tag to state the page's language. This helps search engines and browsers.

You can also add a country code: the first two letters set the language and the last two set the country. For example, en is English and en-US is English as used in the United States.

Language only

Declaring English with lang="en".

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

Language and country

Declaring English (United States) with lang="en-US".

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

The title Attribute

The title attribute gives extra information about an element. Its value is shown as a tooltip when you hover the mouse over the element.

Example

A paragraph with a tooltip.

A page with a paragraph that has a title attribute "I'm a tooltip", so hovering the paragraph shows that text as a tooltip. The paragraph reads "This is a paragraph."

> Output: complete HTML page

Prompt

A page with a paragraph that has a title attribute "I'm a tooltip", so hovering the paragraph shows that text as a tooltip. The paragraph reads "This is a paragraph."

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
</head>
<body>

<p title="I'm a tooltip">This is a paragraph.</p>

</body>
</html>

We Suggest: Always Use Lowercase Attributes

The HTML standard does not require lowercase attribute names, so title and TITLE both work. But PromptCookbook recommends lowercase, and stricter document types like XHTML demand it. PromptCookbook always uses lowercase attribute names.

We Suggest: Always Quote Attribute Values

The HTML standard does not require quotes around attribute values, but PromptCookbook recommends them, and XHTML demands them. Quotes are sometimes required: a value that contains spaces will not display correctly without them. PromptCookbook always quotes attribute values.

Missing quotes

A title value with spaces but no quotes, which does not display correctly.

A page showing why quotes matter: a paragraph whose title attribute value contains spaces but is written without quotes, so it does not display correctly. Use title=Description of PromptCookbook.

> Output: complete HTML page

Prompt

A page showing why quotes matter: a paragraph whose title attribute value contains spaces but is written without quotes, so it does not display correctly. Use title=Description of PromptCookbook.

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quote Error</title>
</head>
<body>

<p title=Description of PromptCookbook>This is a paragraph.</p>

</body>
</html>

Good

An attribute value wrapped in quotes.

<a href="https://prompt-cookbook.com">Visit our HTML tutorial</a>

Bad

The same attribute value without quotes.

<a href=https://prompt-cookbook.com>Visit our HTML tutorial</a>

Single or Double Quotes?

Double quotes around attribute values are the most common, but single quotes work too. When the value itself contains double quotes, wrap it in single quotes, and the other way around.

Example

Single and double quotes used around values that contain quotes.

A page with two paragraphs showing single vs double quotes around an attribute value that itself contains quotes: one title='John "ShotGun" Nelson' and one title="John 'ShotGun' Nelson".

> Output: complete HTML page

Prompt

A page with two paragraphs showing single vs double quotes around an attribute value that itself contains quotes: one title='John "ShotGun" Nelson' and one title="John 'ShotGun' Nelson".

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Single Double</title>
</head>
<body>

<p title='John "ShotGun" Nelson'>This paragraph uses single quotes.</p>
<p title="John 'ShotGun' Nelson">This paragraph uses double quotes.</p>

</body>
</html>

Chapter Summary

To recap: all elements can have attributes. The href of <a> sets a link's URL. The src of <img> sets the image path, and width and height set its size, while alt gives alternate text. The style attribute adds styling. The lang attribute on <html> declares the page language, and title gives extra information about an element.