Member Avatar for versatile36

What is the exact purpose of div and span ??
i'm a little bit confused .....

  • 5 Contributors
  • 4 Replies
  • 121 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

The earlier replies from , , and cover the basic distinction. The points below build on those answers with practical, modern guidance you won't find there: when to prefer semantic elements, how to keep things accessible, and a few CSS/maintenance tips that'll stop common layout headaches.

Prefer semantic elements (nav, header, main, article, section, footer, etc.) instead of turning every region into a div. Semantic tags help screen readers, search engines, and future-you when maintaining code. Use span for small, text-level wrappers (styling, JS hooks) inside semantic content. See the authoritative references for div and span on MDN: div element and span element.

If a custom widget is built from div/span, add proper accessibility: native elements where possible, otherwise role, tabindex, and keyboard handlers. For example:

<div role="button" tabindex="0" class="toggle" aria-pressed="false">Show</div>

Add JS to toggle aria-pressed and respond to Enter/Space. For ARIA guidance see the WAI-ARIA docs: WAI-ARIA.

Quick CSS/troubleshooting tips: don’t rely on changing presentation to fix semantics — a span can be display:block, but that doesn't make it a semantic block. Use display:inline-block when you need inline items with width/height; remove unwanted gaps between inline-block elements by eliminating literal whitespace or using font-size:0 on the container. Avoid "div-soup": prefer meaningful structure and CSS Grid/Flexbox on a few containers instead of many nested anonymous boxes.

Recommended Answers

All 4 Replies

Member Avatar for serkan sendur

in html elements are either block or inline types. block types causes line breaks and inline types can be added next to each other like text. so div is a block element when you insert to divs they are located on below the other, however, two spans are located next to each other.

Member Avatar for Airshow

I always teach it like this:

DIV = General purpose block element
SPAN = General purpose inline element

Style them with CSS for millions of different effects.

Airshow

Member Avatar for guru12

I think Now you will clear te difference between the span and div
See below example

For example, this...

<ul class="menu">
  <li>Main page</li>
  <li>Contents</li>
  <li>Help</li>
</ul>

...is usually preferable to this:

<div class="menu">
  <span>Main page</span>
  <span>Contents</span>
  <span>Help</span>
</div>
Member Avatar for MidiMagic

The div tag is a generic box container.

The span tag is a generic device for adding styles (such as fonts) to text.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.