Day 2: Block vs Inline & Global Attributes

Daily Objective

Differentiate block-level from inline-level elements and use global attributes effectively.

1. Block vs Inline Elements

• Block Elements (<div>, <p>, <h1>-<h6>, <section>): Start on a new line and stretch horizontally to fill the full container width.
• Inline Elements (<span>, <a>, <strong>, <em>): Do not break onto a new line; take up only as much width as their content needs.

<!-- Block containers group larger sections -->
<div class="user-card">
  <!-- Inline containers target specific words for styling -->
  <p>Status: <span class="badge online">Active</span></p>
</div>

2. Global Attributes

Attributes available on all HTML elements:

• id: Unique identifier within the document (must not be repeated).
• class: Reusable identifier used to target multiple elements for CSS styling.
• title: Tooltip text shown on hover.
• lang: Overrides the document language for a specific snippet.

<p id="quote-1" class="highlighted text-center" title="Quote of the day">
  The only way to go fast, is to go well.
</p>

Daily Hands-on Practice (70%)

1. Create a page with 3 generic cards using <div class="card">.
2. Inside each card, highlight a specific keyword using <span class="highlight">.
3. Give each card a unique id and a helpful title tooltip attribute.