Home » Learn » HTML Tutorial » HTML Div and Span

HTML Div and Span

<div> and <span> are two generic containers. They have no meaning of their own and no look by default. We use them to group content, so that we can style it with CSS or control it with JavaScript.

The div tag

<div> is a block container. It is mostly used to group big parts of a page, like a header, a sidebar or a card.

<div style="border:1px solid #333; padding:10px;">
  <h3>Card title</h3>
  <p>Some text inside the div.</p>
</div>
Output in the browser

Card title

Some text inside the div.

The span tag

<span> is an inline container. It is used to style a small part of a text, without breaking the line.

<p>My favourite colour is <span style="color:red; font-weight:bold;">red</span>.</p>
Output in the browser

My favourite colour is red.

Difference between div and span

Pointdivspan
TypeBlockInline
New lineStarts on a new lineStays in the line
Used forLayout and grouping sectionsStyling a small piece of text
Can containBlock and inline elementsInline elements and text

You can also read the interview question difference between DIV, SPAN and paragraph.

Note: Use a meaningful tag when one exists, like <header>, <nav> or <strong>. Use div and span only when there is no better tag. See semantic elements.

Summary

  • div is a block container and span is an inline container.
  • They are used with class or id to apply CSS.
  • Next: HTML class and id.

Share this post:

Share on LinkedIn
Congratulations! Chapter Finished. Learn more about the similar topics:
Exercises & Assignments
No Content Found.
Interview Questions & Answers
No Content Found.