Day 1 - Block Elements

Block-level elements are elements that take up the full width of their parent container.

1. Headings

What it does: <h1> through <h6> mark six levels of document hierarchy — from the page's primary topic down to minor subsections.

When to use it in real projects:

Landing pages: One <h1> for the hero headline; <h2>/<h3> for feature sections and sub-headings. Never skip levels — crawlers and screen readers depend on the hierarchy.
CMS / blog layouts: Article titles go in <h1> (or <h2> inside a list), sub-topics in <h3>. Keep the outline logical so auto-generated tables of contents work correctly.
Dashboards: Section labels like "Revenue" or "Active Users" are typically <h2> or <h3> — use them even if you reset their visual size with CSS; the semantic meaning matters for accessibility.

Code:

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

Output:

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

2. Paragraphs

What it does: <p> wraps a discrete block of text, automatically adding vertical margin above and below it — the browser's way of visually separating thoughts.

When to use it in real projects:

Content-heavy pages: Body copy, product descriptions, and blog posts all live in <p> tags. If your text is prose, it belongs here — not in a <div>.
CMS-generated content: Most WYSIWYG editors and Markdown converters output <p> tags automatically. Style them globally in your CSS rather than applying inline styles per paragraph.
Form help text: Short instructional copy beneath a form field is almost always a <p> (or <small> inside one), giving assistive technologies the right context.

Code:

<p>
    Lorem ipsum dolor sit amet consectetur  adipisicing elit. Distinctio, ratione.
</p>

Output:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio, ratione.

3. Preformatted Text

What it does: <pre> renders text in a monospace font exactly as written in the source — every space, tab, and newline is preserved, with no collapsing.

When to use it in real projects:

Documentation sites: Wrap code snippets in <pre><code> (not just <code> alone) so indentation and line breaks render faithfully — syntax highlighters like Prism.js also expect this structure.
Terminal / CLI output: When showing command output, error traces, or log snippets, <pre> ensures the columnar formatting isn't mangled by the browser's whitespace rules.
ASCII art or structured data previews: Any content where spatial alignment carries meaning — think configuration files, schema diffs, or poetry — requires <pre> to render correctly.

Code:

<pre>
Lorem            ipsum dolor sit amet consectetur, 
adipisicing elit. Dolore, itaque!
</pre>

Output:

Lorem            ipsum dolor sit amet consectetur, 
adipisicing elit. Dolore, itaque!

4. Unordered Lists

What it does: <ul> renders a bulleted list where sequence doesn't matter. The type attribute (or CSS list-style-type) controls the bullet marker.

When to use it in real projects:

Navigation menus: Nearly every nav bar is an unstyled <ul> underneath — reset bullets with list-style: none and lay items out with flexbox.
Feature lists on landing pages: A bullet-pointed list of product benefits or plan features is semantically correct here and trivial to restyle per brand.
Sidebar / tag clouds: Tag lists, related-post links, and filter options in dashboards are typically unordered lists with custom marker styles or none at all.

Approach 1: Legacy HTML Attributes

Simple markers defined directly in the HTML tag. Modern development prefers CSS for this.

0. Disc (Browser Default)

<h3>Soft Drinks</h3>
<ul type="disc">
  <li>Coke</li>
  <li>Pepsi</li>
  <li>Sarsi</li>
</ul>

Soft Drinks

Coke
Pepsi
Sarsi

1. Circle

<h3>Soft Drinks</h3>
<ul type="circle">
  <li>Coke</li>
  <li>Pepsi</li>
  <li>Sarsi</li>
</ul>

Soft Drinks

Coke
Pepsi
Sarsi

2. Square

<h3>Soft Drinks</h3>
<ul type="square">
  <li>Coke</li>
  <li>Pepsi</li>
  <li>Sarsi</li>
</ul>

Soft Drinks

Coke
Pepsi
Sarsi

3. None

<h3>Soft Drinks</h3>
<ul type="none">
  <li>Coke</li>
  <li>Pepsi</li>
  <li>Sarsi</li>
</ul>

Soft Drinks

Coke
Pepsi
Sarsi

Approach 2: CSS Inline Styles (Modern)

Using list-style-type for more flexibility and consistent styling.

1. Disc

<ul style="list-style-type: disc;">
  <li>Coke</li>
  <li>Pepsi</li>
  <li>Sarsi</li>
</ul>

Coke
Pepsi
Sarsi

2. Circle

<ul style="list-style-type: circle;">
  <li>Coke</li>
  <li>Pepsi</li>
  <li>Sarsi</li>
</ul>

Coke
Pepsi
Sarsi

3. Square

<ul style="list-style-type: square;">
  <li>Coke</li>
  <li>Pepsi</li>
  <li>Sarsi</li>
