Topic: HTML Basics

HTML attributes

Summary

Pseudocode:

<!-- General form -->
<element attribute-name="attribute-value"> </element>

Details

When reading or writing HTML code, you will sometimes see tags that contain attributes. Attributes allow you to attach extra information to an element that isn’t necessarily visible to the user viewing your HTML page.

As you can see in the example above, attributes consist of a name and a value, separated by an equal sign. The attribute value is wrapped in quotes. An element can have one or more attributes at a time.

For an element with opening and closing tags, attributes are placed in the opening tag after the element symbol, as in the example below:

<!-- Anchor element with href attribute -->
<a href="https://example.com/">Sample link</a>

For elements with a self-closing tag, attributes are placed within the single self-closing tag after the element symbol, as in the example below:

<!-- Image element with src attribute -->
<img src="img/my-picture.jpg">

Types of attributes

There are many types of attributes besides the ones shown here. Here’s a brief overview of the attributes we’ve shown so far. The href attribute is used with the anchor element to specify URLs to other web pages. The src attribute is used with the image element to specify the file path to the image you want to display.

Some elements require the use of certain attributes. The image element, for example, requires the src attribute.

Multiple attributes

<!-- Image element with src attribute -->
<img src="img/my-picture.jpg" alt="Text description of picture...">

If your element needs multiple attributes, as in the example above, you can simply separate them with a space.

References

HTML basics on MDN