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:

Output:

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:

Output:

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:

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.

Approach 2: CSS Inline Styles (Modern)

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

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.

Approach 2: CSS Inline Styles (Modern)

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

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:

Output:

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:

Output:

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:

Output:

Picsum Photo

Random images from Lorem Picsum service.

Pravatar Avatar

Placeholder avatars from Pravatar service.

LoremFlickr People

Random people images from LoremFlickr service.