Lecture 4 Demo

[Classroom Tip] This demo makes block vs inline behavior visible, shows div layout building, and demonstrates semantic HTML5 structure. Click the toggle buttons to watch the differences live!

1) Block vs Inline Elements – Side by Side

The key difference: block elements stack vertically, inline elements flow horizontally with text.

Block Elements (`<div>`)

div — Block 1 (takes full width)

div — Block 2 (pushed to next line)

div — Block 3 (own line again)

Each div starts on a new line and stretches to full width.

Inline Elements (`<span>`)

Words in a sentence: span 1 flows with span 2 text naturally.

Spans sit side by side, flowing like words in a sentence.

2) Building Page Layout with <div>

This is how developers use <div> to create classic page layouts.

HTML Structure:

<div class="container">
  <div class="header">
    <h1>Website</h1>
  </div>
  <div class="content-area">
    <div class="main">Main Area</div>
    <div class="sidebar">Sidebar</div>
  </div>
  <div class="footer">Footer</div>
</div>

Visual Result:

Main Content
Primary page content goes here — articles, products, etc.

3) Using <span> for Inline Styling

Click each button to see how span can highlight parts of text without affecting paragraph flow.

The exam is on Friday, so please revise all HTML tags covered this semester.

Notice: The paragraph structure doesn't change — only the specific word gets styled via <span>.

4) Generic <div> vs Semantic HTML5 Elements

Both approaches render identically in the browser, but semantic elements communicate meaning to search engines and screen readers.

Div-only approach (not ideal):

<div id="header">
  <h1>My Site</h1>
</div>
<div id="nav">...links</div>
<div id="main">
  <div class="article">...</div>
</div>
<div id="footer">...</div>

Semantic HTML5 approach (preferred):

<header>
  <h1>My Site</h1>
</header>
<nav>...links</nav>
<main>
  <article>...</article>
</main>
<footer>...</footer>

Both render the same in the browser. But <header>, <nav>, <main>, <article>, and <footer> tell Google and screen readers what the content means.

5) Box Model Preview

Every div (and every HTML element) has margin, border, padding, and content. Hover the box to see the DevTools-style breakdown.

CONTENT

← Yellow = Margin | Blue border = Border | Red = Padding + Content →