MP Web Studio
HTMLFoundation track
87 / 120

LESSON 87 OF 120

Build: useful global attributes

Identify a section with id, class and a data attribute.

Official sourceWHATWG HTML — global attributesReviewed: 2026-08-26
STEP 1 · LEARN

How it works

Identify a section with id, class and a data attribute. Semantic structure should describe meaning, not visual appearance.

Correct example
<section id="services" class="service-list" data-kind="commercial"><h2>Services</h2><p>Web solutions for businesses.</p></section>

The id uniquely identifies an element in the document, class associates it with one or more groups, and data-kind stores page-specific information. The h2 still describes the section’s meaning.

Common mistake
<section id="services" class="" data-kind=""><h2>Services</h2></section>

The id has a value, but class and data-kind are empty, so the element is not fully identified for styling or page data.

STEP 2 · APPLY

Your exercise

Complete the example. Identify a section with id, class and a data attribute.

STEP 3 · BUILD

Write and see the result

index.htmlHTML
Safe resultisolated
The draft stays only in this browser.HTML and CSS allowed · scripts and network blocked
STEP 4 · CHECK

What needs to pass

0%not checked
  • The section has a non-empty id.
  • The section has a non-empty class.
  • The section has a non-empty data-kind.
  • The section keeps its heading.
Explain the solution logic

Complete all three attributes with non-empty values. You may choose names different from the example if they describe the section coherently.