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:
Mouse over this line of text. It's better to do this from a computer
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
titleattribute 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
The exercise doesn't pass checking. What to do? 😶
If you've reached a deadlock it's time to ask your question in the «Discussions». How ask a question correctly:
- Be sure to attach the test output, without it it's almost impossible to figure out what went wrong, even if you show your code. It's complicated for developers to execute code in their heads, but having a mistake before their eyes most probably will be helpful.
In my environment the code works, but not here 🤨
Tests are designed so that they test the solution in different ways and against different data. Often the solution works with one kind of input data but doesn't work with others. Check the «Tests» tab to figure this out, you can find hints at the error output.
My code is different from the teacher's one 🤔
It's fine. 🙆 One task in programming can be solved in many different ways. If your code passed all tests, it complies with the task conditions.
In some rare cases, the solution may be adjusted to the tests, but this can be seen immediately.
I've read the lessons but nothing is clear 🙄
It's hard to make educational materials that will suit everyone. We do our best but there is always something to improve. If you see a material that is not clear to you, describe the problem in “Discussions”. It will be great if you'll write unclear points in the question form. Usually, we need a few days for corrections.
By the way, you can participate in courses improvement. There is a link below to the lessons course code which you can edit right in your browser.
Hi! I'm Tota, and my job is to help you learn. To activate me, please sign up or log in if you already have an account
Your exercise will be checked with these tests:
1const { test } = require('tests');
2
3test(({ query, expect }) => {
4 const elements = query(document, 'p', HTMLElement);
5 expect(elements).to.have.attr('title').match(/,*/);
6 expect(elements).to.have.attr('class', 'hexlet');
7});
8Teacher's solution will be available in:
