Skip to content
Lucia LADDERHTML Fundamentals Chapter 02Loading learning progress…
HTML-02-02 · LESSON 2 / 4 · ± 9 MINUTES
Understanding Attributes
After this lesson, you can add id, class, and title attributes with appropriate values to opening tags.
BEGIN WITH A QUESTION
Understanding begins with a question.
Two boxes can both be called ‘box’ while having different labels. Attributes add information to an element without changing its element type.
Add id, class, and title attributes with appropriate values to opening tags.
UNDERSTAND THE CONCEPT
Name, equals sign, value
In <p id="ringkasan">...</p>, id is the attribute name and ringkasan is its value. Attributes appear in the opening tag, separated by spaces. Quote values consistently, especially when they contain spaces.
Identity and groups
Id uniquely identifies one element in a document. Class names groups and can be shared by many elements; one element may also have several space-separated classes. Neither automatically applies a visual style.
Title is supplementary information
The title attribute can provide extra information, often displayed when the mouse rests over an element. Do not make it the only source of important information: touch and keyboard users may not find it. The title attribute is different from the <title> element in head.
EXAMPLE / CONTEXT
Examples clarify concepts.
HTML EXAMPLE
<h2 id="koleksi">Selected Books</h2>
<p class="catatan" title="This week's reading choices">A book about city gardens.</p>
<p class="catatan">A book about the night sky.</p>BROWSER RESULT
Koleksi uniquely identifies the heading. Two paragraphs share the catatan class. All important information also remains visible as text.
TRY TOGETHER
Practice clarifies understanding.
<p ="catatan">Bring your favorite book.</p>Show a hint
A group is requested, not a unique identity.
Try as often as you need. The independent task that follows records lesson completion.
WRITE · OBSERVE · UNDERSTAND
Label the noticeboard
Give h2 id="pengumuman". Give both paragraphs class="catatan". Add title="Bring a water bottle" to the first paragraph; that information must also remain in the paragraph text.
Editor shortcuts & help
- Ctrl + Space
- Show suggestions · ↑ ↓ select · Enter accept · Esc close
- Shift + Alt + F
- Format code
- Ctrl/⌘ + F
- Find and replace text
- Ctrl/⌘ + [ / ]
- Decrease / increase indentation
- Tab
- Move focus; inside a snippet, move to the next field. Esc then Tab to exit.
- Ctrl/⌘ + Z
- Undo changes, including formatting
Suggestions use the language, snippets, and local code context. Formatting runs in your browser.
Ctrl/⌘ + Enter runs the preview. Preview uses reading styles. Scripts and form submission are disabled. Sample illustration: assets/observatory.svg.
STEP-BY-STEP HINTS
- All attributes appear before > in the opening tag.
- One element can have several attributes: <p class="catatan" title="...">.
TAKE THIS UNDERSTANDING WITH YOU
Practice gives a foundation.
- Attributes are written in the opening tag.
- Id is unique per document; class can repeat.
- The title attribute supplements information rather than replacing text or labels.
A lesson is complete when the independent task meets its goals. Return to the reading at any time.
Next lesson →