Block, Inline, Div, Classes & More

Block elements start on a new line and take full width — <div>, <p>, <h1>, <ul>. Inline elements stay in the same line flow — <span>, <a>, <strong>, <img>.

Block and Inline elements

Block elements start on a new line and take full width — <div>, <p>, <h1>, <ul>. Inline elements stay in the same line flow — <span>, <a>, <strong>, <img>.

You can change display with CSS later, but knowing defaults helps you fix layout bugs.

Real-life example: Block is like stacking lunch boxes one below another. Inline is like words in one sentence on the same line.

Block vs inline

<p>Block paragraph one</p>
<p>Block paragraph two</p>
<p>Inline <span>highlight</span> and <a href="#">link</a> inside text.</p>

The div element

<div> is a generic block container with no meaning of its own. Use it to group elements for layout or styling.

Prefer semantic tags (<header>, <section>) when they fit — you will learn those in a later lesson.

Real-life example: div is like an empty plastic box — you decide what to put inside and label it with class or id.

Div wrapper

<div class="card">
  <h2>Course Card</h2>
  <p>Learn HTML step by step.</p>
</div>

HTML Classes

class="name" labels elements for CSS or JavaScript. Many elements can share the same class.

One element can have multiple classes separated by spaces: class="btn primary".

Real-life example: Class is like a school house name — many students (elements) can be in "Blue House" and wear the same badge style.

Classes

<p class="intro">Welcome!</p>
<button class="btn primary">Join</button>
<button class="btn secondary">Learn More</button>

HTML Id

id="unique-name" must be unique on the page. Use for one special element — jump links, form labels, or JavaScript targets.

Never duplicate the same id twice on one page.

Real-life example: Id is like your Aadhaar number — only one person (element) has that exact number on the page.

Id for jump link

<a href="#top">Back to top</a>
...
<section id="top">
  <h1>Page Start</h1>
</section>

HTML Buttons

Use <button> for actions on the page. Use <button type="submit"> inside forms to send data.

Buttons can contain text and icons. style or CSS makes them look clickable.

Real-life example: A button is like a doorbell — you press it and something should happen (JavaScript or form submit).

Buttons

<button type="button">Click Me</button>
<button type="submit">Send Form</button>

HTML Iframes

Only embed trusted sites. Too many iframes slow the page.

Real-life example: Iframe is like a TV screen inside your shop window showing another channel — your wall, their content inside a frame.

Tip: Use class for styling groups. Use id when exactly one element needs a unique name.

Iframe embed

<iframe
  src="https://www.openstreetmap.org/export/embed.html"
  width="400"
  height="300"
  title="Map location"
></iframe>