Document foundations · Lesson 3 of 16

Attributes and character references

id, class, data-* and reserved characters.

8 minutes2 games

An id identifies one element within a document; classes label reusable groups. data-* stores custom string data on an element. Write < to display < as text and & to display &.

HTML

<article id="lesson-1" class="lesson featured" data-level="beginner">
  <h2>HTML &amp; CSS</h2>
  <p>Write &lt;p&gt; to start a paragraph.</p>
</article>
<button type="button" disabled>Coming soon</button>

Tool	Use
`id`	Unique in the document
`class`	Reusable class names
`disabled`	Boolean attribute: presence enables it

Quick question

How do you enable a disabled button?

Exercise

Create a p with id intro and classes note and featured.

HTML

Learn more from

Played 0 of 2 games

HTML

Document foundations · Lesson 3 of 16

Attributes and character references

id, class, data-* and reserved characters.

8 minutes2 games

An id identifies one element within a document; classes label reusable groups. data-* stores custom string data on an element. Write < to display < as text and & to display &.

HTML

<article id="lesson-1" class="lesson featured" data-level="beginner">
  <h2>HTML &amp; CSS</h2>
  <p>Write &lt;p&gt; to start a paragraph.</p>
</article>
<button type="button" disabled>Coming soon</button>

Tool	Use
`id`	Unique in the document
`class`	Reusable class names
`disabled`	Boolean attribute: presence enables it

Quick question

How do you enable a disabled button?

Exercise

Create a p with id intro and classes note and featured.

HTML

Learn more from

Played 0 of 2 games