</ul>

Coke
Pepsi
Sarsi

4. None

<ul style="list-style-type: none;">
  <li>Coke</li>
  <li>Pepsi</li>
  <li>Sarsi</li>
</ul>

Coke
Pepsi
Sarsi

5. Ordered Lists

What it does: <ol> renders a sequentially numbered list where order is semantically significant. The type attribute switches the counter style (1, A, a, I, i).

When to use it in real projects:

Step-by-step instructions: Onboarding flows, installation guides, and checkout steps — anywhere the user must follow a sequence — are prime <ol> territory.
Ranked content: "Top 10" lists, leaderboards, or search result snippets where position carries meaning benefit from an ordered list over a styled <div> stack.
Legal / academic documents: Numbered clauses, terms and conditions, and footnoted references use Roman numeral or letter variants to match document conventions.

Approach 1: Legacy HTML Attributes

The type attribute is the original way to change list markers, still supported but limited to five basic styles.

1. Default (Numbers)

<ol type="1">
  <li>Macha</li>
  <li>Taro</li>
  <li>Chocolate</li>
</ol>

Macha
Taro
Chocolate

2. Uppercase Letters

<ol type="A">
  <li>Macha</li>
  <li>Taro</li>
  <li>Chocolate</li>
</ol>

Macha
Taro
Chocolate

3. Lowercase Roman

<ol type="i">
  <li>Macha</li>
  <li>Taro</li>
  <li>Chocolate</li>
</ol>

Macha
Taro
Chocolate

4. Uppercase Roman

<ol type="I">
  <li>Macha</li>
  <li>Taro</li>
  <li>Chocolate</li>
</ol>

Macha
Taro
Chocolate

Approach 2: CSS Inline Styles (Modern)

The list-style-type property is the modern standard, offering more options and better integration with design systems.

1. Decimal (1, 2, 3)

<ol style="list-style-type: decimal;">
  <li>Macha</li>
  <li>Taro</li>
  <li>Chocolate</li>
</ol>

Macha
Taro
Chocolate

2. Lower Alpha (a, b, c)

<ol style="list-style-type: lower-alpha;">
  <li>Macha</li>
  <li>Taro</li>
  <li>Chocolate</li>
</ol>

Macha
Taro
Chocolate

3. Upper Alpha (A, B, C)

<ol style="list-style-type: upper-alpha;">
  <li>Macha</li>
  <li>Taro</li>
  <li>Chocolate</li>
</ol>

Macha
Taro
Chocolate

4. Lower Roman (i, ii, iii)

<ol style="list-style-type: lower-roman;">
  <li>Macha</li>
  <li>Taro</li>
  <li>Chocolate</li>
</ol>

Macha
Taro
Chocolate

5. Upper Roman (I, II, III)

<ol style="list-style-type: upper-roman;">
  <li>Macha</li>
  <li>Taro</li>
  <li>Chocolate</li>
</ol>

Macha
Taro
Chocolate

6. None (no display)

<ol style="list-style-type: none;">
  <li>Macha</li>
  <li>Taro</li>
  <li>Chocolate</li>
</ol>

Macha
Taro
Chocolate

6. Description Lists

What it does: <dl> pairs terms (<dt>) with their definitions or descriptions (<dd>), providing a semantic key-value structure that plain paragraphs can't express.

When to use it in real projects:

Glossaries and documentation: API reference docs, knowledge bases, and technical glossaries are textbook <dl> use cases — term on the left, explanation indented below.
Product detail pages: Spec sheets ("Processor: M3 Pro", "RAM: 18 GB") map naturally to <dt>/<dd> pairs. Screen readers announce them as definition groups, improving accessibility.
FAQ sections: Question in <dt>, answer in <dd> — semantically cleaner than a heading-paragraph pattern and easier to style consistently across a CMS.

Code:

<dl>
    <dt>HTML</dt>
    <dd>This is the backbone of the  website</dd>
    <dt>CSS</dt>
    <dd>This is the appearance of the  website</dd>
    <dt>Javascript</dt>
    <dd>This is the behavior of the  website</dd>
</dl>

Output:

HTML: This is the backbone of the website
CSS: This is the appearance of the website
Javascript: This is the behavior of the website

7. Tables

What it does: <table> organizes data into a two-dimensional grid of rows and columns, creating a semantic link between headers (<th>) and data cells (<td>).

When to use it in real projects:

Data dashboards: Displaying structured datasets like transaction logs, user management lists, or inventory reports where users need to compare values across rows.
Comparison matrices: Pricing tables or product spec sheets where features are mapped against different tiers or models.
Itemized documents: Financial statements, invoices, and order summaries where quantities, descriptions, and prices must be precisely aligned.

Code:

