HTML: HTML Attributes

Page markup information can have many subtleties and nuances. For example, you can specify the type of element, but you can also pass additional information to be processed by the browser. Mouse over the text below:

When you mouse over an element, a small window will appear saying "Tooltip. Here you can specify additional information". This behavior is set using attributes - special structures that can affect the output of information on the page. Each tag in HTML has several standard attributes, which are written based on this template: attribute="value":

• Attribute is the name of the attribute. The title attribute was used to make the tooltip appear
• Value is the value of the attribute. It can be different, depending on the attribute itself. In this example, the text to be displayed when hovering over the item was used as the value.

Here's the example text from above, but with the markup:

<p title="Tooltip. Here you can specify additional information">Mouse over this line of text. It's better to do it from a computer.</p>

The title attribute can be used on any page element, not just paragraphs. These attributes are called global attributes, because they do not depend on the element. In contrast, there are attributes that are unique to one or more tags. For example, the attribute colspan which specifies the number of cells joined together in a table. Using it on anything other than a table makes no sense.

Attributes can implicitly affect the information output. For example, when using the CSS style language, there is an attribute called class, whose task is to separate similar elements from each other using the value of the attribute. You will learn how classes work in our CSS course, but for now it is important to know that this attribute does not show up in any way when information is displayed on the page.

<p class="lead">Lead class paragraph</p>
<p class="mega-paragraph">Mega-paragraph class paragraph</p>

One tag can have several attributes at once. They're written successively, and the order in which they are written does not matter:

<p class="text-center" title="This element has multiple attributes">Paragraph with multiple attributes</p>

In this lesson, we explored the concept of attributes and their notation. We learned how title and class attributes work, and that attributes can be either global or unique to HTML elements. Global attributes can be used for any tag, while unique attributes can only be used for specific ones.

Instructions

Create a paragraph with any text and a tooltip. Add the class hexlet to it.

Tips

• All global attributes can be viewed on MDN Web Docs