Can I put a inside a ?

No. A paragraph may only contain inline (phrasing) content. If you put a inside a , the browser ends the paragraph before the div. Use a or as the outer element instead.

What is the difference between and ?

A is a thematic part of the page, usually with its own heading. A has no meaning and exists only for styling or scripting. Use when the content forms a distinct topic.

<div> Tag in HTML – Syntax, Attributes & Live Example

Quick facts

Category	Flow content, palpable content
Content model	Flow content — can contain any other flow elements or text
Tag omission	Neither the start nor end tag can be omitted
Permitted parents	Any element that accepts flow content
DOM interface	`HTMLDivElement`

Syntax

<div class="value">content</div>

Live example

Edit the code below and watch the preview update instantly.

index.html

Preview

Open in Full Editor →

Attributes

Attribute	Description
—	`<div>` has no attributes of its own — only the global attributes shared by every HTML element (`id`, `class`, `style`, `title`, `data-*`, etc.).

Common examples

Group content so you can style it together

Wrap related elements in a <div> with a class, then style the whole group with CSS. This is the classic way to build a “card”.

<div class="card">
  <h3>Free plan</h3>
  <p>Everything you need to get started.</p>
</div>

<style>
  .card { padding: 1rem; border: 1px solid #ddd; border-radius: 8px; }
</style>

Build a two-column layout with flexbox

Most page layouts are rows and columns of divs arranged with CSS flexbox or grid.

<div class="row">
  <div class="sidebar">Sidebar</div>
  <div class="content">Main content</div>
</div>

<style>
  .row { display: flex; gap: 1rem; }
  .sidebar { flex: 1; }
  .content { flex: 3; }
</style>

How to center a div

One of the most searched HTML questions. The simplest modern answer is CSS grid with place-items: center on the parent.

<div class="parent">
  <div class="box">I'm centered</div>
</div>

<style>
  .parent { display: grid; place-items: center; min-height: 300px; }
</style>

<div> vs <span>

Both are generic containers with no meaning of their own, so the choice comes down to how they sit on the page. A <div> is a block element: it starts on a new line and stretches to the full width available. A <span> is inline: it flows inside a line of text and is only as wide as its content.

Use a div to group whole sections — cards, columns, wrappers for layout — and a span to style or target a few words inside a sentence. If the content has a real meaning, reach for a semantic element before either of them.

	<div>	<span>
Display	Block (new line, full width)	Inline (flows with text)
Typical use	Layout, grouping sections	Styling words inside text
Can contain	Almost any content	Inline content only

Common mistakes to avoid

“Divitis”: using <div> for everything. If a part of the page has a meaning, use the semantic element instead: <header>, <nav>, <main>, <article> or <footer>.
Making a div act as a button. A clickable div can’t be reached with the Tab key or activated with Enter. Use a real <button>.
Putting a div inside a paragraph or span. A <p> can only hold inline content, so the browser closes the paragraph early and your layout breaks.
Losing track of closing tags. Deeply nested divs with a missing </div> are a common cause of broken layouts. Indent your code, or run it through the HTML formatter to spot the problem.

Accessibility & SEO tips

A <div> has no meaning for screen readers or search engines; they simply read the text inside it. Semantic elements give both of them a map of your page.
Use landmark elements (<header>, <nav>, <main>, <footer>) for the big regions, and divs for styling wrappers inside them.
Only add ARIA roles to a div when no native element fits — native HTML elements come with keyboard support and meaning built in.

Browser support

Supported in every browser, including Chrome, Edge, Firefox, Safari and their mobile versions — it has been part of HTML since the very first versions.

Tutorials: How to add a background image, How to center a div

Related tags

Frequently asked questions

Is <div> a semantic element?

No — it carries no meaning about its content. When the content has a specific role, prefer a semantic element like <section>, <article>, or <header> instead.

When should I use <div> vs <span>?

Use <div> for block-level grouping — it stacks vertically and takes the full available width by default. Use <span> for inline grouping within a line of text.

How do I center a div?

Put display: grid and place-items: center on the parent element (give it a height if needed). For horizontal centering only, give the div a width and margin: 0 auto.

Can I put a <div> inside a <p>?

No. A paragraph may only contain inline (phrasing) content. If you put a <div> inside a <p>, the browser ends the paragraph before the div. Use a <div> or <section> as the outer element instead.

What is the difference between <div> and <section>?

A <section> is a thematic part of the page, usually with its own heading. A <div> has no meaning and exists only for styling or scripting. Use <section> when the content forms a distinct topic.