Div, Span, ID & Class

After this lesson, you can use div and span for generic purposes while keeping ids unique and classes reusable.

BEGIN WITH A QUESTION

Understanding begins with a question.

After learning about semantic elements, is div forbidden? No. Sometimes a wrapper needs no additional meaning.

Use div and span for generic purposes while keeping ids unique and classes reusable.

UNDERSTAND THE CONCEPT

Generic elements remain useful

Div is a generic wrapper for a content group. Span is a generic marker within text or phrasing content. Neither automatically means ‘navigation’, ‘important’, or ‘article’. Choose a specific element when that meaning applies.

Id and class do not replace semantics

<div class="nav"> does not have the meaning of nav just because of its class name. CSS, JavaScript, and fragments can use class and id labels. Descriptive names help people read code, but the element still determines its basic semantics.

Consider the need before adding a wrapper

To mark a category label in a sentence, span class="kategori" is sufficient. To mark important content, strong is more appropriate. Use id when you need a unique identity and class for recurring groups.

EXAMPLE / CONTEXT

Examples clarify concepts.

HTML EXAMPLE

<div class="kelompok-buku">
  <p id="buku-langit">Sky Atlas <span class="kategori">Science</span></p>
  <p id="buku-kebun">City Garden <span class="kategori">Environment</span></p>
</div>

BROWSER RESULT

Div groups items, span marks category text, each item has a different id, and the kategori class is reused.

COMMON MISTAKES

<p id="buku">Sky Atlas</p>
<p id="buku">City Garden</p>

Two elements in one document cannot share an id. Use distinct ids, or use class when grouping elements.

TRY TOGETHER

Practice clarifies understanding.

Choose the generic element for part of a paragraph’s text.

<p>Topic: < class="kategori">Science</span></p>

Show a hint

Span marks text within a sentence.

Try as often as you need. The independent task that follows records lesson completion.

WRITE · OBSERVE · UNDERSTAND

Organize two reading cards

Keep div class="koleksi". Give the two paragraphs different ids: buku-langit and buku-kebun. Wrap Science and Environment separately in span class="kategori".

<div class="koleksi">
  <p id="buku">Sky Atlas — Science</p>
  <p id="buku">City Garden — Environment</p>
</div>

index.htmlHTMLLn 1, Col 14 lines2 spasi

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.

Document preview

Ctrl/⌘ + Enter runs the preview. Preview uses reading styles. Scripts and form submission are disabled. Sample illustration: assets/observatory.svg.

TAKE THIS UNDERSTANDING WITH YOU

Practice gives a foundation.

Div and span carry no specific meaning.
Class names do not replace semantic elements.
Keep ids unique; reuse classes when needed.

AttributeSemantic structure

A lesson is complete when the independent task meets its goals. Return to the reading at any time.

Connect with other concepts

HTML attribute °Semantic HTML °HTML element °

Library: Three languages behind one page ↗

Next lesson →