<table border="1" style="width: 100%; border-collapse:  collapse;">
  <thead>
    <tr style="background-color: #e67e22;  color: white;">
      <th colspan="3">Meralco Bill  Breakdown (Pass-Through Charges)</th>
    </tr>
    <tr style="background-color: #ecf0f1;  text-align: left;">
      <th style="padding:  8px;">Charge Category</th>
      <th style="padding:  8px;">Specific Charge</th>
      <th style="padding:  8px;">Amount (PhP)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="padding:  8px;">Generation</td>
      <td style="padding:  8px;">Generation Charge</td>
      <td style="padding:  8px;">730.60</td>
    </tr>
    <tr>
      <td rowspan="3"  style="vertical-align: middle; padding: 8px;">Subsidies &  Allowances</td>
      <td style="padding:  8px;">Lifeline Rate Subsidy</td>
      <td style="padding:  8px;">7.34</td>
    </tr>
    <tr>
      <td style="padding:  8px;">Senior Citizen Subsidy</td>
      <td style="padding:  8px;">0.01</td>
    </tr>
    <tr>
      <td style="padding:  8px;">FIT-All (Renewable)</td>
      <td style="padding:  8px;">8.36</td>
    </tr>
  </tbody>
  <tfoot>
    <tr style="background-color: #f9f9f9;  font-style: italic;">
      <td colspan="3" style="padding:  8px;">* Computations based on an assumed 100 kWh monthly  consumption. These are mandated pass-through charges remitted to other  entities.</td>
    </tr>
  </tfoot>
</table>

Output:

Meralco Bill Breakdown (Pass-Through Charges)
Charge Category	Specific Charge	Amount (PhP)
Generation	Generation Charge	730.60
Subsidies & Allowances	Lifeline Rate Subsidy	7.34
	Senior Citizen Subsidy	0.01
	FIT-All (Renewable)	8.36
* Computations based on an assumed 100 kWh monthly consumption. These are mandated pass-through charges remitted to other entities.

8. Div Blocks with Inline Styles

What it does: <div> is a generic block container with no implicit meaning — it groups elements purely for layout and styling purposes, taking the full width of its parent by default.

When to use it in real projects:

Layout scaffolding: Grid wrappers, flex containers, card shells — anytime you need a box that CSS can target, a <div> is the right choice when no semantic element fits (prefer <section>, <article>, or <main> when they do).
Component boundaries: In React, Vue, or any component-based system, the root element of a component is almost always a <div> (or a Fragment), scoping its styles and event handlers.
Dashboard widgets: Metric cards, charts, and data panels are each wrapped in a <div> with explicit dimensions, making them independently scrollable, positionable, and styleable.

Code:

<div style="display: flex; gap: 20px; flex-wrap: wrap;">
  <!-- Example 1: Using Picsum -->
  <div style=" border: 1px solid #ddd; border-radius:  8px; overflow: hidden;">
    <img  src="https://picsum.photos/300/160?random=1" alt="Picsum example"  style="width: 100%; height: auto; display: block;">
    <div style="padding: 16px;">
      <h3 style="margin: 0 0 8px 0;  color: #333;">Picsum Photo</h3>
      <p style="margin: 0; color:  #666; font-size: 14px; line-height: 1.5;">Random images from Lorem  Picsum service.</p>
    </div>
  </div>

  <!-- Example 2: Using Pravatar -->
  <div style=" border: 1px solid #ddd; border-radius:  8px; overflow: hidden;">
    <img src="https://i.pravatar.cc/300"  alt="Pravatar example" style="width: 100%; height: auto; display:  block;">
    <div style="padding: 16px;">
      <h3 style="margin: 0 0 8px 0;  color: #333;">Pravatar Avatar</h3>
      <p style="margin: 0; color:  #666; font-size: 14px; line-height: 1.5;">Placeholder avatars from  Pravatar service.</p>
    </div>
  </div>

  <!-- Example 3: Using LoremFlickr -->
  <div style=" border: 1px solid #ddd; border-radius:  8px; overflow: hidden;">
    <img  src="https://loremflickr.com/300/160/people" alt="LoremFlickr example"  style="width: 100%; height: auto; display: block;">
    <div style="padding: 16px;">
      <h3 style="margin: 0 0 8px 0;  color: #333;">LoremFlickr People</h3>
      <p style="margin: 0; color:  #666; font-size: 14px; line-height: 1.5;">Random people images from  LoremFlickr service.</p>
    </div>
  </div>
</div>

Output:

Picsum Photo

Random images from Lorem Picsum service.

Pravatar Avatar

Placeholder avatars from Pravatar service.

LoremFlickr People

Random people images from LoremFlickr service.

< Previous: Home | Next: Inline Elements >