Block/Inline, Div & Classes

Block & Inline Elements

Every HTML element has a default display behavior:

• Block-level — starts on a new line, takes full width available (e.g. <div>, <p>, <h1>, <ul>)
• Inline — stays in the flow of text, only as wide as its content (e.g. <span>, <a>, <strong>, <img>)

CSS's display property can override this (e.g. display: inline-block;), but it's important to know the defaults.

Div & Span

<div> and <span> are generic containers with no meaning of their own — they exist purely to group content for styling/scripting.

<div class="card">
  <h3>HTML Basics</h3>
  <p>Learn to build web pages from scratch.</p>
</div>

<p>Your price is <span class="highlight">₹199</span> only.</p>

Rule of thumb: <div> to wrap blocks/sections, <span> to wrap a word or phrase inside a line.

Classes

class can be used on many elements, and one element can have multiple classes:

<div class="card featured">...</div>
<div class="card">...</div>

.card { border: 1px solid #ccc; }  /* target by class in CSS: dot */

Id

id must be unique on the page, used for one specific element:

<section id="pricing">...</section>
<a href="#pricing">Jump to Pricing</a>

#pricing { padding: 20px; }  /* target by id in CSS: hash */

Use class for anything reusable (a repeating pattern), and id for a one-off element you need to reference directly, like a page anchor.