Attributes - HTML Tutorial

Attributes modify the behavior or appearance of an HTML element. They allow you to control styles, link destinations, and other properties. An element with attributes generally looks like this:

<name attribute1="value1" attribute2="value2" ... >
  ... content or other elements ...
</name>

• attribute: The name of the attribute you want to apply. Attribute names are case-insensitive: STYLE, style, and sTyLE all work the same.

• value: The specific setting for the attribute. Case may matter depending on the attribute. For example, URLs are case-sensitive on some servers.

For example, you can use the style attribute to control the background color of a webpage, as in “Changing the Background Color”. Here’s another common example, the href attribute:

<a href="https://www.yahoo.com">Go to Yahoo!</a>

The a element (anchor) creates a hyperlink. The href attribute specifies the link destination. Clicking the “Go to Yahoo!” link will open Yahoo! in your browser.

Rules for Attributes

• Elements can have multiple attributes. The order of attributes doesn’t matter.
• Each element allows only certain attributes. You cannot freely assign any attribute to any element.
• Whitespace between attributes is ignored. You can use spaces, tabs, or line breaks to make your code more readable:

<a href="https://www.gutenberg.org" style="background: yellow">Public Domain Books</a>

• Attribute values are usually case-sensitive. For example:

<a href="https://www.cnn.com/index.php">Go to CNN</a>

<a href="HTTPS://WWW.CNN.COM/INDEX.PHP">Go to CNN</a>

The second link may not work correctly because URLs can be case-sensitive.

• Always quote attribute values, especially if they contain spaces or special characters. For example, href="https://example.com/my page.html".
• Browsers ignore incorrect attributes. Misspelled attribute names or invalid values have no effect. For example, hhref or backgrounde: yellow will be ignored, but a mistyped URL may cause a link to fail.